Everything you need to set up and customize the Collection Card block — from choosing a collection and configuring the card image to adding titles, descriptions, product counts, and styling the card layout.
A collection card is a clickable visual tile that represents one of your Shopify collections. It typically shows a featured image along with the collection's name, and when a visitor clicks or taps the card, they are taken directly to that collection page. Collection cards are a popular way to help customers browse your store by category, brand, or product type.
In the Boardwalk theme, the Collection Card is a parent block that acts as a container for several child blocks. It automatically includes a Collection Media block (the card image), and you can add child blocks for the Collection Title, Collection Description, Collection Count, and Spacer elements. The parent card controls the overall layout, corner rounding, text alignment, and color scheme, while each child block has its own typography and spacing settings.
Follow these steps to add and configure a Collection Card block in your Shopify store using the Boardwalk theme.
In your Shopify admin, go to
Online Store → Themes, find Boardwalk,
and click Customize. Navigate to the page
where you want to display collection cards using the page
selector dropdown at the top center of the editor.
Click Add section in the Theme Editor sidebar and choose a section that supports collection cards (such as a collection list or featured collections section). Once the section is added, you can add Collection Card blocks inside it.
Inside the section, click Add block and select Collection card. A new card will appear with a placeholder image. Click on the Collection Card block in the sidebar to open its settings.
Use the Collection picker in the block settings to choose which collection the card should link to. The card will automatically pull in the collection's featured image, title, description, and product count based on which child blocks you have enabled.
Note: You must create your collections
first in the Shopify admin under
Products → Collections. Each
collection should have a title, and ideally a featured
image and description, so the card has content to
display.
Adjust the card's corner radius, text alignment, and color scheme. These settings control the overall look of the card container.
Inside the Collection Card, click Add block to add child blocks such as Collection Title, Collection Description, or Collection Count. Drag and drop the blocks to reorder them. The Collection Media block is included automatically and always appears at the top of the card.
Click Save in the Theme Editor. Preview your page to verify the collection cards are displaying correctly with the image, title, and any other child blocks you've added.
These settings are found on the Collection Card parent block itself. They control the overall appearance of the card container.
Choose which collection the card links to. The card will automatically display the collection's featured image, title, description, and product count based on which child blocks are present. If no collection is selected, placeholder content is shown.
Rounds the corners of the entire card. Range: 0px to 24px.
Controls the horizontal alignment of all text content
inside the card. Options: Left,
Center, or Right. This
setting applies to the title, description, and product
count child blocks.
Select a color scheme to style the card's background and text colors. Choose a different scheme from the parent section to make cards visually stand out.
The Collection Card supports five child blocks. The Collection Media block is always included automatically, while the others can be added, removed, and reordered to build your desired card layout.
Displays the collection's featured image at the top of the card. If the collection doesn't have a featured image, a placeholder graphic is shown instead. The image includes a subtle zoom effect when a visitor hovers over the card.
Adapt to image,
Widescreen,
Standard Landscape,
Landscape, Square, or
Portrait.
None or Gradient. The
gradient fades from the bottom of the image upward,
which can help text placed over the image stand out.
Gradient.
Tip: To set or change a collection's
featured image, go to
Products → Collections
in your Shopify admin, select the collection, and add
an image in the Collection image
area.
Displays the collection's name, pulled automatically from the collection you selected. If no collection is assigned, placeholder text reading "Collection title" is shown instead.
Heading, Body,
Caption, or Menu.
Normal,
Medium, or Bold.
Tight, Normal, or
Loose.
Displays a snippet of the collection's description, pulled from the collection you selected. The text is automatically trimmed based on a word limit and clamped to a maximum of three visible lines. If the collection has no description, this block is hidden.
50% to 100%. Lower
values create a more subtle, secondary appearance.
Note: The description is pulled from
the collection itself, not from the block settings.
To edit the description text, go to
Products → Collections in your
Shopify admin and update the collection's description
field.
Displays the number of products in the collection (e.g., "24 products"). The count updates automatically when you add or remove products from the collection. The label is also translation-aware, so it will display correctly for singular counts (e.g., "1 product") and in other languages.
Adds empty vertical space between other child blocks inside the card. Use spacers to fine-tune the layout and create breathing room between elements like the title and description.
The Collection Card block comes with features that work automatically — no apps or custom code needed.
The card pulls the featured image, title, description, and product count directly from the collection you select. When you update the collection in your Shopify admin, the card updates automatically on your storefront.
When a visitor hovers over the card, the collection image gently scales up for a polished, interactive feel. The card also subtly reduces its opacity on hover to provide visual feedback.
You can add, remove, and reorder child blocks to build the exact card layout you want. Show just an image and title, or include a description, product count, and spacers for a more detailed card.
An optional gradient can be applied over the collection image, fading from the bottom up. This is useful for improving the readability of text that overlaps the image area, especially on lighter photos.
When no collection is selected, the card displays placeholder graphics and text so you can see how the layout will look while you're still setting things up in the Theme Editor.
The Collection Description block automatically strips any formatting from the description text and trims it to your chosen word limit. It also clamps the visible text to three lines maximum, so long descriptions don't break the card layout.
Padding values on the title, description, and count child blocks are automatically scaled down to 75% on mobile devices, so the card stays well-proportioned on smaller screens without needing separate mobile settings.
The Collection Count block uses Shopify's built-in translation system, so the "products" label displays correctly in all languages your store supports — including proper singular and plural forms.