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.
How to edit the 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 edited!
General 'Product' settings
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:
Layout
Images Layout
The Xclusive theme offers three layout options for product images:
One image with scroll: This layout enlarges the product image in the gallery, and when you scroll on the page, the images also scroll.
Two images with scroll: This layout displays two product images, both of which enlarge when clicked, and scroll along with the page.
Single image with slider: This layout showcases a single product image that can be viewed using a slider.
Space between images
It controls the spacing between the images work for only the first 2 layouts.
Fill image:
In Xclusive you have an option to make the product images filled. The "fill image" option in refers to a feature that automatically adjusts and stretches the image to fill the available space without distorting its proportions.
Thumbnails
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).
Please note, the thumbnail settings are only applicable when the Product image layout is selected as One Image Slider.
Image info label
Introducing a new section that simplifies the process of adding a general label to your product images. Say goodbye to the hassle of using metafields - simply enter your desired text and voila!
Font size
Enable this option to have a custom font size for the product section, it will change the font of title, description, labels everything in the product section.
Show product description:
Do you want to show the main product description, select this option. We recommend to enable/activate this, so people can read the product descriptions.
Heading Size:
Control the heading size for the description title.
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 can click on a 'read more' link to show the rest of the description.
Pros and cons
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.
Product specifications
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:
You also have options to adjust the mobile layout, you can collapse product description by default and adjust the heading size. If you want a light background just check the enable light background lightbox.
Blocks of the products
as stated before, the product page contain blocks. These blocks can be setup in the product section.
We'll go by the product section blocks one by one.
Title block
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'.
Layout:
This changes the position of the product title based on the main product image.
Heading size:
Control the title font size choosing the size from Small to extra large.
Short product description block
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'.
Variant picker
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.
Always show buttons for option(s)
The option name(s) that should always use variant picker type 'buttons', for example 'Color'. You can use multiple names by entering them on separate lines.
Always show a dropdown for option(s)
The option name(s) that should always use variant picker type 'dropdown', for example 'Size'. You can use multiple names by entering them on separate lines.
Show images in variants
Check this option if you want to display images in your variants.
Show images from selected variants only
If you want to show images with colors, enable this option. this is only applicable when color swatches are active.
Show unavailable variants
Unavailable variants can only be hidden when separate option pickers are not applicable for the product.
Show options with only one variant
If you want to display options for singe variant product, check this option.
Enable subscriptions
If you are offering subscriptions for your products check this option, you still need a subscription app in action.
Size chart option is also made a part of variant picker now. But this comes with more advanced options:
a) You can adjust the Size chart title size and position on the go.
b) Change the Size chart title heading.
You can add description for your size chart, see below image how the description will show up. Also you can load the size chart from an image or using page content by selecting a page.
To give you more options we have included liquid and html field in the size chart options as well:
Product codes block
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.
Inventory and delivery time block
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'.
Price block
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.
Font size:
Control the font size of your price using the slider.
Buy button block
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.
This feature has been explained here: https://intercom.help/xtra-for-shopify/en/articles/7938611-pre-order-support
Spacing block
The spacing block is a neat and handy feature within Theme Xclusive. 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.
Information block
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.
Shipping timer block
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.
Product Recommendation section
The product recommendation section settings contains the settings for how the recommended products on the product page 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.
Headings:
Set the primary and secondary heading text for your recommend products section.
Heading font and size:
Select the font families and size for your primary and secondary heading.
Enable this option if you want custom styling for your headings.
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.
Product Reviews section
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.
Other sections
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
