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

Featured collection

The Featured collection section displays a single-row carousel of products from a selected collection.

See the Featured collection row section for a carousel of products with a title card included as the first column.

Featured collection section
Featured collection 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 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

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 Featured collection section.

    This opens the Featured collection 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.

  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 your collection.

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

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

  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. Select an Image aspect ratio to crop your Product images to appear all 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.

  9. (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.

  10. (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
  11. 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.

Image aspect ratio

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

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

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.