Hampton Bay Theme Docs – Your Path to E-Commerce!
Help CenterCompliance & LegalContact Us
  • Hampton Bay Theme Configuration
  • Overview
    • Our key features
    • Setting up the Hampton BayTheme
  • Theme
    • Header and Footer setup
      • Header
      • Announcement bar
      • Footer
    • Languages & Currencies
    • Theme customization options
      • Color Scheme
      • Typography
      • Inputs
      • Social media
      • Cart Drawer
      • Brand Information
      • Search Drawer
    • Sections
      • Banner Slider
      • Collage
      • Collapsible Content
      • Collections List
      • Collections Tab
      • Contact Form
      • Featured Collection
      • Featured Product
      • RichText
      • Multirow
      • Video Section
      • Featured Blog
      • Custom Liquid
      • Page Section
      • Image with Text
      • Multicolumn
      • Shop the Look Section
    • Cart
    • Pages
      • Collection
      • Product
      • About Us
      • Contact Us
Powered by GitBook
On this page
  • Features
  • How to Customize the Collections Page
  1. Theme
  2. Pages

Collection

The Collections Page is a key feature of your theme, designed to display your products in an organized and customizable layout. It offers several settings and options to enhance the user experience, making it easy for customers to browse, filter, and find products effortlessly. Below is a detailed overview of the features and customization options available for the Collections Page in your theme.

Features

  1. Color Scheme

    • Customize the color scheme of the collections page to match your brand’s aesthetic. This option allows you to set background colors, text colors, and accents for headers, buttons, and more, ensuring a cohesive look and feel.

  2. Enable Container and Filtering

    • Enable Container

      • This setting allows you to control the layout width of the collections page. You can choose to display the content in a full-width layout or constrain it within a container for a more structured and centered appearance.

    • Enable Filtering

      • Filtering options can be turned on to allow customers to refine their product search based on attributes like size, color, price, or tags. This makes navigation faster and more efficient.

  3. Card Ratio

    • Adjust the aspect ratio of product cards displayed on the collections page. Options may include square, portrait, or custom ratios, enabling you to create the perfect visual presentation for your product images.

  4. Items Per Row

    • Define the number of product cards displayed per row. You can choose to show 2, 3, 4, or more items per row, depending on your preferred layout and the amount of information you want to display at once. This setting is particularly useful for mobile responsiveness, allowing you to configure different row settings for desktop and mobile views.

  5. Filters Layout

    • Choose the layout of the filtering options to suit your store’s design and functionality

      • Vertical Filters

        • Display the filters in a sidebar to the left of the products. This layout is ideal for stores with a larger number of filters.

      • Drawer Filters

        • Show filters in a collapsible drawer that can be toggled open or closed. This layout is perfect for mobile users or minimalistic designs.

      • Horizontal Filters

        • Display the filters above the product grid in a horizontal layout. This layout saves space and maintains a clean design.

  6. Pagination Options

    • Choose how customers navigate through multiple pages of products:

      • Infinite Scroll

        • Automatically load more products as the user scrolls down the page, creating a seamless browsing experience.

      • Numbered Pagination

        • Display pagination buttons (e.g., 1, 2, 3) at the bottom of the page, allowing users to navigate between pages manually.

How to Customize the Collections Page

  1. Access the Collections Page Settings

    • Navigate to your theme's settings panel and select the Collections Page customization option.

  2. Configure the Color Scheme

    • Choose the colors for the background, text, and accents to match your store's branding.

  3. Enable or Disable the Container

    • Toggle the Enable Container setting on or off based on whether you want a full-width or constrained layout.

  4. Enable Filtering Options

    • Turn on the Enable Filtering setting and configure the filters available to customers. Options may include size, color, price range, or product tags.

  5. Set the Card Ratio

    • Adjust the aspect ratio for product cards to optimize the appearance of product images on the page.

  6. Adjust Items Per Row

    • Select how many products should be displayed in each row, considering both desktop and mobile layouts.

  7. Choose a Filters Layout

    • Pick one of the three filter layouts: Vertical, Drawer, or Horizontal, based on your store's design and usability needs.

  8. Set the Pagination Style

    • Decide between Infinite Scroll for a dynamic browsing experience or Numbered Pagination for traditional navigation.

  9. Save Your Changes

    • Once all settings are configured, save your changes to ensure they are applied to the Collections Page.

PreviousPagesNextProduct

Last updated 4 months ago