Introducing Stiletto - the essential Shopify theme to fuel your ecommerce growth. Learn more.

Collections template

The Collections template controls the content, layout, and style of your collection pages. Use the theme editor to preview, edit, and create new collection templates with Stiletto's available sections and theme settings.

Collection page on Vogue demo
Collection page on Vogue demo
NOTE

In addition to the default collection template, Stiletto comes with 4 alternate collection templates designed for specific uses. See the templates for Collection Landing Pages, Sale Collections, Flash Sale Collections, Subcollections.

Using collection templates

At first, the Default template applies to every collections page. This means that changes made to a default template will apply to all collections that use that template.

To change the content or style of specific collections, you will need to create a new template and then assign that template to those pages in the Shopify Admin.

Alternatively, you can use Dynamic sources to automatically display content or settings of specific collections that use the same template.

Here are the basic steps to using templates:

Open collections template

Use the Templates selector in the theme editor to find the Collections templates. Select the Default collection template or one of the Alternate collection templates

Templates selector in the theme editor
Templates selector in the theme editor

Preview collection pages

When you open a template, the theme editor shows one of your collection pages to preview that template and any changes made.

To preview a different collection page with that template, click Change in the "PREVIEW" section at the top of the sidebar.

Select a page to preview for the template
Select a page to preview for the template

Customize sections and blocks

Sections are reusable, customizable components that make up your pages. Sections are listed in the editor sidebar in the order they appear on the page.

Use the theme editor to add, customize, and rearrange sections to create the look and functionality of your collection pages.

Any changes made to sections will apply to every page that uses the same template. To make changes to specific pages, you can create and assign multiple templates.

Learn more about using sections and blocks in our introductory article to using the theme editor.

Assign templates to collections

NOTE

Templates cannot be assigned on unpublished or trial themes. All changes to templates will be saved and can be assigned when after you purchase and publish the theme.

Templates are assigned to collections in the Shopify Admin. All new collections use the Default collection. A warning symbol (!) will appear under PREVIEW next to the collection name if it does not have the current template assigned to it.

Go to the collection in the Shopify admin and use the Theme template menu to assign a different template.

Warning symbol for unassigned template
Warning symbol for unassigned template

Create new templates

To change the content or style of specific pages, you need to create a new template and then assign that template to those pages in the Shopify Admin.

Alternatively, you can use Dynamic sources to automatically display content or settings of specific collections that use the same template.

Steps

In your theme editor (Customize):

  1. Click on Collections in the Template selector.

  2. Click Create template.

    Create template button for collections
    Create template button for collections
  3. Enter a Name for your new template and click Create template.

    The new template will duplicate the settings of the original template.

    Create template settings
    Create template settings
  4. To assign a template, go to the collection in the Shopify admin and use the Theme template menu to select a specific template.

    Templates cannot be assigned on unpublished or trial themes. All changes to your templates will be saved and can be assigned when purchased and published.

  5. Click Save.

Alternate collection templates

Stiletto includes 4 alternate collection templates with preset styles and selected sections. These templates are designed with Stiletto's available features for specific uses.

Use these templates to promote sales, showcase collections with subcollections, and let customers explore and shop all or selected collections and their products on a single page.

Remember to Assign templates to your pages to make them live.

Collection landing page

Let customers explore and shop all or selected collections and their products on a single page. It's a great way to give a high-level overview of your collections or feature multiple collections that pair well together.

Preset sections include: Image hero, Multi-column, Rich text, Image with text, and Product grid. For an example of this template, see the Summer Set Collection on the Stiletto demo store.

Collection landing page on Vogue demo
Collection landing page on Vogue demo

Sale collection

Promote collections and products that are on sale. Preset sections include: Sales banner, Collection list grid, Image with text, Multi-column, Grid, and Product grid. For an example of this template, see the All Sale Collection on the Stiletto demo store.

Sale collection template on Vogue demo
Sale collection template on Vogue demo

Flash sale collection

Promote collections and products that are on sale for a limited time. Display a countdown clock for a flash sale and showcase products that customers can add directly to their cart using quick view.

Preset sections include: Countdown banner, Countdown bar, Collection list grid, Image with text, Multi-column, Grid, and Product grid.

Subcollections

Showcase and let customers shop subcollections on a single collection page.

Preset sections include: Image hero, Multi-column, Featured collection grid, and Image with text.

Collection banner

Note: Any changes made to sections will apply to every page that uses the same template. Create and assign multiple templates to edit specific pages.

By default, the Collection banner displays the collection title and description added in your Shopify Admin. In the theme editor, enable and customize the collection image, and heading styles.

Collection banner
Collection banner

Steps

In your theme editor (Customize):

  1. Click on the Collection banner section to open the settings.

  2. To hide the Collection description, uncheck the Show collection description option.

    Go to you Shopify admin and open your collection under Products to edit the description.

  3. Check the Show collection image to display the collection image.

    Go to you Shopify admin and open your collection under Products to edit the description.

  4. (Optional.) Use the Select image button to replace all collection images with one image for all collection pages.

    To show different images on different collections, you can create multiple templates or use dynamic sources.

  5. (Optional.) Select a Custom height for the Banner a Custom or their Original height (without cropping).

    Adjust the Height sliders between 50% to 100% of the maximum height of the screen or browser.

  6. Select the Image focal point to choose what part of the collection image should remain centered when cropped.

  7. Select a Text position to position the collection title and description in one of six possible areas within the banner.

  8. Change the Text color to match your headings to your brand and make sure the text is readable.

    We recommend using WebAIM's contrast checker when matching colors to make sure your text is clear and readable for everyone.

  9. (Optional.) Change the Overlay color and Overlay opacity using the slider to increase the contrast between the text and collection image.

    These settings help make your text clear and readable.

    Set the Opacity to 100% to create a solid color slide. This helps avoid images that include text in the image itself, which are not responsive or recommended.

  10. (Optional) Click the Overlay gradient option to add a color overlay that fades across a range of hues.

    You can choose the style, angle, position, and opacity of the gradient. See Shopify's color gradient guide to learn more.

  11. (Optional.) Change the Overlay opacity and Overlay color.

    Set the opacity to 0% to turn off the overlay color; set it to 100% to create a solid color block with no image.

    To apply different overlay colors on different collections, you can use dynamic sources.

  12. Click Save.

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, Stiletto also displays a price slider, color swatches, and product chips for easy navigation.

Collection filters with swatches
Collection filters with swatches

Steps

In your theme editor (Customize):

  1. Open a Collections template to edit from the dropdown menu in the top bar.

  2. Click on the Product grid section to open the settings.

  3. Choose whether to Enable sorting to let customers sort products by Price, Date, Best Selling, Featured, or Alphabetically.

    Sorting is a Shopify feature. Learn how to change the default sort order.

  4. Choose whether to Enable filters to callow customers to filter by product options, product type, price, availability, and more.

    To select which filter options to enable, go to 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.

    See Shopify's manual for their guide on collection filters.

  5. Change the filter bar style and layout with the folowing options.

    Sticky filter and sort bar: keep the filter bar fixed in view as customers scroll through the collection.

    Collapse filter bar on desktop or Mobile for a compact layout with a collapsible "Filter" menu.

  6. If you have product swatches enabled, check the Show swatch filters box to display those variant options as swatches.

  7. If you have product chips, check the Show chip filters box to display those variant options as chips.

    Select a Chip layout. Either 2 Column, 3 Column, or Natural.

    Natural matches the width of the chip to the length of the variant name.

  8. Click Save.

Product grid

Note: Any changes made to sections will apply to every page that uses the same template. Create and assign multiple templates to edit specific pages.

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.

Steps

  1. Click on the Product grid section to open the settings.

  2. Choose whether to Show swatches.

    If you have product swatches set up, they appear when customers hover over a product card.

    Product hover with swatches
    Product hover with swatches
  3. Select the Number of columns and Rows of products on desktop.

    Choose between 3 to 4 columns and 3 to 10 rows of products.

    Product image sizes will change according to the number of columns.

  4. Select the Pagination style to change how customers navigate additional rows of products.

    Infinite: rows of products automatically load as customers scroll down the collection page.

    Click to load: customers click a "Load more" button to reveal more products on the collection page.

    Paginated: customers navigate between numbered pages of products in the collection.

  5. Select how many Mobile products per row to display using the slider.

    Choose between 1 and 3 products per row.

  6. To make your product images a uniform shape and size, click the Theme settings tab. 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.

    Example of aspect ratio shapes: Square, Landscape, and Portrait
    Example of aspect ratio shapes: Square, Landscape, and Portrait
  7. Click Save.

Product hover

By default, collections display secondary images and swatches when customers hover over a product.

To disable these options, click the Theme settings tab and uncheck the Show second image or Show swatches options.

Product hover card
Product hover card

Product badges

Display sale and custom badges on products in your collection. Product badges are enabled and customized as a global setting for the entire theme.

Product badges for "New" and "Sale"
Product badges for "New" and "Sale"

Click on the Product header block to enable the Show sale badge and Show custom badges options.

Sale badges

The Sale badge shows when a Compare at price is added in the Shopify admin. The Sold out badges show when a product's inventory is zero. Learn about Setting sale prices on Shopify.

Steps

In your theme editor (Customize):

  1. Click Theme settings and open the Product badges tab.

    Sale badge settings
    Sale badge settings
  2. Use the color selectors to change the Sale badge and Sold-out badge colors.

  3. Select a Sale badge format with options for showing discounts by percentage or currency amount.

  4. Click Save

Custom badges

Add up to 4 custom badges to display on products that have the badge tag added in the Shopify admin. For example, add a badge for "New arrivals" or "Limited editions".

Steps

In your theme editor (Customize):

  1. Click Theme settings and open the Product badges tab.

    Custom badge settings
    Custom badge settings
  2. Use the color selector to change the Badge color.

  3. Enter text for the Badge tag to be used as a label and the product tag.

  4. In your Shopify admin, go to your products and enter the same Badge tag text in the Tags field under Product organization.

    Learn more about creating and using tags on Shopify.

  5. Click Save.

Quick view

The Quick view button displays when products are hovered over and lets customers see more information and add that product directly to their cart from the collection page.

To customize the Quick view popup, go to the Product templates and select the "quick-view" template.

Quick View on Desktop and Mobile
Quick View on Desktop and Mobile

Dynamic sections

Note: Any changes made to sections will apply to every page that uses the same template. Create and assign multiple templates to edit specific pages.

As with all templates on Stiletto (except Checkout), you can add and rearrange the following 25+ feature sections:

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.