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:

Enable fullwidth

Enabling this setting will make the page content take the whole screen size horitontally.

Condensed layout

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.

Enable sticky content

This will make your right side content sticky while you scroll through the images on the left side.

Breadcrumbs

For the breadcrumbs there are the following settings:

• Enable breadcrumbs

• Breadcrumbs position:

  • Top - Within container

  • Top - Far left

  • Above product info

Gallery

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.

Gallery settings

The gallery type is the way the media will be served. Below are the different options with previews for each of them.

Big Images

This option will show one image per row taking maximum horizontal spacing.

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.

Gallery mobile settings

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

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

This will show helpful information for pickup availability to your customers. More details here: https://help.shopify.com/en/manual/shipping/setting-up-and-managing-your-shipping/local-methods/local-pickup?shpxid=38e10af7-DBD1-415D-ED51-54AF2464F064#show-pickup-availability-to-your-customers

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. The settings available in this block are

• Show dynamic checkout buttons - activating additional payment methods. More details here

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

• Show recipient information form for gift card products - will enable additional form for gift cards where users can add recipients info. More info here

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

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.

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:

Collapsible element

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.

The collapsable elements also support dynamic resources. More details here.

For the collapsable elements you can also pick an icon from our predefined list, OR you can upload your own one:

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. Go to Settings > Metafields

2. Pick Products

3. Pick Add definition

4. In the name field add a name that will match your needs like "Materials"

5. Pick Select content type and choose Multi-line text

6. Hit save

7. Then go to one of your products and at the bottom of the page you'll see a field like this:
8. Add the details you want to be shown for this product

9. Then go to the customize panel and navigate to the product page

10. Navigate to the Product section and the tabs or collapsable element blocks

11. Within the area where you want to print the information pick the dynamic icon:
12. 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:

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.

Separators

Separator blocks are helper blocks that can help you organize your content in a more readable way. Example:

Countdown timer block

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:

Custom field

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.

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.