Success
Collection
Create a customizable collection grid with filters, sorting, card styling, and in-grid promotional banners.
- Company XYZ documentation on grid interface settings
- Shopify documentation on customizing sections
- Company XYZ documentation on filters
- Shopify documentation on sections and blocks
- Company XYZ documentation on the collection banner block
- Company XYZ documentation on headers settings
- Company XYZ documentation on product cards settings
- Company XYZ documentation on section padding settings
- Company XYZ documentation on section backgrounds settings
- Company XYZ documentation on separators settings
- Company XYZ documentation on layout widths settings
Use this section to turn the current collection into a flexible product grid with browsing controls, card display options, and optional promotional banners inside the grid. It is best suited to collection pages where customers need to scan products quickly, refine results, and spot featured content without leaving the listing.
Core settings
Section titled “Core settings”This section always pulls from the active collection. Your first key choice is how to handle unavailable products, since that affects both browsing clarity and product visibility.
Hiding unavailable products keeps the grid focused on what can be purchased now. Moving them to the end is often a better fit when restocks are common or when you still want customers to discover the full range.
If customers regularly wait for restocks, showing unavailable products at the end usually works better than hiding them completely.
Grid interface settings
Section titled “Grid interface settings”These settings control the default desktop and mobile grid layout, plus whether customers can adjust the grid themselves. Learn more in the grid interface settings.
Choose the default column count based on how much visual space each product needs. Larger cards are better for image-led products, while denser grids help large catalogs feel faster to browse.
Enabling the grid size interface gives shoppers more control over how they browse. Sticky interface keeps these controls visible as customers scroll, which is especially useful on long collection pages. For a broader overview of section behavior in the editor, see Shopify documentation on customizing sections
Filter settings
Section titled “Filter settings”These settings add filtering and sorting controls to help customers narrow and reorder results. Filters need additional setup before they become useful, and the theme’s filter setup guide is available.
Enable filters when a collection is broad enough that customers benefit from narrowing by shared attributes. For smaller or tightly curated collections, filters can add more interface than value.
The availability filter works best when stock status matters to how customers shop. Sorting is a strong default for most collections, but keeping filters open by default is most helpful when refinement is likely to be used right away.
Color settings
Section titled “Color settings”These section-specific color overrides apply to the section’s own header content, such as the icon, text, and subheading. Use them when this collection page needs a distinct look without changing your broader theme colors.
Keep overrides intentional and easy to read. If you also use a custom section background, check contrast carefully so heading content stays clear.
Supported block types
Section titled “Supported block types”- Collection banner
Collection banner
Section titled “Collection banner”Use Collection banner blocks to place promotional content directly inside the product grid. Learn more about the Collection banner block.
This block works well for launches, seasonal campaigns, curated edits, or collection-specific messaging. You can add up to two banners, but only one banner of each size will display.
Banner visibility depends on collection size. A large banner needs at least 6 products, and a small banner needs at least 11 products.
If the collection is too small for the selected banner size, the banner will not appear.
Use background image or video carefully so the promotional message remains readable. Separate mobile media is helpful when desktop crops do not translate well to smaller screens.
Foreground content can include text, buttons, icons, and supporting media such as a logo or promotional image. If you choose a full-block link style, links inside the subheading text will be removed.
The block also includes its own visibility control, which is useful when you want a banner to appear only on desktop or only on mobile.
Standard section settings
Section titled “Standard section settings”Header settings
Section titled “Header settings”Use the shared Header settings reference. In this section, the header introduces the collection with optional icon, caption, heading, supporting text, and button content.
This is a good place to add context when the collection title alone is too brief. A button works best as a secondary action, such as linking to a related collection or a helpful buying guide.
Card settings
Section titled “Card settings”Use the shared Card settings reference. These settings override the default product-card presentation for this section, including style, image ratio, text density, CTA style, alignment, and variant display.
Use these overrides to match the collection’s shopping behavior. Visual categories often benefit from stronger imagery and less text, while technical or comparison-heavy categories usually need clearer titles, excerpts, and variant cues.
Some settings matter more with certain card styles. For example, middle vertical alignment only fully applies to the banner-style card layout, and variant selectors work best when product option data is already consistent.
Padding settings
Section titled “Padding settings”Use the shared Padding settings reference. These controls adjust the space above and below the collection section.
Tighter spacing helps product-heavy pages feel efficient. More generous spacing works well when the section header or background treatment is part of the visual story.
Section background settings
Section titled “Section background settings”Use the shared Section background settings reference. These settings let you add a color, gradient, image, or video behind the section.
Background treatments can make a collection feel more editorial or campaign-driven, especially when paired with custom header or card colors. Because they can change the visual weight of the page, preview them across screen sizes before publishing.
Separator settings
Section titled “Separator settings”Use the shared Separator settings reference. Top and bottom separators help define the section when it sits between similar content areas.
A subtle separator is usually enough. Use stronger line styles only when the page needs clearer visual boundaries.
Width settings
Section titled “Width settings”Use the shared Width settings reference. These settings control the maximum content width and the outer width of the section.
Wider layouts can show more products per row and reduce scrolling. Narrower layouts can feel more curated and make header content easier to read, especially when backgrounds or promotional treatments are important.
The editor may not fully reflect width changes, so preview the actual page before finalizing full-width or full-bleed layouts.
Usage notes
Section titled “Usage notes”- Match grid density to the products. Use fewer columns for image-led products and denser grids for large catalogs where quick scanning matters.
- Turn on filters only when they help. Filtering adds the most value on broad collections with meaningful shared attributes.
- Use card overrides strategically. Adjust image ratio, text, and CTA style to support how customers compare products in this collection.
- Check banner requirements before publishing. Make sure the collection has enough products for the selected banner size so promotional blocks actually appear.
- Review desktop and mobile separately. Grid density, media crops, and banner visibility can differ by viewport, so confirm both layouts before publishing.
- Keep colors and backgrounds readable. Default-style values preserve the base look, while stronger overrides make the section more self-contained and should always be checked for contrast.
- Preview the live layout. Width changes, sticky controls, and background media often feel different on the actual page than they do in the editor.