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

Collection list

The Collection list section displays a grid of selected collections that customers can click to start shopping.

Collection list section
Collection list section

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

Add a Collection list section

The Collections list 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 Collection list 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 collections to display

You can add up to 16 collections to display as a grid and add a Subheading to describe each collection.

  1. Click + Add Collection and/or click on the Collection block you wish to edit.

    This opens the Collection block settings.

  2. Click Select collection to choose the collection you wish to display.

  3. (Optional.) Add Subheading text include a short description of the collection beneath collection title.

    We recommend adding Subheading text to either all or none of the Collection blocks.

  4. (Optional.) Adjust the Max width of text for the Subheading using the slider.

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

  5. Return to the list of your template sections in the sidebar and repeat this process until you've added all the Collection blocks you need.

  6. (Optional.) Click and hold the ⋮⋮ drag icon to change the order of your Collection blocks:

    Shopify content blocks drag handles
    Shopify content blocks drag handles

    Use the Remove block button in the block settings to remove a Collection block entirely.

  7. Remember to click Save in the top-right corner.

Customize the Collection list section

The Collection list section settings apply to all Collection list blocks. You can add a main Heading and Subheading, set the number of columns per row, change the Image aspect ratio (shape or orientation) of the Collection images, and enable the Alternate section color.

  1. Click on the Collections list section.

    This opens the Collection list section settings.

  2. Choose to display 2, 3, 4, 5, or 6 Columns per row of your selected collections.

    On mobile, Collection blocks are displayed in a single column.

  3. (Optional.) Add Heading text to display as a title above the section.

  4. (Optional.) Add Subheading text to describe the selected collections as a group.

  5. Adjust the Max width of text of the section Subheading using the slider.

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

  6. Select the Image aspect ratio to display your images as 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.

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

  8. Remember to click Save in the top-right corner.

Collection list block settings

The following settings are found by clicking directly on a Collection block:

Configuration Settings

Collection

Select a collection to display.

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

Subheading

Add subheading text to include a collection description.

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.

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

Collection list section settings

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

Configuration Settings

Columns per row

Choose to display 2, 3, 4, 5, or 6 collection per row.

On mobile, Collection blocks are displayed in a single column.

Heading

Add heading text.

We recommended a short title of just a few words.

Subheading

Add subheading text to describe the feature.

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

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

Image aspect ratio

Choose to display your collection image as 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.