1. Configure the product page

There are two product page templates available with the Charge theme. The default one and sticky-info. To choose the second one, go to the Product and select a required value in the Theme template dropdown.

Then you will see the hidden product information under the Media gallery block. This product page template of the Charge theme allows for viewing more product descriptions and still shows the section with Title, Quantity selector, and Buy buttons as a sticky element when scrolling down.

General configuration for both templates of the product page

When you customize the product page information section, you can enable/disable each existing block by visibility badge. You can also add a new one.

Within the Product information configuration, it is possible to:

• Enable sticky product information on large screens.
• Specify text before and after the title.
• Show title with product SKU.
• Show the title with the product price on the desktop.
• Set stock counter value.
• Customize product page media gallery. The Charge theme shows product thumbnail images in the product modal window. Within the configuration, you can show product badges in the gallery. See more about badge customization. You can choose the badge size. The possible values are Large, Medium, Small, and Extra small. The Media Gallery block also allows for controlling the image size and setting the border radius for the badge.  

• Control the width of the main product image on the product page.
• Show social share icons.
• Show description for the product. 
• Set a product description as initially collapsed and change the number of lines to be visible when collapsed.
• Show dynamic checkout buttons. Here you can show the Pre-order label button for the products with Pre-order status. First, make sure you have enabled the product options "Continue selling when out of stock" and "Track quantity". Then in the Buy buttons configuration of the Charge theme, you have to check the box Preorder button label.

• Show the recipient information form.
• Show tax information on the product page.
• Choose a type for the variant picker. Available values are Dropdown, Button, and Color swatch. Here it is possible to mark unavailable product variations. 

The Charge theme includes an important feature to create all links between product options, even for non-existing variants. It enables Shopify to track only the variants which exist and which have the enabled checkbox "Track quantity". The number of unavailable options must be set as “0”.

To use the feature, click on the Variant picker block and put a checkbox to Mark unavailable variations with a border color field. Please note, that if you set the Dropdown value in the Type field, the variant with the unavailable product will be disabled.

For example, a product has two variant options: Size and Color. We have to create all the links between them:

• Size:  S,  M,  L
• Color: Red, Blue, Yellow, Black, White.

Follow the steps:

1. Create links for available variants, e.g.:

• [S, Red],
• [L, Black], [L, White].  

      2. Create the links for unavailable variants: 

• [S, Blue], [S, Yellow], [S, Black], [S, White], 
• [M, Red], [M, Blue], [M, Yellow], [M, Black], [M, White]
• [L, Red], [L, Red], [L, Blue], [L, Yellow]. 

Note: all these unavailable links have set the Qty to 0 with a selected checkbox “Track quantity”. They will be marked with the red line on the product page.

If you have many different options on the product page, we suggest setting the Dropdown value in the Type field. This type looks more attractive to customers. 

Quick Add option

With the Charge theme Product page, it is also possible to enable the Quick Add option.

Note: the Quick Add option will render the Add to Cart button next to the product details block. When users learn more about product details, they would like to add it to the shopping cart without scrolling to the top. The option is a nice solution for a better experience on mobile.