Customizing Theme: Product Page Sections

The settings on your product pages determine the information and layout displayed to customers. Follow this guide to adjust your product page settings in the Themes section effectively.

Step-by-Step Guideline:

Step 1: Access Theme Customization

• From your BurgerShop admin site, go to Online Store > Themes > Custom Theme.

Step 2: Select Product Section

• Choose Product detail from the dropdown menu.

Customizable Product Page Sections

A. Header

• Refer to the article on customizing your Header sections for detailed instructions.

B. Product

1. Thumbnail List Position
   Select the position of the thumbnail list: Left or Below the menu bar.
2. Image Quality
   Choose the image quality used for product images: Orginal, Normal, Medium. Select the option that best fits your preferred balance between image display and storefront performance.
3. Display price 
   Price based on the first variant: Displays the price of the first available product variant as the main product price.
   Price as a range: Displays a price range when variants have different prices.
   

   • Percentage: Display the saving as a percentage.

   • Amount: Display the saving as a monetary amount.Configure Compare Price and Price Savings
     

     Compare price: Turn this setting on to display the product’s compare-at price together with its current selling price when compare-price information is available.
     
     Show price savings: Turn Show price savings on if you want to display how much customers save.

     Sale Type

     Choose how the saving amount is displayed: 

     Percentage: Display the saving as a percentage.
     Amount: Display the saving as a monetary amount
     Customize Variant Display
     Choose the display type for product options
4. Quantity

Turn on/off the quantity selector for the product

5. Customize the add to Cart Button, Buy Now Button 

Turn on/ off button add to cart and buy now 

Label: Enter the text you want to display on the button.
Icon: Choose an icon to display with the button label.
6. Customize Sticky Add to Cart

Use Sticky Add to cart to keep a purchase bar visible while customers scroll through the product page.

• Enabled: Display the sticky Add to Cart bar while customers browse the page.
• Disabled: Hide the sticky Add to Cart bar.

The sticky bar helps customers access the purchase action without having to scroll back to the main product information section.

7. Customize Mobile Layout

Under Mobile layout, you can customize how product information is displayed on mobile devices.

Display Thumbnail List

Choose how customers browse additional product images on mobile:

• Show dot: Display navigation dots for product images.

• Show image: Display product image thumbnails.

Choose the option that best fits your product image gallery and mobile storefront layout.

Title Position

Choose where the product title appears in relation to the product images:

• Under image: Display the product title below the product image.

• Above image: Display the product title above the product image.

These settings only control the product page layout on mobile devices.

By following these steps, you can customize your product page sections to display relevant information and create an appealing layout for your customers. This ensures a seamless and informative shopping experience on your BurgerShop store.