View demo store Support

Collection Page

The Collection Page in the Voltix theme is designed to deliver a smooth and engaging product discovery experience. Customers can easily browse collections through a modern grid layout while accessing powerful filtering, sorting, and quick shopping features.

Built for performance and usability, Voltix enhances collection browsing with promotional banners, seamless product exploration, and interactive product cards. The layout is optimized to encourage longer browsing sessions while helping customers discover more products with minimal effort across desktop and mobile devices.

collection-page.png

Key Features

  • Collection Banner: Display collection images, titles, and descriptions to create visually engaging category pages.
  • Filtering Options: Allow customers to refine products using available filter attributes for faster product discovery.
  • Sorting Controls: Enable sorting by relevance, price, featured items, and Shopify’s built-in sorting options.
  • Quick View: Let customers preview product details directly from collection cards without leaving the collection page.
  • Continuous Scrolling Experience: Create a smoother browsing flow that encourages customers to explore more products with reduced interruptions and navigation friction.
  • Modern Product Grid: Present products in a clean and structured layout for improved visibility and shopping experience.
  • Responsive Design: Fully optimized for desktop, tablet, and mobile devices to ensure a consistent experience across all screen sizes.

Customize Your Collection Page

You can customize the Collection Page through the Shopify Theme Editor.

  • From your Shopify admin, navigate to Online Store → Themes.
  • Click Customize on the Voltix theme.
  • Select Collections → Default Collection from the page selector.
  • Choose the Collection section from the left sidebar.
  • Configure the available settings according to your requirements.
  • Click Save when finished.

Collection Section Settings

  • Breadcrumbs Enable: Enable this option to display breadcrumb navigation on the collection page. Breadcrumbs are automatically hidden on the Index (Home), Cart, and 404 templates.
  • Collection Heading Color Scheme: Select a predefined color scheme to control the appearance of the collection heading area.
  • Collection Grid Color Scheme: Select a predefined color scheme to control the appearance of the collection product grid.
  • Show Collection Title: Enable this option to display the collection title on the collection page.
  • Show Collection Image: Enable this option to display the featured image assigned to the collection.
  • Number of Columns per Row: Set the number of product columns displayed in each row on the collection page.
  • Number of Products per Page: Set the number of products displayed on the collection page before additional products are loaded.
  • Show Products Count: Enable this option to display the total number of products available in the collection.
  • Show Filters: Enable collection filters to help customers narrow down products based on available filtering options.
  • Enable Sorting: Enable product sorting so customers can reorder products using the available Shopify sorting options.
  • Enable Sticky Filters on Desktop: Enable this option to keep the filters visible while customers scroll through the collection page on desktop devices.
  • Image Aspect Ratio: Choose how product images are displayed:
    • Square: Displays product images in a consistent square format.
    • Portrait: Displays taller product images for a vertical presentation.
    • Adapt to Image: Preserves the original proportions of the product images.
  • Enable Quick View and Quick Add: Enable quick shopping actions on product cards, allowing customers to quickly preview product details or add products to the cart.
  • Show Color Swatches: Enable this option to display available product color options as clickable swatches on product cards.
  • Show Secondary Image: Enable this option to display the product's secondary image when customers hover over a product card.
  • Pagination Color Scheme: Select a predefined color scheme for the collection page pagination controls.
  • Pagination Type: Choose how additional products are loaded:
    • Default Pagination: Display standard pagination controls for navigating between product pages.
    • Infinite Scroll: Automatically load additional products as customers continue scrolling.
  • Mobile Columns: Choose the number of product columns displayed on mobile devices:
    • One: Display one product per row.
    • Two: Display two products per row.
  • Show Tile 1: Enable the first promotional tile to display within the collection product grid. The tile is visible in the first row of the grid.
  • Show Tile 2: Enable the second promotional tile to display within the collection product grid. The tile is visible in the third row of the grid.

How to Customize Filters

Filters allow customers to refine products on collection pages, making it easier to find relevant items and improving the overall shopping experience. You can manage filters using Shopify's Search & Discovery app.

  • From your Shopify admin, go to Apps and open Shopify Search & Discovery.
  • If the app is not installed, go to the Shopify App Store, search for Shopify Search & Discovery, and install it.
  • Inside the app, navigate to Filters.
  • Add, remove, or reorder filters to control which options appear on your collection pages.
  • Configure filter types such as product options (e.g., size, color), price, availability, or custom metafields.
  • Click Save to apply your changes.
  • For more details, refer to Shopify's Search & Discovery documentation .