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
  • Slider Settings
  • Heading and Subheading
  • Layout and Spacing Settings
  • Padding Settings
  • How to Add the Featured Collection Section
  1. Theme
  2. Sections

Featured Collection

PreviousContact FormNextFeatured Product

Last updated 4 months ago

The Featured Collection section allows you to highlight a specific collection of products on your Shopify store. This section is ideal for promoting special collections, bestsellers, or seasonal selections. It offers a variety of customization options to control the visual presentation, layout, and behavior of the collection display.

Section Settings

The Featured Collection section provides several settings to help you tailor the look and feel of the collection to your store's design.

  1. Color Scheme

    • Choose a color scheme for the overall section. This controls the background and text colors to ensure the section complements your store's theme.

  2. Card Color Scheme

    • Select a separate color scheme for the individual cards within the collection. This can be used to make product cards stand out by adjusting the background or text colors of the cards.

  3. Collection

    • Select

      • Choose the specific collection to feature in this section. You can select any collection that you’ve created in your Shopify admin to display its products here.

  4. Use Container

    • Enable this option to display the section content inside a container that adjusts to the layout width, ensuring the collection is presented in a clean, centered manner.

Slider Settings

These settings allow you to control whether the collection is displayed in a slider format, offering a more dynamic and interactive layout.

  1. Use Slider

    • Toggle this option to display the collection in a slider (carousel) format, enabling customers to scroll through featured products horizontally.

  2. Enable Arrows

    • If the Use Slider option is enabled, you can activate left and right navigation arrows to allow customers to navigate through the collection.

  3. Card Ratio

    • Set the card ratio to control the shape of the product cards displayed in the collection. Options typically include:

      • Portrait

        • Tall and narrow cards.

      • Landscape

        • Wide cards.

      • Square

        • Uniform square cards for a balanced display.

Heading and Subheading

Customize the text elements that appear above your collection to provide context or a call-to-action.\

  1. Heading

    • Add a heading for the collection section, such as "Featured Products" or "Best Sellers."

  2. Heading Size

    • Adjust the size of the heading to ensure it stands out and fits your store’s design.

  3. Subheading

    • Include a subheading to provide additional information or a secondary description, such as "Shop our most popular items."

Layout and Spacing Settings

These options control how many products are displayed in each row, how they are spaced, and how the section looks on different screen sizes.

  1. Items Per Row

    • Adjust the number of items shown in each row in the collection grid layout.

  2. Center Gap

    • Control the spacing between items to ensure the collection appears neat and organized.

  3. Desktop Columns

    • Specify how many products you want to show per row on desktop devices.

  4. Tab Columns

    • Set the number of products to display per row when viewed on tablet-sized screens.

  5. Mobile Columns

    • Adjust the number of products shown per row on mobile devices to ensure the collection looks good on smaller screens.

Padding Settings

Control the spacing around the section for better visual alignment with other content on your page.

  1. Section Padding

    • Adjust the padding around the entire section to create space between the collection content and the section borders.

  2. Top Padding

    • Set padding at the top of the section to ensure it doesn’t touch the content above it.

  3. Bottom Padding

    • Add padding at the bottom of the section to provide space between the collection and the content below it.

How to Add the Featured Collection Section

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

  2. Click on Customize to open the theme editor.

  3. Click Add Section and search for the Featured Collection section.

  4. Select the section and customize it using the settings provided:

    1. Choose the color scheme and card color scheme.

    2. Select the collection you want to feature.

    3. Toggle the slider option if you want to display the collection as a carousel.

    4. Adjust the heading, subheading, and the items per row for different screen sizes.

    5. Set section padding to ensure the collection is properly spaced.

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

Best Practices

  • Highlight Best Sellers or Promotions

    • Use this section to showcase your best-selling products or any promotional collections you want to feature.

  • Use High-Quality Images

    • Make sure the products in the featured collection have high-quality images to create a visually appealing display.

  • Optimize for Mobile

    • Since many customers shop on mobile, ensure that the collection looks good and is easy to navigate on smaller screens by adjusting the mobile columns setting.

  • Keep It Simple

    • If you have a large number of products, avoid overcrowding the section by limiting the number of items shown per row or enabling the slider for a cleaner display.