Featured collection row

Theme section

Use the Featured collection row section to display single-row carousel of products from a selected collection, with a title card as the first column.

See the Featured collection section for a an alternate layout with the section heading above the product cards.

Set up section

Add this section to your template and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.

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.

STEPS

In your theme editor (Customize):

  1. Select a Template to edit from the dropdown menu in the top bar.

    Learn how to use templates in our Templates guide.

  2. Under Template, click (+) Add section and select Featured collection row.

  3. Click and hold the drag-and-drop handles ⋮⋮ to re-order your sections.

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

STEPS

In your theme editor (Customize):

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

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

    We recommend collections with at least 4 products.

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

    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 ↗.

  4. Select the Number of columns to display on desktop screens.

    On mobile devices, one column is displayed.

  5. To make your images a uniform shape and size, select the Image aspect ratio to crop your images to Square, Landscape, or Portrait.

    The default Natural setting will display the original orientation of your image.

  6. Click Save.

Section headings and button

Add section headings and an optional button that can link to your collection or another page.

STEPS

In your theme editor (Customize):

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

  2. Enter Heading text to display a section title.

    The default heading is "Featured collection."

  3. Enter Subheading text to display below the heading.

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

  4. Change the Text alignment to display the text of the Heading column as Left or Center aligned.

  5. Enter short text for the Button label to link to the collection page.

    Leave this field blank to remove the button.

    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?"

  6. Click Save.

Section style

Customize the section Style with options for section Spacing, Animation, and Alternate section color.

STEPS

In your theme editor (Customize):

  1. Click on the section to find the Section style settings.

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

    Learn more about Section animations in Spark.

  3. Choose to enable the Alternate section color to apply the secondary section colors selected in your theme settings for colors.

  4. Select a Spacing option to add padding around the section content.

    Add padding to either the Top and bottom, Top only, Bottom only, or set it to None.

  5. Select the Spacing amount for the padded sides of the section: Full, Half, or Minimum.

  6. Click Save.

Settings reference

Click the Featured collection row section to find the following settings.

SettingDescription

Select collection

Select a collection from your store's existing collections. For more information about collections, see Shopify's Collections guide ↗.

Max products

Set the maximum number of products to display within in the section: between 2 and 12. The heading will always appear in the first column.

Heading

Add text to show a main heading.

Subheading

Add text to show a subheading below the main heading.

Text alignment

Choose to align the section headings in the first column to either the Left, Center, or Right.

Button label

Enter call-to-action text for a button that links to the collection page. The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now).

Image aspect ratio

Choose to crop all images to be a single uniform shape. Select Portrait (2:3), Square (1:1), or Landscape (3:2). Select Natural to display images in their original shape (without cropping). Learn more about aspect ratios in our Image settings guide.

Section style

SettingDescription

Enable animation

Choose whether to display visual effects when scrolling, hovering, or interacting with the section. See our Section animations to learn more.

Use alternate section color

Apply the alternate section colors as chosen in your Theme Settings. See Spark's theme color settings to learn how to create a secondary color scheme with alternate section colors.

Spacing

Add padding around the section content: either the Top and bottom, Top only, Bottom only, or set it to None.

Spacing amount

Increase or decrease the amount of space around the section: either Full, Half, or Minimum.


Related links

Featured collection Product listing settings Collection pages Shopify collections guide ↗

Last updated