Links

Product page

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:

Main settings

The main section settings are style and spacing (more info here). The other settings are as follows:

Hide zoom icon

Activating this will hide the zoom icon shown over the images on desktop and mobile.
This will enable/disable the breadcrumbs above the images:
The breadcrumbs block provides your customers with helpful information about where they come from to this page. For example the parent category and this way they can easily go back and find other products.
We suggest keeping this option turned on.
The gallery type is the way the media will be served. Below are the different options with previews for each of them.

Grid

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.

Thumbs left

This type prints the media in a slider with thumbs mounted on the left side of the main slider.

Thumbs right

This type prints the media in a slider with thumbs mounted on the right side of the main slider.

Thumbs - Bottom

This type prints the media in a slider with thumbs mounted below the main slider.

Adaptive slider height

Enabling this option will update the slider height based on active image height. Meaning that if you have an image that is taller - the slider will autoadjust its height to show the whole image.

Blocks

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.

Badges

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.

Title, Type, Price

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.

Text blocks

The text block can be added with whatever content you need. By default we have set that to use the product vendor.

Variant selector

This is the block showing the variants.
More details on how to enable swatches and pick the size variants can be found here.
The additional settings are:
Size guide page This page will be shown as a popup next to the size variants:
More details about the size guide page here.
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:

Quantity

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.

Stock notification

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:

Pickup availability

The information will be shown in a popup.

Purchase options

This block is mainly for printing selling plans (if you use any). It's mainly for subscriptions, etc.
More details on the purchase options can be found here: https://shopify.dev/themes/pricing-payments/purchase-options
In case the purchase options are filled in through an app, in the front-end they'll look like this:

Buy buttons

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. Along with the standard button, there is a setting for turning on the dynamic checkout buttons for express checkout.

Product content

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.

Collapsible tabs

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.

Dynamic resources

In case you want to show dynamic information that is product specific, the steps to do it are:
  1. 1.
    Go to Settings > Metafields
  2. 2.
    Pick Products
  3. 3.
    Pick Add definition
  4. 4.
    In the name field add a name that will match your needs like "Materials"
  5. 5.
    Pick Select content type and choose Multi-line text
  6. 6.
    Hit save
  7. 7.
    Then go to one of your products and at the bottom of the page you'll see a field like this:
  8. 8.
    Add the details you want to be shown for this product
  9. 9.
    Then go to the customize panel and navigate to the product page
  10. 10.
    Navigate to the Product section and the tabs blocks
  11. 11.
    Within the area where you want to print the information pick the dynamic icon:
  12. 12.
    In the newly opened dropdown pick the metafield you've just added.

Complete the look

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 here.

Sticky CTA bar

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.

App blocks

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.