Setup your Product page in Booster Theme

This article will show you how to setup your product page and take advantage of the options available.

Booster Theme Product Page-1

Product pages are the lifeblood of any successful online shop. They need to be intuitive and captivating, guiding customers effortlessly to purchase. This requires meticulous attention to detail, ensuring a seamless experience tailored to the customer's needs and desires.

In this article:

  1. Accessing the Product Page
  2. Product Page Layout
  3. Gallery Style
  4. Previous/Next Product
  5. Product Page Content Blocks
    1. Where to Add Blocks to the Product Page Content Section
    2. Most Commonly Used Blocks

Accessing the Product Page

To access the product page settings, locate the page selector in the top-center area of the theme editor and click on it. Click ProductsDefault product.

 

Once you are on the Product Page, locate the sidebar on the left side of the screen. Within the sidebar, click on the option labeled "Product page content." This will display the settings for your product page.

Accessing the Product Page Content settings

Layout

There are two distinct product page layouts available in Booster:

DefaultDefault Product Page Layout

    Marketplace

    Marketplace Product Page Layout

    Gallery Style

    This setting allows you to customize the look and feel of your gallery with three distinct options:

    Default

    Default Gallery Style

    Vertical list (1 column)

    Vertical List (1 column)

    Vertical list (2 columns)

    Vertical List (2 columns)

    Gallery video

    This feature enables you to tailor the behavior of videos within your product page image gallery. You have the option to set the video to autoplay and loop, enhancing the visual experience for your customers. Autoplay initiates the video to play automatically when the page loads, while the loop feature allows the video to continuously replay.

    Gallery Video

    Previous/Next product

    This feature allows you to add intuitive navigation buttons to your product page, making it easier for customers to browse through similar products in your collection.

    Two buttons will appear on the left and right sides of your product page (see red arrows). Clicking the left button displays the previous product in the collection. Clicking the right button displays the next product in the collection.

    PreviousNext Product



    Product Page Content blocks

    This exciting feature allows you to seamlessly integrate various content blocks onto your product page, enriching your customers' shopping experience and showcasing your brand story in unique ways.

    How Can I Add Blocks to the Product Page Content?

    Add blocks to your product page by clicking "Add block" in the left sidebar under "Product page content".

    Product Page Content blocks

    These are the top blocks commonly used and currently available under the Product page content section:

    1. Product Title
    2. Product Price
    3. Product Variants
    4. Product SKU
    5. Add to Cart
      1. New update! (Booster V7) - Desktop Sticky Add-to-cart
    6. Offer Countdown
    7. Product Stock
    8. Watching Product + Product in Cart
    9. Product Description
    10. Accordion / Tab
    11. Review Stars
    12. Social Media Share
    13. Localized Delivery
    14. Icon + Text (Delivery)
    15. Order Attribute

    Product Title

    Enhance your product title with custom color, size, and font.

    Product Title Settings

    Product Price

    Change the Custom color, Font size & family of your product price to customize it further.

    Product Price Settings

    With Sales Badge you can add 4 options: Percent (1), Money amount (2), Only 'SALE' text (3).

    Note: The sales badge settings for both Product price and Product card tags have have been combined into a single global option under Theme SettingsProduct card tags.

    PP Product Price Sale Badge

    Product variants

    Product variants, also known as swatches, are a required element on your product page, allowing customers to easily choose between different options.

    For a more in-depth tutorial on how to setup your Swatches, you can refer to this article.

    Variant selector

    Product SKU

    This block displays the SKU of the product currently being viewed. The SKU provides a unique identifier for the product, allowing customers to easily verify they are purchasing the correct item. This is especially helpful for products with variations like color or size.

    Product SKU

    Add to cart

    The add-to-cart block is the heart of your Shopify store, allowing customers to seamlessly purchase your products. This seemingly simple block plays a crucial role in your conversion rate, influencing the customer's decision to purchase. It should be visually appealing, easy to find, and provide a clear call to action.

    Product Page ATC

    Sticky Add to Cart

    This allows you to add a sticky Add to Cart button on your product pages, ensuring it remains visible even as users scroll down. This convenient feature encourages impulse purchases and simplifies the buying process, leading to increased conversions.

    Desktop

    Sticky Add to Cart

    Mobile

    Sticky Add to Cart (mobile)

    For single-item products, you can disable the Quantity Selector to streamline the buying experience.

    Disable Quantity Selector Product Page

    Offer countdown

    Limited-time offers are a powerful tool for attracting customers and driving sales. An offer countdown timer creates a sense of urgency, motivating customers to take action before the offer expires. This psychological nudge can significantly increase conversion rates and boost your bottom line.

    Customize your countdown timer with two available styles: a two-column format (1) or a compact format (2).

    2-column Offer CountdownCompact Offer Countdown

    Warning text

    Easily edit the text displayed below the countdown timer with this option. Use the %price% placeholder to automatically display the original price.

    Countdown Timer Warning Text

    For a more in-depth tutorial on how to set up the Offer Countdown, you can refer to this article.
     

    Product Stock

    Displaying limited stock can create a sense of urgency and scarcity, prompting customers to purchase before the product runs out. This can lead to increased sales and conversions.

    If customers don't see stock information readily available, they may abandon their carts out of uncertainty or frustration. Clear stock displays can prevent this and encourage the completion of purchases.

     

    You have two choices on how to display your product inventory:
    You can opt for either a real-time stock count or a dynamic number that adjusts based on your settings.


    Product Stock


    Max stock product

    This feature allows you to showcase the maximum available stock for a product, choosing between pre-defined options like 10, 100, or 1000. Alternatively, you can opt for displaying the actual stock level.

    Reduce inventory

    This option allows you to customize the frequency of the refresh rate for the displayed stock. This functionality can't be used with actual stock levels. To deactivate it, set the value to 0.

     


    Watching Product + Product in the cart

    The "Watching product" and "Product in the cart" features generate social proof on your website, showcasing customer interest and encouraging others to engage.

    Watching Product block

    You have the flexibility to manipulate the displayed number of viewers and those with the same product in their cart. You can choose pre-defined options like 10, 100, or 1000 to create the desired social proof effect. Furthermore, you can control the update frequency for the displayed numbers.

    Product Description

    Product descriptions provide detailed information about features, benefits, specifications, and more. This transparency builds trust with customers, allowing them to make informed purchasing decisions. Comprehensive descriptions address potential questions and concerns, reducing customer inquiries and improving the overall shopping experience.

    Product Description block 

    Accordion / Tab

    Organize and present your content effectively by utilizing the Accordion and Tab blocks. Choose from six distinct types of content to best showcase your information, including:

    1. Description
    2. Reviews
    3. Metafield
    4. Page
    5. Product-specific page
    6. Custom content

    Tab + Accordion

    Metafield (Advanced Setting)

    The Metafield option helps you to personalize your Shopify store by storing and managing specialized information beyond the standard Shopify admin fields. This information can be utilized for internal purposes within your admin or displayed on your online store for a customized customer experience.

    For a more in-depth tutorial on how to set up take advantage of the metafield option in Booster theme, you can refer to this article.


    For further details regarding metafields, please refer to this Shopify article: https://help.shopify.com/en/manual/custom-data/metafields/using-metafields



    Reviews stars

    The Review stars block offers a quick glimpse of the reviews for this product. The exact visual presentation might differ depending on the reviews app you're using, but the overall functionality remains the same.

    Review Stars block

    For in-depth tutorials on how to set up reviews in Booster Theme, you can refer to the following articles:

    1. How to Set Up Alireviews in Booster Theme
    2. How to Set Up Loox in Booster Theme
     

    Social media share

    This block allows your customers to share your product across their favourite platforms such as Facebook, Messenger, Twitter, Pinterest and Gmail.

    Social media platforms have billions of active users, providing a massive potential audience for your products. By allowing customers to share directly, you can tap into their social networks and expose your products to a wider audience who may not have known about your brand before.

     

    Localized delivery

    This product page block ensures your customers have complete transparency regarding delivery timelines. Simply select the start and end dates, and the block will automatically display the delivery window for their orders.

    Product Page Localized Delivery

    Icon + Text (Delivery)

    This block shares some features with "Localized Delivery," but with a key difference: static delivery dates. However, it makes up for this by allowing you to personalize the icon and delivery message.

    Icon Text (Delivery)


    Order Attribute

    This block empowers your customers to personalize their orders by adding customer text or notes. They can add any additional information they wish to convey related to their order.

    Order Attribute

    You're done!

    Et voilà! You've successfully created your product page and enriched it with engaging content. Now, your customers can explore your product in-depth, learn about its benefits, and confidently make informed purchase decisions.
     

    - End of article -