Product page
Last updated
Last updated
This is the main place where your customers will see the whole products with all of the relevant images and product information.
The main section within this page is the one called Product. Below or above this section you can add more sections, but we suggest keeping the product section at the top:
The main section settings are style and spacing (more info ). The other settings are as follows:
Enabling this setting will make the page content take the whole screen size horitontally.
Enabling this checkbox will reduce the spacing between the items in the product main block. This will make your call to actions appear upper in the content.
This will make your right side content sticky while you scroll through the images on the left side.
For the breadcrumbs there are the following settings:
Enable breadcrumbs
Breadcrumbs position:
Top - Within container
Top - Far left
Above product info
There are multiple settings for the gallery:
Type: Big images, Grid, Grid - Collage, Thumbs left, Thumbs right, Thumbs bottom
Gallery size: Small, Medium, Large, Extra large
Content size: Small, Medium, Large
Gallery images size
Option for enabling the zoom gallery
Option for hiding the zoom icon on hover.
The gallery type is the way the media will be served. Below are the different options with previews for each of them.
This option will show one image per row taking maximum horizontal spacing.
This type shows big images aligned in two columns.
Grid - Collage
This gallery type will make your first image big, and the next will be arranged in 2 columns.
This type prints the media in a slider with thumbs mounted on the left side of the main slider.
This type prints the media in a slider with thumbs mounted on the right side of the main slider.
This type prints the media in a slider with thumbs mounted below the main slider.
The available settings are:
Images per slide -- being able to choose between 1 and 2 images per screen
Checkbox for enabling partial preview of the next image
Checkbox for enabling arrows
Checkbox for enabling thumbs
All of the main product content (marked in orange below) is managed through blocks (marked in green below):
Each item in the main content column is built based on blocks under the Product section. With these blocks you can:
add/remove features and data that you need
reorder the content
Here are some more details for each of the blocks.
Except the block adding there are no additional settings here. Adding the block just means that the badges should be shown where the block is positioned.
These are all fixed in terms of content and they're always loaded from the product details.
The main purpose of these blocks is to be able to order the items wherever you like.
The text block can be added with whatever content you need. By default we have set that to use the product vendor.
This is the block showing the variants.
The additional settings are:
Size guide page This page will be shown as a popup next to the size variants:
This can be added in case you want to have this functionality in general. It is suggested to show this close to the variant selectors or close to the buy buttons.
A very handy feature for notifying the customers if a specific product or variant is running low on inventory. Once the block is added, you need to pick a threshold under which the functionality will be triggered.
For example, if you set it to 15, it will be always shown for inventories under 15. It will look like this:
The information will be shown in a popup.
This block is mainly for printing selling plans (if you use any). It's mainly for subscriptions, etc.
In case the purchase options are filled in through an app, in the front-end they'll look like this:
This is probably the most important block which will show the Add to cart button so the customers can add the product to the cart. The settings available in this block are
Show product contact modal button - will show an additional button "Contact an advisor" which when clicked, a popup with contact form will be shown so the user can send direct questions to the merchant.
Accent color - updating this will set a custom color to your Add to Cart and Buy buttons. This way you can make your call to actions more noticeable.
This is the main product content that comes from the description field in the product admin area.
It can be moved above the variant picker for example.
The additional options for this block are:
Collapsable - turning the content into a collapsable accordion item
Expanded by default - used when Collapsable is ON in order to make the accordion item expanded by default
When Collapsable and Expanded by default are ON the content will look like this:
This block will allow you to add more collapsable items (accordion elements) to your product page. Information like shipping, returns, etc. can be added to these entries. Example:
For every collapsable element you can add Label and choose the content by entering it in a rich text area OR picking a page where to load the content from.
For the collapsable elements you can also pick an icon from our predefined list, OR you can upload your own one:
A very handy and functional section where you can define up to three tabs with additional information for your products like:
shipping
returns
materials and care
etc.
The information for these tabs can be global (the same for all products) OR you can use dynamic resources like metafields in order to make the content product specific.
The settings for each tab are as follows:
heading
body text
page picker
The headings will be shown as tabs titles.
In case you want to show dynamic information that is product specific, the steps to do it are:
Go to Settings > Metafields
Pick Products
Pick Add definition
In the name field add a name that will match your needs like "Materials"
Pick Select content type and choose Multi-line text
Hit save
Add the details you want to be shown for this product
Then go to the customize panel and navigate to the product page
Navigate to the Product section and the tabs or collapsable element blocks
In the newly opened dropdown pick the metafield you've just added.
Here is a short video showing the process of creating a metafield and attaching it to a dynamic resource:
Adding this will show a floating purchase bar at the bottom of the product page once the user scroll passes the main add to cart button. The bar contains an image, title, price, variant pickers and CTA button.
The main purpose is easy adding the product to the cart no matter where on the page the user is.
Separator blocks are helper blocks that can help you organize your content in a more readable way. Example:
In case you have promotions with fixed deadlines, or you want to create a sense of emergency in your visitors - then this it the way to go.
Here is how the block looks for example:
For the block you can pick Heading, Subheading and end date (expiration). The expiration can be set for the template through the customize panel, or through a metafield. The green marker in the example below is for setting the date for the template, and the organge is via metafield per product:
With this block you can add custom fields to your product page. For example, if you have an option for engraving that's the perfect way to do it.
Example:
Various settings are availble like for example picking the custom field type, options, etc.
This block is for installing applications within the product page. More details of how these should be used is provided with every application installed on the store.
More details on how to enable swatches and pick the size variants can be found .
More details about the size guide page .
Variant picker type Here you can choose the type of the variant pickers - to be buttons or dropdowns. You can pick different types for the size varants and for all of the other options that you'll use. Here is an example of buttons: And here is an example of dropdowns:
This will show helpful information for pickup availability to your customers. More details here:
More details on the purchase options can be found here:
Show dynamic checkout buttons - activating additional payment methods. More details
Show recipient information form for gift card products - will enable additional form for gift cards where users can add recipients info. More info
The collapsable elements also support dynamic resources. .
Then go to one of your products and at the bottom of the page you'll see a field like this:
Within the area where you want to print the information pick the dynamic icon:
Adding this block will show products that are usually bought together with the current product. Products are displayed based on the Shopify Recommendations API and Search & Discovery app. More details .
