Product Page

Waching tutorial video in here:

Theme Settings > Product Page

This location allows you make some general setting for a product page

Go to Theme Settings > Product Page

We will explain one by one option below

1 - Product Layout

This option allow you change the layout between: Full width, Wide (1600px) and Default

Default layout
Wide 1600px

2 - Product Page Design

This option allow you switch between a product design. Let's see the sample below

Product Design 1
Product Design 2
Product Design 3 (Sticky image)
Product with thumbnail at bottom
Product with thumbnail on the right
Product layout without thumbnail

3 - Product image size

This option allows you change the size of product image


4 - Product Description Design

You can switch between Product Tab Description and Product Tab Accordion

Product Tab Description
Product Tab Accordion

5 - Use sticky product

Enble this option will alway make a block product information alway sticky

The right block alway sticky

6 - Main image click action

Allow you choose between zoom or PhotoSwipe on the product image

Image will zoom when hover

You can also switch to another zoom layout like

Zoom 2nd style (extenal zoom)
Zoom 3rd style (inner zoom)

And this is PhotoSwipe popup

PhotoSwipe popup

You can also disable Zoom features by use NONE option

7 - Product Sidebar

Product Sidebar options

You can enable sidebar for product page so easy, you can also choose the Sidebar Size between Small, Medium, Large

When enable a sidebar, it will show like this

Sidebar in product page

To config this Sidebar, please back to Sections > Sidebar Product

Config sidebar detail

Here you will see a block for Product Sidebar which allows you config to show your own data. You can also add more block by click to the Add content like screenshot above.

7.1 - Product Categories

Allow you show the categories in the sidebar such as a Menu or auto Show all Categories

Show all collection as auto
Show a menu by choose the link list

7.2 - Instagram

Allow you get Instagram image in Product sidebar

Note: This Instagram Block is separate from the Instagram Section on the home page or the Instagram Block on the Blog page.

Options for Instagram block

To show your own pictures, just enter your Instagram username in the option, you can get it from your Instagram URL

This is your user name

You can also get all Instagram pictures by tag, please remove your Instagram username to able to apply show pictures by tag option.

Leave the username blank and enter Instagram tag

A rest is basic options and we believe you can easy to understand how it work :)

7.3 - Shipping & Delivery

Enter the data like screenshot above to show this block, for example

truck,FREE SHIPPING,Free shipping for all US order

You need to Select Collection to show

7.5 - Recent Post

7.6 - Custom HTML

Allow to show Page content in the sidebar

7.7 - Custom text

Write any text here to show in the sidebar

8 - Product Features

8.1 - Product variant

  • No pick

  • Pick first variant

  • Pick first available variant

8.2 - Show first image

Show first product image instead show a image from first variant

8.3 - Use product group variant

This is awesome features allow you show a correct image for a variant, example when you active color Cyan, the image and thumbnails will show the Cyan color only instead show all thumbnails

To use this feature, you must config thumbnail one by one by enter the variant name as a Alt tag. Let's see the screenshot below

1- Click to the thumbnail image

2- Edit alt text

3- Enter tag

If you want to enter the normal alt text for the thumbnail image, you must write like this Color_cyan | Cyan Boheme and Cyan Boheme is an Alt text

If you want to use this feature, you must configure Alt text for all thumbnail images from all products, so consider whether or not to use this feature as it will be very time consuming. We are not sure if there is a third application that will allow this in bulk but we will continue to update here.

8.4 - Show sticky add to cart?

Allows you to show the add to cart bar when scrolling down

8.5 - Use adapt to first swatch image variant

By default we show the variant image with square and fixed size, when this option is turned on, it will show the variant image the same size as the actual image. (this ratio is taken from the first product image).


8.6 - Enter variant name you want has style color

As you can see, with the Color variant, it will display as a thumbnail. But in some countries there are different ways of writing colors, such as Color, Colors, Couleus ... So you need to enter the name of the variant that you want to display as a thumbnail here.

8.7 - Use Select variants by clicking thumb images?

This option allows when you click on a thumbail image or activate a product image, it will automatically reselect the corresponding variant on the right.

8.8 - enable HistoryState?

This option allows you to display IDs on URLs every time you switch between variants.

ID when changing variant
No ID when changing variant

8.9 - Show incoming message

If your product has an out-of-stock variant and you set the settings to new incoming product like this

Then this option will show like this

8.10 - Remove sold out

Auto hidden sold out variant from product page

8.11 - Use a back in stock notification form?

If your product / variant out of stock like this

This option will allow show the Notify form like this

When a customer submits the back in stock notification form for a sold out product, you will receive an email to the email address you have set up in the admin to be your Customer email.

This is the email you will get

To change the text in form, please go to Edit language

Show next back product like this

Please note that it only show if your product URL included collection name.