Motion provides two collection page templates to help you organize and showcase your products: Default and Collection landing.
The Collection landing template comes preloaded with multiple Featured collection sections, making it ideal for showcasing sub-categories.
Customize the collection page template
Use the page selector to open Collections, then choose Default collection or another collection template.
Collection page
Click the Collection page section in the left sidebar to customize general settings of the collection page.
When enabled, the Collection image is shown as the header’s background. It uses the featured image assigned to the collection in the admin. When Overlay header over collection is enabled in the Header section, the header is displayed over the collection image.
Featured collection image - Shopify Help Center
The Parallax image feature applies a parallax effect to the header image as the page scrolls. The image will appear zoomed, which is necessary to fill the background and allow the parallax effect to function properly.
You can choose whether the parallax moves horizontally or vertically. The image above is an example of a parallax effect moving horizontally.
When Enable filter is turned on, a filter button appears below the header. Clicking it opens the left-side sidebar where the collection filters are displayed.
Filters are customized via Shopify's Search & Discovery app.
Follow Shopify's guide for setting up Faceted Filtering
Enable Collapse filters to have the filter tabs closed by default.
Turn on Enable color swatches to show visual swatches for the color filter. For more details about color swatches, see this guide. You can also display Swatch labels by clicking on its on/off toggle.
Enabling the Show sort options setting displays the product sort dropdown at the top right of the product grid.
Collection page blocks
Click the toggle on the left of the Collection page section to display its blocks. There are two block options available: Collection description and Products.
Click and drag the blocks to change their order and reposition them within the collection page.
Collection description
This block displays the collection description added in the Shopify admin.
Products
When the Subnavigation style is set to Inline, related collection links appear on the left side of the product grid. These links are pulled from child items in your navigation menu and are shown when one of those child collections is being viewed.
For example, in our demo store, when any collection under Homewares is opened, the related collections are displayed in the sidebar.
Choose the amount of products to be displayed per row within the Products per row slider (1-5).
Flush grid on mobile, when active, reduces the spacing between each product grid. When disabled, you will see a noticeable spacing between each grid in contrast.
Each page displays a maximum of five product rows before pagination appears.