Boardwalk Block Guide

Page Card Block

Everything you need to set up and customize Page Card blocks — from selecting a page and displaying its image to styling the title, description, and card appearance.

About

A page in Shopify is a standalone piece of content — like an "About Us" story, a "Contact" form, a shipping policy, or any other information that doesn't belong in your blog or product catalog. Pages are created in your Shopify admin and can include text, images, and embedded media.

In the Boardwalk theme, the Page Card block lets you showcase any page from your store as a visual, clickable card. The card automatically displays the page's featured image and links directly to that page. Inside the card, you can add inner blocks — like the page title and page description — to control exactly what information appears. Page Cards are commonly used inside grid or carousel sections to highlight key store pages in an eye-catching layout.


How to Set Up a Page Card

Follow these steps to add a Page Card block to any section that supports it in the Boardwalk theme.

1
Create Your Page in Shopify

Before adding a Page Card, make sure the page you want to feature already exists in your store. Go to Online Store → Pages in your Shopify admin to create or edit pages. Add a title, content, and optionally a featured image that will display on the card.

Note: The Page Card displays the page's featured image. To set a featured image, open the page in your Shopify admin, scroll down to the bottom of the editor, and upload an image in the Featured image area. If no featured image is set, a placeholder icon will appear instead.

2
Open the Theme Editor

In your Shopify admin, go to Online Store → Themes, find Boardwalk, and click Customize. Navigate to the page where you want to display Page Cards using the page selector dropdown at the top center of the editor.

3
Add a Page Card Block

Inside a section that supports blocks (such as a grid or carousel section), click Add block and choose Page card from the list. A card with a placeholder will appear on your page.

4
Select a Page

Click the Page card block in the sidebar. Use the Page picker to choose the page you want to feature. The card will automatically pull in the page's featured image and link to it.

5
Add Inner Blocks (Optional)

Inside the Page Card block, you can add inner blocks to display additional information. Click Add block inside the Page Card and choose from options like Page title, Page description, Text, Divider, or Spacer. Rearrange these blocks to control the order of content on the card.

6
Configure Card Settings

Click the top-level Page card block to access its settings. Adjust the corner radius, text alignment, and color scheme to match your store's design.

7
Save and Preview

Click Save in the Theme Editor. Preview your page to verify the Page Card image, title, description, and link are all displaying as expected.


Page Card Settings

These settings apply to the Page Card block itself and are accessible by clicking the top-level Page Card in the Theme Editor sidebar.

Page Card Settings

Corner radius

Rounds the corners of the entire Page Card. Range: 0px to 24px.

Text alignment

Controls how text content is aligned inside the card. Options: Left, Center, or Right. This alignment applies to all inner blocks (title, description, and text).

Card color scheme

Select any defined color scheme to style the card's background and text colors.


Inner Blocks

Inner blocks are the content elements you add inside a Page Card. They control what information appears on the card and how it's styled. You can add multiple inner blocks and rearrange them in any order.

Page Title

Displays the title of the selected page. This is automatically pulled from the page you chose in the Page Card settings — you don't need to type it manually. The title links to the page, and on hover it fades slightly to indicate it's clickable. On mobile, the font size scales down automatically for a comfortable reading experience.

  • Font family — Choose from Heading, Body, Menu, or Caption
  • Font weight — Options: Light, Normal, Medium, or Bold
  • Font size — Range: 14px to 48px
  • Line height — Range: 1 to 2
  • Letter spacing — Options: Tight, Normal, Wide, or Extra wide
  • Padding top / bottom — Range: 0px to 36px. Adds vertical spacing above or below the title.
Page Description

Displays a short excerpt of the page's content. The description is automatically pulled from the page's body text — any HTML formatting is stripped out, and the text is trimmed to the character length you specify. If the page has no content, nothing is shown. On mobile, the number of visible lines is reduced by one to save space.

  • Description length (characters) — Range: 50 to 300 characters. Controls how much of the page content is shown.
  • Maximum lines to show — Range: 1 to 6. Text that exceeds this number of lines is automatically hidden with an ellipsis.
  • Font family — Choose from Heading, Body, Menu, or Caption
  • Font size — Range: 12px to 20px
  • Line height — Range: 1.2 to 2
  • Text opacity — Range: 50% to 100%. Lower values make the description text lighter, creating a subtle visual hierarchy against the title.
  • Padding top / bottom — Range: 0px to 36px. Adds vertical spacing above or below the description.
Text

A free-form text block that lets you add any custom content to the card. Unlike the Page Title and Page Description blocks, this text is not pulled from the page — you write it yourself. Use it for labels, calls to action, or any additional context you want to display on the card.

Divider

Adds a horizontal line between inner blocks. Use it to visually separate the title from the description or to break up different sections of content within the card.

Spacer

Adds adjustable blank space between inner blocks. Use this to fine-tune the vertical spacing inside the card without adding visible content.

App Block

If you have third-party Shopify apps installed that provide theme blocks, they can be added inside the Page Card as well. This allows app content — such as badges, icons, or custom widgets — to appear directly on the card.


Built-In Features

The Page Card block comes with features that work automatically — no apps or custom code needed.

Feature Overview

Automatic image display

The card automatically shows the selected page's featured image in a square aspect ratio. The image fills the card area and is cropped to fit. If no featured image is set on the page, a placeholder icon appears instead.

Hover zoom effect

When a visitor hovers over the card image, it gently zooms in with a smooth animation. This provides a visual cue that the card is clickable and adds a polished, interactive feel to your page.

Clickable card link

The entire image area of the card is wrapped in a link to the selected page. Visitors can click or tap anywhere on the image to navigate directly to the full page.

Automatic content from page data

The Page Title and Page Description inner blocks pull their content directly from the selected Shopify page. If you update the page title or content in your Shopify admin, the card automatically reflects those changes — no need to update the theme editor separately.

Smart description truncation

The Page Description block automatically strips out any formatting from the page content and trims the text to your chosen character length. It also limits the visible number of lines, adding an ellipsis if the text overflows. On mobile, one fewer line is shown to keep the card compact.

Flexible inner block layout

You can add, remove, and reorder inner blocks to create the exact card layout you want. Show just a title, a title and description, or combine text, dividers, and spacers for a fully custom arrangement.

Responsive mobile scaling

Both the Page Title and Page Description blocks automatically reduce their font sizes on smaller screens. Padding values also scale down proportionally, ensuring the card looks great on phones without any manual adjustments.


Frequently Asked Questions

The Page Card displays the page's featured image. If you see a placeholder icon, the selected page doesn't have a featured image set. To fix this, go to Online Store → Pages in your Shopify admin, open the page, and upload an image in the Featured image area at the bottom of the editor. Save the page, and the image will appear on the card automatically.
The Page Description block pulls its text from the body content of the selected page. If the page has no body content (only a title), the description block won't display anything. Add some text to the page's content area in your Shopify admin and the description will appear on the card.
The Page Title and Page Description blocks always pull their content from the selected page, so you can't override that text in the theme editor. However, you can add a Text inner block to display any custom text you like — such as a label or call to action — alongside or instead of the automatic title and description.
Yes. The Page Description block has two settings that control this. Description length sets the maximum number of characters pulled from the page content (50 to 300). Maximum lines to show limits how many lines are visible before the text is cut off with an ellipsis (1 to 6). Use both settings together to get the exact excerpt length you want.
Page Cards can be added as blocks inside any section that supports them, such as grid or carousel sections. They are not standalone sections — they live inside a parent section. Check the parent section's documentation to see which block types it supports.