Everything you need to set up and customize the Collection Header block — from displaying a hero banner with your collection image to positioning the title, description, and product count.
A collection header is a visual banner that appears at the top of a collection page. It gives shoppers an immediate sense of what the collection is about and sets the tone for the products below. Think of it as a storefront window display for each product category.
In the Boardwalk theme, the Collection Header block displays the collection's image as a full-width background with text content layered on top. It supports three child blocks — Title, Description, and Product Count — which can be added, removed, and reordered. When a collection doesn't have an image assigned, the header automatically switches to a clean text-only layout.
Note: The collection image used in this
header is set in your Shopify admin under
Products → Collections → [Your Collection]
→ Image. This is separate from any product
images in the collection.
Follow these steps to add and configure the Collection Header on your collection pages using the Boardwalk theme.
Go to
Products → Collections in your Shopify
admin. Open the collection you want to customize and
upload an image in the Image section on
the right side of the page. This is the image that will
appear as the background of your Collection Header.
Tip: For best results, use a high-resolution image (at least 2000px wide). The image will be displayed full-width, so landscape orientations tend to work best.
In your Shopify admin, go to
Online Store → Themes, find Boardwalk,
and click Customize. Use the page
selector dropdown at the top center of the editor to
navigate to a Collection page template.
Click Add block in the Theme Editor sidebar and choose Collection header from the list. The block will appear on your page with the collection's image as a background banner and the title, description, and product count layered on top.
Click the Collection header block in the sidebar. From here you can control the banner height, content position, text alignment, overlay style, and colors. These settings control the overall look of the entire header.
Inside the Collection Header block, you'll find child blocks for the Title, Description, and Product Count. Click on each one to adjust its typography and appearance. You can also reorder or remove child blocks you don't need.
Click Save in the Theme Editor. Preview your collection page to verify the header image, overlay, and text content are displaying as expected.
These settings apply to the Collection Header block as a whole. Click the top-level Collection header block in the Theme Editor sidebar to access them.
When turned on, the collection's image (set in the Shopify admin) is displayed as a full-width background behind the text content. When turned off, the header switches to a text-only layout with no fixed height.
Controls whether the text content inside the header is aligned to the left, center, or right.
Positions the text content vertically within the
banner. Options: Top,
Middle, or Bottom.
Positions the text content horizontally within the
banner. Options: Left,
Center, or Right.
Controls the spacing between the text content and the edges of the banner. Range: 16px to 80px. On mobile devices, padding is automatically reduced to 65% of the desktop value.
Sets the maximum width of the text content area. Use this to prevent text from stretching too wide on large screens. Range: 320px to 960px.
Sets the height of the banner on desktop screens. Range: 160px to 640px. This setting only appears when Show collection image is turned on.
Sets the height of the banner on mobile screens. Range: 120px to 480px. This setting only appears when Show collection image is turned on.
Adds a color layer on top of the collection image to
improve text readability. Options:
None (no overlay),
Solid (flat color fill),
Gradient (bottom) (fades in from the
bottom), or
Gradient (full) (a subtle-to-strong
gradient from top to bottom). This setting only
appears when
Show collection image is turned on.
Sets the color of the overlay. Supports transparency, so you can fine-tune how much of the image shows through. This setting only appears when Show collection image is turned on.
Sets the color of all text inside the header, including the title, description, and product count. This setting only appears when Show collection image is turned on. When the image is hidden, text color follows your theme's default foreground color.
The Collection Header contains three child blocks that control what text content appears inside the banner. Each block can be added, removed, and reordered independently.
Displays the collection's name as a prominent heading inside the banner. The title is pulled automatically from the collection's name in your Shopify admin — you don't need to type it manually.
Normal,
Medium, Semibold, or
Bold.
Tight, Normal, or
Wide.
Displays the collection's description text inside the banner. Like the title, this is pulled automatically from the collection's description in your Shopify admin. It supports rich text formatting (bold, italic, links, etc.).
Note: To edit the collection
description text, go to
Products → Collections → [Your
Collection] in your Shopify admin. The
description entered there will automatically appear
in the Collection Header.
Displays the number of products in the collection. This count updates automatically as you add or remove products from the collection. The count only appears when the collection has at least one product.
"12 products" (with the word "products"),
"12 items" (with the word "items"), or
"12" (number only).
The Collection Header comes with features that work automatically — no apps or custom code needed.
When a collection has no image assigned, or when Show collection image is turned off, the header automatically switches to a clean text-only layout. The fixed height is removed and text color follows your theme's default foreground color.
If you've set a focal point on your collection image (using Shopify's built-in focal point editor), the Collection Header will use it to keep the most important part of the image visible, even when the banner is cropped on different screen sizes.
The collection image is served at the optimal size for each visitor's screen. Smaller devices download a smaller file, which helps your pages load faster without sacrificing quality on large displays.
The banner height, content padding, and title font size are all automatically adjusted on mobile devices so the header looks proportional on smaller screens without any extra configuration.
Long collection descriptions can be neatly truncated with an ellipsis using the Max lines setting on the Description child block. This keeps the banner looking clean even when collections have lengthy descriptions.
Choose from four overlay styles — none, solid, bottom gradient, or full gradient — to improve text readability over any image. The overlay color supports transparency, giving you precise control over the final look.
Products → Collections → [Your
Collection] in your Shopify admin and check the
Image section on the right side. If
no image is uploaded there, the header will display in
text-only mode.
Settings → Files, find the image,
and use the focal point tool. The Collection Header
will keep the focal area centered when cropping.
Products → Collections → [Your
Collection] → Image. The Collection Header
block automatically pulls the correct image for
whichever collection page the visitor is viewing.