Vino provides four collection page templates to help you organize and showcase your products: Default, Collection landing, No promos, and No sidebar.
The Collection landing template comes preloaded with multiple Featured collection sections, making it ideal for showcasing sub-categories. The No promos template removes the Promotion grid section, while the No sidebar template turns off the collection filters sidebar. These templates provide layout variations that can be helpful depending on your preferred design.
Customize the collection page template
Use the page selector to open Collections, then choose Default collection or another collection template.
Click the Collection header or Product grid section in the left sidebar to customize general settings of the collection page.
Collection header
The Collection header includes both the title and the description of the collection. Disabling Enable header hides this section from the page.
Choose a Color scheme to customize the section’s background and text colors. You can modify your color schemes in Theme settings > Colors.
When enabled, the Collection image is shown as the header’s background. It uses the featured image assigned to the collection in the admin.
Featured collection image - Shopify Help Center
Show collection description toggles the collection description on or off in the header.
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.
Product grid
The Product grid section contains the subcollections, products and collection filters.
Enable filter determines if collection filters are visible. They are placed in the left sidebar on desktop, and shown as a dropdown at the top of the product grid on mobile.
Filters are customized via Shopify's Search & Discovery app.
Follow Shopify's guide for setting up Faceted Filtering
Turn on Enable color swatches to show visual swatches for the color filter. For more details about color swatches, see this guide.
Enabling the Show sort options setting displays the product sort dropdown. On desktop, it appears at the top right of the product grid, while on mobile it is included inside the filter dropdown.
Choose a Color scheme to customize the section’s background and text colors. You can modify your color schemes in Theme settings > Colors.
Product grid blocks
Click the toggle beside Product grid to display the blocks. There are two block options to use: Subcollections and Products.
Subcollections
Vino will automatically show subcollections when the navigation link for the current page contains additional collections beneath it. For more details about subcollections, see this guide.
Products
The product grid offers two layouts:
- Small grid shows 3 products per row on desktop and 2 on mobile.
- Large grid shows 2 products per row on desktop and 1 on mobile.
A maximum of 40 products are shown on each page before pagination appears.