Featured collection grid

The Featured collection grid section displays a grid of products from one of your collections. With Quick View enabled, customers can buy your products without leaving the page.

See the Featured collection slider to display your products as a single-row carousel.

Set up section

In the editor side panel, click (+) Add section and select Featured collection grid. Click and hold the drag handles ⋮⋮ to re-order sections.

Editing a template changes all pages that use that template. To edit specific pages, you can create new templates or insert dynamic content with metafields

Select featured collection

Select a Collection to display its products in a grid with adjustable rows and columns.

STEPS

In your theme editor (Customize):

  1. Click on the Collection block nested under the section.

  2. Use the Select collection button find the collection you want to feature.

    We recommend collections with at least 4 products.

  3. Click Save.

Change product list layout

Change the number of columns and rows, the shape of your product images, and set how many products to display from your collection.

STEPS

In your theme editor (Customize):

  1. Click on the Featured collection grid and scroll down to the Product list settings.

  2. Use the slider to set the Maximum number of products to display from your collection. Between 3 and 15.

    The products will display in the sort order as set in your Shopify admin settings. Learn more about admin settings for your collection pages layout ↗.

  3. Select the Number of columns to display for both desktop and mobile.

    The size of the product images will change according to the number of columns.

  4. Click on the Theme settings tab to select an Image aspect ratio. This setting applies to all sections that display products.

    Crop all images to Square, Landscape, or Portrait. The default Natural setting will display the original orientation of each image.

  5. Click Save.

Click Featured collection grid section to find settings

Setting
Description

Maximum number of products

Set the maximum number of products to display within in the section: between 3 and 15.

Number of columns on desktop

Choose how many products to show per row on desktop screens: either 3, 4, or 5 columns.

Number of columns on mobile

Choose how many collections to show per row on mobile screens: either 1 or 2 columns.

Section header

The Section header appears above the section. Add a Heading, Subheading, and optional Button.

STEPS: Add headings and text

In your theme editor (Customize):

  1. Click the Featured collection grid section to open the settings.

  2. Enter Heading text to display as a title at the top of the banner.

    we recommend one to three words.

    Delete the text in this field to remove the heading.

  3. Enter Subheading text to display beneath the heading.

    We recommend two to three short sentences.

    Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's Rich text editor guide ↗.

  4. (Optional.) Enter additional Text beneath the countdown clock to provide more information to your customers.

  5. Click Save.

STEPS: Add button

In your theme editor (Customize):

  1. Click the Featured collection grid section to open the settings.

  2. Select or paste a URL for the Button link.

  3. Enter text for the Button label.

    The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, read "What is a Call to Action?"

  4. Click Save.

Click Featured collection grid section to find settings

Setting
Description

Heading

Enter text to display a section title above the collection list.

Heading tag

Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. This option doesn't change the heading's appearance.

Subheading

Enter text to display a section subheading below the heading.

Button link

Select or paste a URL for the button.

Button label

Enter text to display a button label. Leave this field blank to remove the button.

Section style

Adjust the overall section style by changing the Padding around the section content, and add an optional Top divider to clearly separate sections.

STEPS

In your theme editor (Customize):

  1. Click on the Featured collection grid section to open the settings.

  2. Choose to Enable animation to show visual effects when scrolling, hovering, or interacting with the section.

    Learn more about Section animations in Stiletto.

  3. Choose to display a Top divider that separates sections with a Solid line.

    The Top divider uses the color of Lines and borders set in the Theme settings.

  4. Select a Padding option to change the spacing between sections. Choose between Top and bottom, Top only, Bottom only, or set it to None.

  5. Set the Content width to display the section at Full width or use the slider to set a custom width between 400 - 1000 pixels.

  6. Click Save.

Click Featured collection grid section to find settings

Setting
Description

Enable animation

Choose whether to display visual effects when scrolling, hovering, or interacting with the section. See the Animation guide to learn more.

Top divider

Show a solid border above the section to visually separate it from other sections. The Top divider uses the Lines and borders color selected in the theme color settings.

Padding

Add a margin of space around the section to either the Top and bottom, Top only, Bottom only, or set it to None.

Related links

Featured collection slider Product listing settings Collection pages Shopify collections guide ↗

Last updated