The productpage settings contain all the settings you need to configure your productpage. You can build your own productpage from scratch, but ofcourse we've provided the theme with a default productpage.

The productpage contains of sections, these sections can be added, editted and removed. You can use all the sections that are used on the homepage, but also have some specific ones for the productpage. We will go in depth about these sections later.
​
First you'll have to navigate to the productpage template.
You can do this by navigating to Products -> Default product in the top bar of the theme editor

Once on this page, the default template is ready to be editted!
​

The general product settings contains the basic settings for how the products on the productpage should behave. This is the most important section of the productpage.
The product settings also contain blocks, which are there to style the elements of your productpage. We will go in depth about this after the general settings.
​
Simply click on the 'section' to open the settings.
​

On the right sidebar, the following settings will show:
​

Show on desktop
Do you want to show the product gallery thumbnails on desktop? These thumbnails/images are on the left or bottom next to your product image (setting related).

Show on mobile
Do you want to show the product gallery thumbnails on mobile? These thumbnails/images are on the left or bottom next to your product image (setting related).
​
​Thumbnails layout:
As stated in the setting above, do you want the product thumbnails on the left (vertical) of the main image, or on the bottom (horizontal).
​
​Show product description:
Do you want to show the product description, select this option. We recommend to enable/activate this, so people can read the product descriptions.

Enable 'read more' link:
This may come in handy if your product description is quite long. Enabling this setting will show the description only partially by default, and your customers chan click on a 'read more' link to show the rest of the description.

Pros and cons can be used to show pros and cons of the products.
You can set the pros and cons using metafields, select the metafields for your pros and cons and fill them in here.

Fill in the specification field using metafields. That way the specifications you've entered as metadata will show on the productpage.
​
​Important note for the Pros and cons and Product specifications:
To be able to use the specifications, pros and cons properly, you as a merchant must create a metafield of the type "Single line text" where "Accept list of values" is checked. It is also important to know that the word "and", or its translation in your own language (in NL eg "en") cannot be used. You can use "&" instead for example.
​
​Example for pros and cons:
The example shows the pros, you can set it up the same for the cons.

On the product settings you will need to enter the values:

For the specifications you'll need to seperate the specification title and values with an ":", just like the example below:

as stated before, the productpage contain blocks. These blocks can be setup in the product section.
We'll go by the product section blocks one by one.

The title block has the following settings:
​

Layout:
Where do you want the title to be aligned, select that here. You can align the title on the left (shows on top of the images) or on the right (shows above the short description). Note that you can only move the Title block up and down the section when the Layout is selected as 'right'.
​
​Show 'Vendor' label / Show vendor name
This setting allows you to show the 'Vendor' label and the vendors' name.

Show product ratings:

This setting basically explains itself, do you want to show the ratings of your products? The ratings will be automatically shown from your review app.
​

Share buttons:
Check which icons should be shown when clicked on 'Share this product'.

The short product description block has the following setting:
​

Show a 'read more' link which scrolls to the product description:
When enabled this will show a 'read more' link that will scroll to the product description. Check out the general theme settings to set up a custom short description. You can find the settings under the tab named 'Products'.

The variant picker has the following settings:
​

Picker type:

How do you want the variants to show? Choose from dropdown or buttons.
​
​Enable separate option pickers:
Do you have multiple options, enable this option. That way every option will be split in standalone pickers.

The product codes block has the following settings:

Show SKU:
Check the box if you want to show the SKU of the product on the productpage.
​
​Show barcode:
Check the box if you want to show the barcode of the product on the productpage.

The inventory and delivery time block does not contain settings. However it's an block on your productpage that might be quite handy. This block makes it possible for you to show the inventory (stock) of the product and the delivery time of that product. You can find the settings in the general theme settings under the tab named 'Products'.

The price block does say it all, it shows the price. The price block has the following setting:

Show 'incl. - or excl. tax' text:
Check the box if you want to show the incl. or excl. tax text.

The buy button block has the following settings:
​

Show amount selection:
Check the box if you want to show an amount selector next to the buy button.
​
​Show dynamic buy button:
Check the box if you want to show an extra buy button, this buy button will contain the customers preferred payment method. This can be Paypal, Apple Pay or Google Pay.
This will show under the 'add to cart' button as a 'buy now' button. Click here for more information about this Shopify feature.

The spacing block is a neat and handy feature within Theme Xtra. You can determine a whitespace between the blocks with the spacer block!
The spacer block has the following setting:

Height:
Determine the whitespace between the elements, this is would be the height of the spacer. Choose between: -100px to 200px.

With the information block you can set some extra information, for example extra USPs on the productpage to engage the customers even more! The information text will be shown with a checkmark icon in front of it. Tip; when you add multiple "Information" blocks below each other, this will create a neat USP list!

The information block has the following setting:

Information:
Set the text you wish to show.

The shipping timer block does not contain any settings, because they are located in the general theme settings under the tab "Shipping & delivery". More information about the shipping timer can be found here.

With the Stock urgency block you can make a visual statement that the stock is low. This will result in customers feeling the urge to buy it quickly before the product runs out of stock!

The Stock urgency block has the following settings:

Show urgency bar when the variant inventory is below:
Set the minimum inventory level, this will result in showing the urgency bar when the stock is lower than amount set in this setting.
In this case the stock urgency will show when the stock amount is 5 or lower.
​
​Metafield stock:
Do you use a metafield for your stock, you can set that metafield here. This will overrule the setting above.

Show variant's current stock amount:
Enable to show the variants current stock in a markup above the stock bar (small layout) or within the bar (large layout).
​
​Show bar when variant stock is 0 or below:
Enable this if you want to stock urgency bar to be present when the stock is depleted. It will use the 'out of stock message' setting for the out of stock message.

Show bar when variant stock is 0 or below:
Enable this if you want to show the bar when the product variant is 0 or below 0 and 'Continue selling when out of stock' checkbox is on in product settings in Shopify admin.

Stock urgency layout:
Set the layout of the stock urgency. You can choose between a small bar or a large bar.

Show stock message:
Where do you want the stock message to appear? Above the bar or below the bar?

Color scheme:
Set the color scheme for the block.
​
​Stock urgency bar:
Set the color for the bar, this is a solid background color

Stock urgency bar gradient:
Want to use a gradient instead of a solid color? Set the gradient. This will overrule the background color.
​
​Progress bar color:
Set the color of the progress bar, this will show when the stock 'depletes'.
​
​Tooltip background:
Set the background for the tooltip
​
​Tooltip label text:
Set the color for the text within the tooltip (stock number)

Stock message text:
Set the text for the stock message that shows below or above the bar when enabled. Use *inventory* to show your live inventory stock level.
​
​Out of stock message text:
Set the out of stock message for when the stock is depleted.

The product recommendation section settings contains the settings for how the recommended products on the productpage should behave.

Simply click on the 'section' to open the settings.
​

On the right sidebar, the following settings will show:

Maximum products to show:
How many products do you want to show as recommended.products. The product recommendations will be loaded in by the Shopify Search & Discovery app.
​
​Products per row:
How many products do you want to show in the row? When there are more products then the amount set on the row, the section will turn into a products slider.
​
​Heading size:
Set the heading size for this section.

​Heading:
Set the heading text for your recommend products section.

Show on desktop:
Enable this if you want the add to cart button to show on your product card on desktop.

Show on mobile:

Enable this if you want the add to cart button to show on your product card on mobile.

Show amount selector:
​Enable this if you want to show an amount selector next to the buy button.

Enable compact button:
This will show a shopping cart icon instead of a button with text on desktop.

Enable quick shop drawer:
If you want to enable the quick shop drawer (slide-out of a mini productpage) enable this option.

Spacing

Bottom spacing desktop/mobile:

Set the spacing on the bottom for desktop and mobile.

That way you will get the amount of whitespace below the element you want. The default for desktop is 50px and the default for mobile is 30px.

The content block settings contains the settings for how the extra content that you can make on the productpage. For example, how to wash this product or how to use this product.

Simply click on the 'block' to open the settings.
​

On the right sidebar, the following settings will show:

Show in accordion:
Enable this if you want your content to show in an accordion. This will have the same look as the 'collapsable' content.
​
​Heading:
Set the name of the heading here.

Icon:
If you want you can also use an icon that will show before the heading, do you want to use an icon here, please select one.
​

Custom image:
Set an custom image for your content here. This will show as an icon before the title and will overrule the icon setting.

Use .svg format:
Want to use a custom image for the icon in .svg format? paste the link here, this will overrule the custom image and icon setting.

Max image width:
Set the max image with for the custom image here.
​
​Text:
Set the text (explanation) here.
​
​Page content:
Want to use page content (maybe you have a seperate washing instructions page), you can select it here, so you dont have to type it again!

Image:

Do you want to use an image? You can upload it here.

​Image width:

If you've uploaded an image, you can set the width here.

The product reviews section does not contain settings, however, you'll have to setup an review app for the product reviews to show. Before you enable the section, please make sure you install Shopify's free Product Reviews app before enabling this section.
​

Ofcourse you can expand the productpage with sections you wish! All the sections that are available in the theme can be added. Just click and 'add section' and make a choice!
You can find the manuals for the sections here