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
Width:
Controls the width of image you can either have boxed width or fullwidth.
Images Layout
The Xpert theme offers 4 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.
Collage with scroll: Displays the gallery as collage.
One 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.
Image Ratio
Controls the image ratio, you can have different image ration than the other images on your store.
Fill image:
In Xpert 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.
You also have options to adjust the mobile layout, you can adjust the width of gallery and tab 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'.
Heading size:
Control the font size of title.
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.
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.
Show title of single options
You can display title of single options.
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.
Request a quote
This blocks displays request a quote form block.
You can see all the options available for this block after clicking on it.
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/8789862-pre-order-support
Spacing block
The spacing block is a neat and handy feature within Theme Xpert. 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 tabs section
This can be used to display product description, specification, pros and cons and product recommendations. You can also display custom content tabs as well.
You can click on each block to see the available settings.
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 position:
Set the heading alignment left/right.
Headings:
Set the heading text for your recommend products section.
Heading font and size:
Select the font families and size for your heading.
Custom styling:
Enable custom styling to have custom color scheme and font weight.
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
