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
  • Spacing
  • How to Add the Featured Product Section
  • Advanced Customization
  1. Theme
  2. Sections

Featured Product

The Featured Product section allows you to spotlight a single product on your Shopify store's homepage, product page, or any other part of your site. This section is perfect for drawing attention to special offers, new arrivals, or bestsellers, and provides customers with a focused view of a specific product. The section can be customized to align with your store's branding and style.

Section Settings

The Featured Product section offers several settings that enable you to control the presentation and appearance of the highlighted product.

  1. Product Selection

    • Select Product

      • Choose the specific product you want to feature. This can be any product listed in your Shopify store's catalog.

  2. Color Scheme

    • Customize the overall color scheme of the section to match your store’s branding. This can include background colors, text, and button colors, ensuring consistency with the rest of your site.

Spacing

These settings allow you to adjust the spacing around the product section, helping you achieve a balanced and visually appealing layout.

  1. Section Padding

    • Top Padding

      • Add space above the featured product section to separate it from the content above.

    • Bottom Padding

      • Add space below the section to ensure it doesn’t crowd the content beneath it.

How to Add the Featured Product Section

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

  2. Click Customize to open the theme editor.

  3. In the theme editor, click Add Section and search for "Featured Product."

  4. Select the Featured Product section and customize the following:

    1. Choose a product to feature.

    2. Set the color scheme and card color scheme to match your branding.

  5. Save your changes and preview the section to ensure the product looks great on both desktop and mobile devices.

Advanced Customization

If you need to further customize the Featured Product section beyond the built-in settings, you can use custom CSS or modify the Liquid templates associated with the section. This can allow you to:

  • Customize hover effects on the product card.

  • Adjust animations or transitions when the product is viewed.

  • Implement custom buttons or pop-ups for additional interactions.

Best Practices

  • Choose High-Quality Images

    • Make sure the product image is of high quality and visually appealing. This is crucial since the featured product will be a focal point for visitors.

  • Highlight Special Offers

    • If the product is on sale or part of a limited-time offer, ensure that the section includes that information prominently to create urgency.

  • Use a Compelling CTA

    • Make sure the button label is clear and action-oriented, such as "Add to Cart" or "Shop Now," to encourage customers to take action.

  • Test Mobile Layout

    • Ensure that the featured product section looks good on both desktop and mobile devices. Adjust the layout and spacing as needed to optimize for smaller screens.

  • Keep it Simple

    • Since this section is dedicated to a single product, focus on making the product information clear and easy to read without overwhelming the customer with too much text or too many options.

PreviousFeatured CollectionNextRichText

Last updated 4 months ago