← Volume theme

Getting Started

Theme Setup

Theme Settings

Navigation

Products

Collections

Icons

Sections

Collection page

In the Volume theme, the Collection banner is a standalone section, separate from the product grid. This separation allows for greater flexibility when customizing the appearance of your collection pages.

You can combine the Collection banner with the Product grid in several ways, depending on your layout preferences and content strategy. Here are a few example configurations:

Collection banner + Product grid

Collection banner vertical + Product grid

Collection banner with subcollections + Product grid

Subcollection banners + Product grid

Product grid only

Related or subcollections

Adding related or subcollections to large collections helps users narrow down their search and discover more relevant products faster. This approach improves product discovery and overall user experience, especially when a parent collection contains a wide variety of items. Instead of forcing users to scroll through dozens of products, you can guide them toward more specific categories that match their intent.

Subcollections are displayed as a horizontal slider and can be added in two ways:

• As part of the Collection banner section
• As a standalone Subcollection banners section (if you prefer not to display a collection image)

To make this setup dynamic—so that each collection displays its own relevant subcollections—you’ll need to create and connect a metafield.

Step 1: Create a metafield for collections

1. Go to Settings → Custom data → Collections

2. Click Add definition and fill in the fields:

   

   • Name: Subcollections
   • Namespace and key: custom.subcollections
   • Type: Collection
   • Enable List of collections

3. Click Save

Step 2: Bulk assign subcollections

1. Go to Products → Collections
2. Select all collections and click Bulk edit
3. Open Columns, add Metafields → Subcollections, and hide any unnecessary fields
4. Assign subcollections to each collection as needed

Step 3: Connect dynamic sources

1. Open the Collection banner or Subcollection banners section in the theme editor
2. Click the dynamic source icon next to the Collections field
3. Choose Template → Collection → Subcollections
4. Save your changes

Product grid

This section controls how products are displayed on collection pages. You can set the number of products shown before pagination, choose a pagination style, enable filtering and sorting, and configure product card appearance. Learn more about product card settings

Grid columns switcher

This feature allows you to define up to three different grid layouts and let customers toggle between them. The selected layout is saved to local storage and remains active while the customer browses within collection templates.

<aside> ⚠️

On mobile devices, only the default and preview grids are used. The secondary grid is disabled for mobile to maintain a consistent user experience.

</aside>

To configure the grid switcher:

1. Set a default grid layout

   

2. Enable the secondary grid for a wider product view

   

3. Enable the preview grid, which displays product images only

   

Filtering

Choose from three filter layout styles:

• Drawer
• Vertical
• Horizontal

For Drawer and Vertical styles, you can define which tabs are expanded by default. Use the Tabs always open field and enter tab names separated by commas.

Filter configuration

The Volume theme fully supports native Shopify filters, including color swatches configured via category metafields—no coding required. When properly set up, these swatches appear consistently across product pages, collection filters, and product cards.

You can also configure the display of color swatches created using Metaobjects, ensuring consistency in visual filtering.

Learn how to set up category metafields for color filters

Learn how to use metaobjects for advanced filtering