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

Collection pages

The Collection pages section includes settings to change the look and feel of product collection pages.

Collection page
Collection page

Set up the Collection banner

  1. In your theme editor (Customize), select the Collections 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 on the Collection banner section.

  3. Choose whether to Show collection image.

    Collection page with collection image
    Collection page with collection image
  4. Select the Collection 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.

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

  5. Choose whether to Show collection description.

    Adding a description to a collection is a Shopify feature. See their article Change the name or description for a collection.

  6. Adjust the Max width of text of your Collection description using the slider.

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

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

Customize the Product grid

The Product grid organizes your Collection's products in a grid. You can adjust the Columns per row, Products per page, the style of Pagination, and set the Image aspect ratio (or shape) of all your product images.

  1. In your theme editor (Customize), select the Collections 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 on the Product grid section.

    Product grid section settings
    Product grid section settings
  3. Pick how many Columns per row and Products per page should be displayed.

  4. Choose the Pagination style of how customers navigate additional pages of products.

    Paginated displays arrow buttons to navigate previous or next pages.

    Click to Load displays a button to load more products below.

    Infinite automatically loads more products as customers scroll down.

  5. Choose the Image aspect ratio for products on your collection pages.

    Choose to display your product images as Square, Landscape, or Portrait. The default Natural setting will display the original orientation of your images.

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

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

Set up Filtering and Sorting

Let customers discover products quickly by filtering your products by availability, price, type, vendor, and your variant options. When filters are enabled, Spark also displays a price slider, color swatches, and product chips for easy navigation.

Spark collection filter drawer
Spark collection filter drawer

To select which filter options to enable, go your Online Store > Navigation settings in your Shopify admin. In the Collection and search filters section, you can add, remove, and reorder your filter options.

Product filter option in theme editor
Product filter option in theme editor

Spark displays filters on your collection templates by default. To hide filters, go to your Collection template, click Product grid, and toggle off the Show filters option.

Filter drawer shown in theme editor
Filter drawer shown in theme editor

Customers can also use Shopify's sort function to list products by name, price, date, and more. See Shopify's manual for their guide on collection filters.

Show variant swatches and chips

If you have enabled Swatches or Chips for your Products, you can choose to display them when customers hover over products in your collections. This option applies globally to all product cards across your site.

Swatches revealed on product card
Swatches revealed on product card

To enable swatches and chips on hover:

  1. In your theme editor (Customize), go to Theme Settings at the bottom of your navigation panel.

    Theme settings tab in navigation panel
    Theme settings tab in navigation panel
  2. Click the Products tab.

  3. Check the Show swatches and chips option to reveal product options on hover.

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

Add Feature sections

As with all templates on Spark, you can add feature sections. To learn more about Sections and Templates, see Shopify's OS2 Theme Editor manual.

See our feature sections articles to learn more:

Collection page settings

Configuration Settings

Show collection image

Check this checkbox to display the collection image as a header next to the collection title.

You need to add an image to your collection from the Shopify dashboard before an image will be displayed.

Collection image aspect ratio

Choose to display your featured collection image as Square, Landscape, or Portrait.

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

Show collection description

Check this checkbox to show the collection description.

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.

Show sort options

Choose whether the sort options should be displayed.

Learn how to change the order of the sort options in Shopify's Collections layout article.

Columns per row

Choose how many products should be displayed per row. Either 2, 3, or 4.

Products per page

Choose how many products should be displayed per page. Choose anywhere between 12 and 36.

Pagination

Choose the Pagination style of how customers navigate additional pages of products, either Paginated, Click to Load, or Infinite.

Show Swatches and Chips

Show your product's swatches and/or chips when a user hovers over the product image.

For more information on how to set these up, see our Swatches and Chips documentation.

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.

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.