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
  • Section Settings
  • Section Blocks
  • How to Add the Collections Tab Section
  1. Theme
  2. Sections

Collections Tab

PreviousCollections ListNextContact Form

Last updated 4 months ago

The Collections Tab section is designed to showcase collections, products, and customizable headings in a visually engaging way. This section includes versatile settings for layout and style, making it suitable for displaying featured categories, best sellers, or any curated collections on your Shopify store.

Section Settings

Here are the settings available for the Collections Tab section and how they impact the layout:

  1. Color Scheme

    • Color Scheme

      • Select the overall color scheme for the section, including the background and text colors. This ensures the section aligns with your theme’s design.

    • Card Color Scheme

      • Customize the colors specifically for the cards within the section, allowing you to highlight specific elements like products or collections.

  2. Slider Settings

    • Use Slider

      • Toggle this option to enable or disable the slider functionality. If enabled, the content will scroll horizontally.

    • Enable Arrows

      • Display left and right navigation arrows for the slider to enhance user navigation.

    • Card Ratio

      • Choose the aspect ratio for the cards displayed in the section:

        • Portrait

          • Tall and narrow layout, ideal for highlighting vertical imagery.

        • Landscape

          • Wide format for horizontal content.

        • Square

          • Balanced height and width for uniform appearance.

  3. Items Per Row

    • Adjust the number of items displayed per row based on the screen size:

      • Desktop Columns

        • Set how many items to display per row on desktop screens.

      • Tablet Columns

        • Define the number of items for medium-sized screens.

      • Mobile Columns

        • Control how many items are displayed on smaller devices.

    • Center Gap

      • Specify the spacing between items to ensure the layout looks clean and organized.

  4. Padding

    • Configure the padding (spacing) around the section to create a balanced look and ensure it aligns with other sections on your store.

Section Blocks

You can add customizable blocks to the Collections Tab section to enhance its content. Here are the available block types:

  1. Collection

    • Displays a featured collection with its products. Use this block to showcase specific product categories.

    • Tab Title

      • Add a title for the tab to differentiate it from others (e.g., "Women" or "Sports Bras").

    • Max Products to Show

      • Limit the number of products shown in this block for a clean layout.

  2. Heading

    • Add a custom heading to the section, such as "Best Sellers" or "Featured Collections."

    • Heading Size

      • Adjust the font size to match the design of your store.

  3. Text

    • Include additional text for descriptions or promotional content.

    • Text Size

      • Control the size of the text for better readability.

  4. Button

    • Add a button for call-to-action purposes (e.g., "Shop Now" or "View More").

    • Button Label

      • Customize the button’s text.

    • Button Link

      • Define the URL the button will redirect to.

    • Button Style

      • Choose a button style that aligns with your store’s branding.

How to Add the Collections Tab Section

  1. Go to your Shopify admin and navigate to Online Store > Themes.

  2. Click on Customize to open the theme editor.

  3. In the theme editor, click Add Section and search for "Collections Tab."

  4. Once added, configure the settings as per your requirements.

  5. Add blocks such as Collection, Heading, Text, or Button to customize the content.

  6. Save your changes and preview the section on different devices to ensure it looks great across all screen sizes.