View demo store Support

Collection Page

The Collection Page allows customers to browse products belonging to a specific collection in a clean and organized layout. It includes collection information, filtering and sorting options, promotional banners, and customizable product grids to help customers quickly find products.

Voltix provides flexible collection page settings that allow you to control the appearance and functionality of your collections without editing code.

collection-page.png

Key Features

  • Collection Banner: Showcase a collection image, title, and description at the top of the page.
  • Product Grid Layout: Display products in a responsive grid that adapts across devices.
  • Filtering Options: Help customers narrow down products based on available filter attributes.
  • Sorting Controls: Allow customers to sort products by relevance, price, date, and other Shopify sorting options.
  • Promotion Banners: Highlight sales, campaigns, or featured offers directly on collection pages.
  • Responsive Design: Optimized layout for desktop, tablet, and mobile devices.
  • Customizable Spacing & Styling: Adjust spacing, colors, and display options directly from the Theme Editor.

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

  • Select Color : Choose the color scheme used for the collection section. This setting helps maintain visual consistency with your store branding.
  • Show Heading Block: Enables or disables the entire collection heading area, including the collection title, description, and collection image.
  • Show Collection Title: Displays the name of the current collection at the top of the page. Disable this option if you prefer a cleaner banner design.
  • Show Description: Displays the collection description entered in Shopify Admin. This is useful for providing additional information about the collection.
  • Show Collection Image: Displays the collection image assigned in Shopify. Collection images help visually represent product categories and improve customer engagement.
  • Image Height: Controls the height of the collection banner image. Larger heights create a stronger visual impact, while smaller heights keep more products visible above the fold.
  • Number of Products Per Page: Determines how many products are displayed before pagination is applied. Increasing this value allows customers to view more products at once.
  • Number of Products Per Column: Controls the number of product cards displayed in each row. Adjust this setting to create wider or more compact product grids.
  • Promotion Banner Settings: Display promotional banners within the collection page. Separate banner images can be uploaded for desktop and mobile devices to ensure the best appearance across screen sizes.
  • Enable Sorting: Adds a sorting dropdown that allows customers to reorder products using Shopify's available sorting options such as Featured, Best Selling, Price, and Newest.
  • Enable Sticky Filter and Sorting Bar: Keeps filter and sorting controls visible while scrolling, making it easier for customers to refine product results without returning to the top of the page.
  • Filter Tabs Open By Default: Automatically expands filter groups when customers open the filter panel, providing immediate access to available filter options.
  • Filter Color: Select the color scheme used for filter elements to match your store's overall design.
  • Swatch Shape: Choose the display style for color swatches used in filters. Available options include Circle and Square styles.
  • Enable Vendor Title: Displays the product vendor name on collection product cards, helping customers identify brands more easily.
  • Section Spacing: Adjust desktop and mobile top and bottom padding to control the spacing around the collection section and improve page layout consistency.

How to Customize Filters

Collection filters are managed using Shopify Search & Discovery, allowing customers to quickly find relevant products.

  • Go to Apps in your Shopify admin.
  • Open Shopify Search & Discovery.
  • Navigate to the Filters section.
  • Add, remove, or reorder filters as needed.
  • Configure filters such as Price, Availability, Product Type, Vendor, Color, Size, and Custom Metafields.
  • Click Save to apply your changes.