Product Pages

Overview

Your Product pages are the lynch pin of your store, displaying all the details of products on your store.

Steps

  1. Within your Shopify admin, go to Sales Channels > Online Store > Themes.

  2. Click your theme, and select Customize.

  3. Go to the drop-down menu at the top of the page.

  4. Scroll down to select Product pages.

Templates > Product pages.

Under the section menu on the left-hand side, select Product pages.

Product pages section.

Adding a Product

Products are set up through the Products area of the Shopify dashboard.

Adding a product through Shopify admin.

To learn more about our adding and updating products, click here read Shopify's help pages.

Show Quantity Selector

If you would like to give your customers the option to add multiple products at once, select Show quantity selector.

Quantity selector.

Show Dynamic Checkout Button

To allow your customers to check out directly using a familiar payment method, select Show dynamic checkout button - your customers will then see a Buy it now button.

Dynamic checkout button.

To learn more about this functionality, please read our guide below:

Show Variant Labels

By selecting Show variant labels, the name of the variant will be displayed above the variant selectors.

Variant label.

Show Shipping Policy Link

In order for this text to show on your product page, simply select Show shipping policy link.

Shipping policy link.

Your shipping policy must first be set up within your Shopify admin in order to be linked to your product page:

  1. Within your Shopify admin space, go to Settings.

  2. Go to Legal.

  3. Scroll down to Shipping Policy.

  4. Enter your shipping policy text, and select Save.

Shopify admin > Settings > Legal > Shipping policy

Your shipping policy will then display underneath your price - by clicking the Shipping link, you will taken to your Shipping Policy page.

Clicking product page shipping link to go to the shipping policy page.

Shipping 'Tax Included' Message

If you would like a message to state 'tax included' on your product page, simply select Show 'tax included' message.

Tax included message.

Change Variant Based on the Thumbnail

By selecting Change variant based on the thumbnail, selecting a different variant will display a different thumbnail and vice versa - this will only work if your thumbnails have been assigned to a variant.

Your color swatches must be disabled through your theme settings in order for this functionality to work - click here to read more.

Thumbnails changing according to which variant is selected.

Enable Out of Stock Email

By selecting Enable out of stock email, an entry field will be available on pages for out of stock products.

Out of stock email entry field on product page.

An automated email will be sent to your store email alerting you to message the customer when the product comes back into stock.

Automated email sent to your store email altering you of out-of-stock notification.

The Theme itself does not provide any control over this email, it simply triggers the action to send the email to a customers inbox. Certain App's may be able to add more control over this feature.

Hide Out of Stock Variants

If a variant of your product is out of stock, your customers will not be able to select the variant to add it to their cart.

Therefore, by selecting Hide out of stock variants, you have the option to remove them from the section altogether.

Cart Button Location

Under Cart button location, you can choose to position your cart button either above or below your product description.

Before Product Description

Add to Cart button before the product description.

After Product Description

Add to Cart button after the product description.

Add to Cart Action

When a customer selects Add to cart on this section, you have the choice of the following options as your Add to Cart action:

  • Show drawer

  • Show 'Added' message

  • Go to cart

To learn more about the Cart page, please read our guide below:

Show Drawer

By selecting Show drawer, the cart drawer will open when the customer selects Add to Cart on this section.

Show drawer when product is added to cart.

Show 'Added' Message

By selecting Show 'Added' message, the Add to Cart button will change to Added once the customer has selected.

Show 'added' message when product is added to cart.

Go to Cart

By selecting Go to Cart, customers will be taken to your Cart page when they select Add to Cart on this section.

Cart page opened when product is added to cart.

Enable 'Pick an Option'

When using a drop-down menu (rather than swatches) to display your variants, a random variant will be displayed initially before the customer selects which one they are interested in.

If you would like to replace the random variant with a prompt for your customer to choose the variant they would like, enable Pick an option.

Enabling 'Pick an option'.

This will also change the price to simply read Make a selection.

Pick an option will not be available if you have selected Show swatches under Theme settings.

Enable Discount Savings

If you would like to display the discount amount on variants which are on sale, select one of the following options from the Enabling discount savings? drop-down menu:

  • ​Percentage​

  • Value​

If you do not wish to display the discount amount, simply select Hide.

These discount savings tags will only be visible on items which are on sale.

Percentage

The percentage of how much your customers save will be displayed in this tag.

Percent discount savings tag.

Value

The value of how much your customers save will be displayed in this tag.

Value discount savings tag.

Social Sharing

Social Sharing

Under Social Sharing, you have the option to enable social media icons by selecting the following options:

  • Facebook

  • Twitter

  • Pinterest

Enabling social sharing on Facebook, Twitter, Pinterest.

Media Size

Using the Size drop-down menu, you can choose to make your product media:

  • Small

  • Medium

  • Large

  • Full-width

Changing the product image size using the size drop-down menu.

Thumbnail Position

By using the Thumbnail position drop-down menu, you can choose for your thumbnails to be displayed either underneath, to the left, or to the right of your product image.

Below Main Image

Thumbnail below the main image.

Left of Main Image

Thumbnail to the left of the main image.

Right of Main Image

Thumbnail to the right of the main image.

Enable Image Zoom

By selecting Enable image zoom, the product image will zoom in as the cursor hovers over it.

Enabling image zoom.

Size Guide

Under Size guide, you have the option to have a link to a size guide which will open up as a modal on the product page.

This can also be a great option to display other information about the product, such as returns instructions, color references, terms and conditions, or materials within the product.

Adding a Size Guide

You will first need to add your size guide page:

  1. Within your Shopify admin, go to Online store > Pages.

  2. Select Add page.

To learn more about making pages, read Shopify's help documentation here.

Linking Your Size Guide

Once you have your size guide page, paste your link into the box called Size guide page.

This will create a link on your product page - you can change the title of this link by typing your words of choice under Size guide message.

Choosing a size guide message for the link.

This link then appears on your product page underneath your variants.

Size guide message appearing on the product page.

When this link is clicked, a page will open to display the size guide.

Size guide page appearing on the product page.

Linking Size Guide to Variants

You also have the option to tag your size guide onto a specific variant - this way, the size guide would only appear on products with that variant.

You can do this by typing the name of the variant into Show on a selected variant; for example, typing in 'Size' would link your size guide onto your size variants.

Leaving this field blank will result in your size guide link appearing on every product page.

Size guide message linked to variants.