View demo store Support

Collection Page

The Collection Page in the Renovate theme is designed to showcase products in a structured and visually appealing grid layout. It helps customers easily browse, filter, and sort products within a specific category, improving product discovery and overall shopping experience. With a clean layout and intuitive controls, the collection page allows users to quickly find relevant products and navigate through your store efficiently.

collection-page.png

Key Features

  • Collection Banner: Displays a featured image and title at the top of the page to represent the selected collection.
  • Breadcrumb Navigation: Helps users understand their location and easily navigate back to previous pages.
  • Product Grid: Shows products in a responsive grid layout with images, titles, prices, and badges.
  • Product Badges: Highlights product statuses such as sale, new, or sold out directly on product cards.
  • Filtering Options: Allows customers to refine products based on categories, attributes, or availability.
  • Sorting Options: Enables sorting by options such as featured, price, or newest items.
  • Product Count: Displays the total number of products available in the collection.
  • Pagination: Allows users to navigate between multiple pages of products using page numbers or navigation controls.
  • Load More: Optionally enables users to load additional products dynamically without leaving the current page.
  • Quick Actions: Provides options like quick add or wishlist directly from product cards (if enabled).

How to Create a Collection

The Collection Page in the Renovate theme consists of two main elements: the set of products and the collection page template. You can customize the template to create unique layouts for different collections, making browsing more engaging and organized.

To create product collections:

  • From your Shopify admin, go to Products → Collections → Create collection.
  • Collections help customers easily find products by category, type, or other attributes.
  • For more detailed guidance, refer to Shopify's Collections documentation.
Types of Collections

You can create two types of collections in the Renovate theme:

  • Automated Collection: Products are added automatically based on defined conditions. When you add a product to your store that meets the collection's criteria, it's automatically included in the collection.
  • Manual Collection: Products are added individually by hand. This allows you to curate the collection with specific items of your choice.

Customize Your Collection Page

On the Collection Page, you can configure how your products are displayed, helping customers easily browse and discover items. Make sure the collection is published on your online store before adjusting these settings.

  • From your Shopify admin, go to Online Store → Themes.
  • Click Customize on the Renovate theme.
  • In the Theme Editor, use the drop-down page selector and choose Collections → Default collection.
  • Adjust layout, product display, filters, and other collection settings as desired.
  • Click Save to apply your changes.

Collection Page Settings

  • Color Schemes:
    • Collection Heading Color Scheme: Select a color scheme (e.g., Scheme 1) for the collection heading area.
    • Collection Grid Color Scheme: Choose a color scheme (e.g., Scheme 1) for the product grid background.
  • Collection Header:
    • Show Collection Title: Enable to display the collection title.
    • Show Collection Image: Enable to display the collection banner image.
  • Layout Settings:
    • Number of Columns per Row: Set how many products appear per row (e.g., 4).
    • Number of Products per Page: Define how many products are shown per page (e.g., 16).
  • Product Count:
    • Show Products Count: Enable to display the total number of products in the collection.
  • Filters & Sorting:
    • Show Filters: Enable filtering options for customers.
    • Enable Sorting: Allow sorting by options such as featured, price, or newest.
    • Enable Sticky Filters on Desktop: Keeps filters visible while scrolling on desktop.
  • Product Cards:
    • Show Card Background Color: Enable to apply a background color to product cards.
    • Card Background Color: Set the background color (e.g., #F6F2F0).
    • Card Text Color: Set the text/icon color (used for elements like quick add SVG icons).
    • Text Alignment: Choose alignment (Left, Center, Right).
    • Image Aspect Ratio: Set the product image ratio (e.g., Portrait).
    • Enable Quick View: Allow customers to preview products without leaving the page.
  • Pagination:
    • Pagination Color Scheme: Select a color scheme (e.g., Scheme 8) for pagination.
    • Pagination Type:
      • Pagination: Displays page numbers for navigation.
      • Infinite Scroll: Automatically loads more products as users scroll.
  • Mobile Layout:
    • Number of Columns: Choose how many products appear per row on mobile (e.g., One or Two).

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 .