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.
• Enable on-scroll reveal animation.
• Enable and configure sticky Add to Cart block. Here it is possible to show product images and show product variants.
• Specify text before and after the heading.
• Show the title together with product SKU, rating, product price, and badges.
• Set stock counter value.
• Show social share icons.
• Show product badges. 
• Show tax information.
• Select the type for the product options display. Available values are Dropdown, Button, and Color swatch.
• 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 control the image size. You can also choose the badge size. The possible values are Large, Medium, Small, and Extra small. 
• 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.

• Mark unavailable variations with a border color.

Note: 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. 

Add a collapsible tab to the product information section

It is possible to add a collapsible tab to the product information section. You should press Add block and choose a Collapsible tab. Since the 2.4.0 release, we added the ability to render a download file link using page meta fields. Please follow the next steps to make it real:

1. Create page a metafield with the name file "page.metafields.custom.file".
2. Navigate to Shopify Admin - Pages and create a new page. Look at the meta field 'file' and attach the download file.
3. Navigate to the Online Store - Product page and add a Collapsible tab block. Here you can select the newly created page with the attached file. The page title is used as the name of the download link.

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.