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 of the Product Page
  • How to Customize the Product Page
  1. Theme
  2. Pages

Product

PreviousCollectionNextAbout Us

Last updated 4 months ago

The Product Page is one of the most crucial pages in your theme, meticulously designed to highlight your products and provide an intuitive shopping experience. This page is fully customizable, with a variety of options for layout, design, and functionality. It also supports advanced features like displaying product recommendations and recently viewed items to enhance user engagement and conversion rates.

Features of the Product Page

Here you can see the features of the product page in the below image.

  1. Color Scheme

    • Customize the page's color scheme to align with your brand identity. You can choose colors for backgrounds, text, buttons, and other elements for a cohesive look.

  2. Padding Options

    • Fine-tune the spacing on the page by adjusting the padding top and padding bottom. This allows you to create a well-structured and visually appealing layout.

  3. Media Section

    • Showcase high-quality product images or videos in the media section to provide customers with a detailed view of your products.

  4. Customizable Heading and Subheading

    • Add unique headings and subheadings to introduce your products effectively and create a compelling product description.

  5. Blocks for Enhanced Customization The product page includes various customizable blocks, each offering specific features to enhance the product display:

    • Title Block: Display the product title prominently.

    • Badges Block: Add badges like "New," "Sale," or "Best Seller."

    • Subtitle Block: Include a customizable subtitle for additional product details.

    • Description Block: Provide a detailed description of the product.

    • Quantity Selector Block: Allow users to choose the quantity they want to purchase.

    • Color with Price Block: Showcase color variants with corresponding prices.

    • SKU Block: Display the product SKU for inventory management and customer information.

    • Share Block: Add a social sharing feature with customizable text (e.g., "Share").

    • Price Block: Highlight the product price.

    • Vendor Block: Display the product vendor or brand.

    • Unit Price Block: Show unit price for items sold in quantities or bundles.

    • Tags Block: Highlight product tags for easy filtering and navigation.

    • Variants Block: Allow customers to select product variants with options like buttons or dropdown menus.

    • Buy Button Block: Include a primary "Add to Cart" button with an optional dynamic checkout button.

    • Complementary Products Block: Display related products with customizable headings and product count.

    • Pickup Availability Block: Show pickup availability for local customers.

    • Content Block: Add rich text content for additional product information.

    • Tab Block: Create collapsible tabs for organized product details, such as specifications, reviews, or FAQs.

  6. Recommendations and Recently Viewed Items

    • Recommendations:

      • Display complementary products to encourage upselling and cross-selling. This section can be customized with a heading like "Pairs well with" and allows you to configure the number of products shown per page.

    • Recently Viewed Items

      • Enable customers to revisit items they have recently browsed, making it easier to compare and make purchase decisions.

  7. Card Ratio

    • Adjust the aspect ratio of product images to maintain a consistent and polished appearance across the page.

How to Customize the Product Page

  1. Access the Product Page Settings

    • Navigate to the theme editor and select the Product Page customization option.

  2. Adjust Page Settings

    • Configure the color scheme, padding options, and general layout to suit your store's aesthetic.

  3. Customize Blocks

    • Add, remove, or rearrange blocks to tailor the product page to your requirements. Each block has specific settings, allowing for detailed customization.

  4. Enable Recommendations and Recently Viewed Items

    • Activate these features in the settings panel and configure the layout, heading, and number of items displayed per row.

  5. Set Variant and Buy Button Options

    • Define how product variants are displayed (button or dropdown) and enable dynamic checkout buttons if needed.

  6. Save Your Changes

    • Once your customizations are complete, save the changes to apply them to the Product Page.