Product pages

Products are the lynchpin of your store.

Familiarize yourself with all the settings available to build your store and your brand correctly, right from the start.

Products can be linked to on your storefront by using sections, images or via text.

Adding a Product

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

Shopify has a great guide on how to add products here:

Shopify Help - Adding and updating products

Product descriptions, compare at pricing (sale price), variants and images are outlined here:

Shopify Help - Product details

Note

For more information relating to image sizing for specific sections, see our image FAQ here.

Customizing the Product page

Merchants can further customize how the products display in the Product page. Specific information can be set to displayed, if required as-well as various display options for thumbnails, and product descriptions.

To view your product page settings, head to:

  1. Online store → Themes → Customize

  2. Select 'Product pages' from the page selector dropdown,

  3. Select 'Product pages' again from the left-hand settings panel:

This will open all the configurable settings for the product page

Product Page Settings

Edit how your products display to your customers. With these settings, you can customize the information that's displayed to customers.

We've gone through each of these settings in turn, with a small description of what these settings control.

Show Vendor

Display the vendor of the product above the product title. The vendor information is set individually, in the product information.

To change this information, navigate to the product in the Shopify dashboard and proceed to edit the Vendor field:

Click on the field to type the name of a vendor. Hit save once done to apply the changes.

Show SKU

This option displays the Stock Keeping Unit assigned to the product. The SKU is set through the product options, on the Shopify dashboard.

When the Show Vendor checkbox is enabled, the SKU will then display on the product for customers to see and displays to the right of the product title.

Show Quantity Selector

Toggle to display a quantity selector for your product. Clicking the plus (+) and minus (-) changes to your quantity before adding the item to cart.

Show Dynamic Checkout Buttons

Enables a 'Buy it now' button, allowing customers to go straight to the checkout with the selected item.

Toggle between hidden and visible.

For more information on Dynamic Checkout Buttons, see our in house documentation here.

Tip

Shopify has official documentation regarding these buttons.

Shopify Help - Dynamic checkout buttons

Show Variant Labels

Enable the checkbox to display labels above the variant dropdown selectors.

Toggle between hidden and visible.

Change Variant based on the thumbnail

Toggle between active and inactive. When active, this feature triggers the dropdown selector to change to reflect the thumbnail clicked.

Note: show swatches will need to be turned off for this to show:

Selecting the variant image for the black bag changes the variant selector to black:

Selecting the variant image for the linen bag changes the variant selector to linen:

Enable Out of Stock email

This setting sends an automated email to your store email, to alert you to message the customer when you have stock available for their selected variant.

Hide Out of Stock variants

This option automatically hides variants, as soon as the Out-of-Stock state is triggered. This is when the inventory count of a product reaches 0.

Cart Button location

Select either “below product description” or “above product description”.

Add to Cart Action

Select how the page should respond after the customer hits 'Add to cart':

Show Drawer:

Open the Cart Drawer with the item added:

Show 'Added' message:

Displays a success banner over the Add to Cart Button for a few seconds:

Go to Cart:

Loads the customer through to the Cart Page:

Note:

For more information on the Cart page, please see our detailed documentation here.

Social sharing

Allow customers to share your products right from the product page by toggling these icons:

Product Media

The Media settings control the product image, thumbnails, zooming, and video looping features. This provides a more detailed view for customers when viewing a stores products.

Size

Set the size of the main product image. This can be set to Small, Medium, Large or Full width.

Thumbnail position

Control where the thumbnails sit on the product page. Thumbnails can be set to be either underneath, to the right or left of the main product image.

Image Zoom

Enable or disable zooming on Images when hovering over the product image.

Video Looping

Enable/disable looping on any videos added to the product descriptions.

Note:

For more information on Product Media types, please see Shopify's documentation here.

Reviews

Reviews allow your customers to review your products after purchase. Toggle between hidden and visible.

Review stars appear under your product title:

Note

This feature requires the Product Reviews app by Shopify. We recommended installing this before enabling this feature on the theme.

Product Reviews