We've recently relaunched all three of our themes. Watch the launch video here.

Featured collection row

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

See the Featured collection section for a carousel of products with the heading above the section.

Featured collection row section
Featured collection row section

For more information about collections, see Shopify's Collections manual.

The Featured collection row section can be added to any template (except the Checkout). To learn more about Sections and Templates, see Shopify's OS2 Theme Editor manual.

  1. In your theme editor (Customize), select the Template you wish to edit from the dropdown menu in the top bar.

    Drop-down menu of page templates
    Drop-down menu of page templates
  2. Click + Add section and select Featured collection row from the Theme Sections list.

    Add section button
    Add section button
  3. (Optional.) Click and hold the ⋮⋮ drag icon to change the order of your sections:

    Shopify section drag handles
    Shopify section drag handles

Customize the Collection row section

Select a collection, then add headings, set the number of columns, add a button to link to your collection, change the Image aspect ratio (shape or orientation) of the Product images, and enable the Alternate section color.

  1. Click on the Collections row section.

    This opens the Collections row section settings.

  2. Use the Select Collection button to choose from your store's list of collections.

    For more information about collections, see Shopify's Collections guide.

  3. Change the number of Columns to display at one time in a row, between 2 and 4.

    On mobile, the Heading appears above the section and products are displayed one at a time.

    Featured collection row with two columns
    Featured collection row with two columns
  4. Add the Heading text to display the collection name or a tagline.

    The first column will always be the section Heading and button.

  5. (Optional.) Add Subheading text.

    Use the formatting buttons to add bold, italic, and linked text.

  6. Add a Button label to display a button that links to the collection.

  7. (Optional.) Adjust the Max width of text for the headings using the slider.

    Experiment with this setting to find a clean visual shape for your text.

  8. Change the Text alignment to display the text of the Heading column as Left or _Center__ aligned.

  9. Select an Image aspect ratio to crop your Product images to be Square, Landscape, or Portrait.

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

    Learn more about using images in Spark in our Image size recommendations article.

  10. (Optional.) Enable the Alternate section color.

    See Spark's Color settings guide to learn how to create a secondary color scheme with alternate section colors.

  11. (Optional.) To display variant swatches on your product cards when hovered over, select the Theme settings tab and check the Show swatches and chips checkbox.

    Note: this option applies globally to all product cards across your site.

    Show swatches and chips setting
    Show swatches and chips setting
  12. Remember to click Save in the top-right corner.

The following settings are found by clicking directly on the section title:

Configuration Settings

Collection

Select a collection from your store's existing collections.

For more information about collections, see Shopify's Collections guide.

Columns

Choose between 2, 3, or 4 columns to display at one time. The heading will always be the first column.

Heading

Add heading text.

We recommend a title of just a few words.

Subheading

Add subheading text.

Use the formatting buttons to add bold, italic, and linked text.

Max width of text

Use the slider to adjust the maximum width of the subheading. The width will need to be adjusted when you change the number of columns.

Experiment with this setting to find a clean visual shape for your text.

Button label

Add call-to-action text to enable a button that links to your collection.

To learn how to change the style and shape of buttons across your site, see the Style section in our Theme Settings article.

Text Alignment

Choose to display the text of the Heading column as Left or _Center__ aligned.

Image aspect ratio

Choose to crop your product images to appear as all Square, Landscape, or Portrait.

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

Use alternate section color

Apply the alternate section colors as chosen in your Theme Settings.

See Spark's Color settings guide to learn how to create a secondary color scheme with alternate section colors.

Contact

🇨🇦 Fluorescent Design Inc.

Send us a message
  • Toronto OfficeMonday to Friday, 10am to 6pm ET
  • Victoria (B.C.) OfficeMonday to Friday, 10am to 6pm PT
  • Average Response Time~1 Business Day
* Excludes statutory holidays. All offices closed to the public.