Product page

The product page is the storefront powerhouse. Discover its many features.

What is the product page?

The product page is the storefront powerhouse where the many exciting benefits and features of products can be detailed and key selling points emphasized. A well constructed product page can help to increase conversion rates, promote upselling, reinforce brand identity and improve search engine rankings. 

How to set up the product page

Steps

  1. From the Shopify admin area, go to Online store > Themes > Customize.
  2. Select Products from the dropdown at the top and choose the desired product template (e.g. Default product).
  3. Click on Product pages to edit the product page and product media settings.
  4. In the Media settings, select a Layout from the six available options and set the media Size.
  5. Choose whether to show the product description in the Description block on the right, or full-width under the product media and product form using the setting Show description below media. 
  6. Select one of the pre-loaded blocks to begin customizing its settings, or click Add block to choose a block from the list. 

Tip

All settings here will be applied to all products using the selected template, not just the product currently in view. To show different blocks or sections on different products, assign alternative templates or, for an individual approach, use Shopify metafields to add unique content.

MEDIA layouts

The theme has six different media layouts for the product page on large screens. These can be broadly divided into two types: carousel layouts, where there is one larger dominant image, and column/collage layouts, where images have more equal prominence. 

Note

Even if a Column or Collage layout is selected, the Carousel will always show on mobile. 

Carousel layouts

The theme includes two Carousel layouts with a choice of thumbnail position. These layouts can be a good choice when the product has a lot of images or when images are inconsistently sized.

The Carousel - thumbnails below layout will show thumbnails below the main image. The thumbnail slider is cropped to fit neatly below the main image. 

The Carousel - thumbnails left layout will show all thumbnails in a vertical line to the left of the main image. 

Column and Collage layouts

There are four Column and Collage layouts. These views work best when the product images are consistently sized, and when it's desirable for all available images to be in view.

When a variant is selected, the focus moves to the image linked to that specific variant. In the Column and Collage layouts, the page will automatically scroll vertically such that the relevant image is in view. For example, when the 'Red' dress is chosen, the 'Red' image will be scrolled to and focused on. If this behaviour is not desirable when first landing on the page then deselect the setting Select first available variant in the Variant picker block. 

Adjusting image size

Set the size of images under Media > Size. Select Small, Medium or Large.

Note

If the two sides of the page becomes very uneven in height (i.e. a lot of product content in the right hand product form and few images or vice versa) then it can be useful to select Product page > Enable stick on scroll.

media-size.jpg

Media grouping (for multiple variant images)

If product images are neatly arranged by color (e.g. selling the same top in different colors), the Show media associated with the selected variant setting can be used to show images of only the selected color i.e. selecting the option 'Red' will only show the red images of the dress.

Please refer to the Grouped variant media article for more detailed guidance about how to set this up. 

Product labels

In the Symmetry theme, labels can be shown over the image on the product page to communicate important details such as pre-order, new in, sold out and on sale. Refer to product labels for more.

Blocks

There are a large range of blocks to choose from that can be used to improve functionality or enhance the appearance of the product page. The divider, custom option, text, rich text, popup, image, link, collapsible tab, custom liquid and product list blocks can be added as many times as required - all other blocks are limited to one instance each.

Steps

  1. From the Shopify admin area, go to Online store > Themes > Customize.
  2. Select Products from the dropdown at the top and choose the desired product template.
  3. Click Add block to choose a block from the list to add to the section, or select one of the pre-loaded blocks, to begin customizing its settings.

Variant picker block

There are two options for the variant picker style on the product page: Box with label and Dropdown. 

Box with label

variant-box.jpg

Dropdown

variant-dropdown.jpg

For single variant products it can sometimes be preferable not to show a variant picker. If only one option exists then there is no need for the customer to choose. For other products it's key that the product options are displayed. In the Symmetry theme you can control this using the setting Variant picker > Show for a single variant.

Tip

For products where it's desirable to show the main product image when the customer first lands on the product page or to ensure the customer has made a variant choice (rather than just defaulting to the first available variant) deselect the setting Select first available variant. This setting can be used if the main product image is a lifestyle image or where the main product image shows all the available colors or sizes. 
Size chart

Show a size chart link under the size option. Refer to Size charts for more details. 

Swatches

Color options can be shown as swatches. Refer to Swatches for more details.

Custom option block

Add additional custom content blocks for personalised products, customer details or additional product preferences. 

Steps

  1. From the Shopify admin area, go to Online store > Themes > Customize.
  2. Select Products from the dropdown at the top and choose the desired product template.
  3. In the left-hand settings panel, click Add block and select Custom option. 
  4. Choose the appropriate custom option type - Text, Long text, Checkbox or Multiple options (dropdown menu or radio buttons)

Caution

Custom option blocks of type Text and Long text can be set to be required if used with the Add to Cart button. The text cannot be required if the Buy it Now/Dynamic checkout button is used. 

Description block

In the Symmetry theme, the product description can be shown on the right of the product page or full-width below the product media and product form.

Steps

  1. From the Shopify admin area, go to Online store > Themes > Customize.
  2. Select Products from the dropdown at the top and choose the desired product template.
  3. Click on the Description block.
  4. Choose whether to show as a tab, if the tab is open by default and whether to show in quick buy. 
  5. If the setting Product pages > Show description below media is used, click Remove block or use the eye icon to hide the description block. This will avoid showing the product description twice. 

Collapsible tab block

Organize content and declutter product pages by using collapsible tabs. This can help keep product card content above the fold.

Steps

  1. From the Shopify admin area, go to Online store > Themes > Customize.
  2. Select Products from the dropdown at the top and choose the desired product template.
  3. Click to Add block and select Collapsible tab (it is possible to add multiple Collapsible tab blocks)
  4. Choose the Heading, Icon (optional) and Tab content. Content can be added directly to the tab in the theme editor, pulled from pages or metafields.
  5. Choose if the tab should be open by default and whether it should show in the quick buy. 

Inventory level block

The Inventory level block is an excellent way of providing customers with a visual representation of stock levels and creating a sense of urgency to encourage a quick purchase. It can be used for products where Shopify tracks the quantities in stock. 

Steps

  1. From the Shopify admin area, go to Online store > Themes > Customize.
  2. Select Products from the dropdown at the top and and choose the desired product template.
  3. Click to Add block and select Inventory level.
  4. Set the Low inventory threshold.
  5. Choose whether to Show inventory notice at all times or only when inventory is at or below the low inventory threshold.
  6. Decide when to display a stock level count in the message. The count can be set to show Only when inventory is low to avoid displaying high stock levels. 
  7. Adjust the styling of the notice using the pulse, box and color settings. Set the colors for the inventory level warning in Theme Settings > Colors. 

Inventory transfer notice

In addition to the inventory level block there is also an option to display a notice as to when customers can expect new stock to arrive by selecting Product pages > Show inventory transfer notice under the price. This will show the expected date that inventory is due to be received based on inventory settings. 

Cross-selling

Suggesting other related products and cross selling is a key part of the product page. There are several blocks and sections that are specifically designed for this purpose. 

Complementary products block

To further enhance the functionality of the product form, the Complementary products block can be used in conjunction with the Search & Discovery app to display a range of related products.

Customize the block Heading using the text input provided, adjust the Maximum products to show with the range slider, and set the layout to Enable Carousel if required. 

Product list block

The product list block offers similar functionality to the complementary products but, unlike the complementary products block, it will also show sold out products and products that are already in the cart. Select products to show in the editor or use a product metafield of type 'product list' to show different items for each product. 

Related products section

The recommendation logic that controls which products are displayed to customers is not determined by the theme, but by the Shopify platform. This is the same for all themes. Use automated recommendations or create specific recommendations using Shopify's Search & Discovery app.

Note

Settings applied to the Default product template (or any other template) will affect all products using that template, not just the product currently being viewed. To learn more on the topic of using unique templates to represent the varying needs of products, refer to Shopify's guide on Templates. 

Preorder template

Use this template to display a Pre-order button.

preorder-template.jpg

Tip

  1. From the Admin, go to Products. Select the product to be assigned to the preorder template. (Please note theme must be published in order to select the template)
  2. Under Theme template, select preorder.
  3. Save changes.
  4. From the Admin, go to Online store > Customize.
  5. On the left-hand side panel, choose Theme settings > PRODUCT GRID > Labels beside price and make sure the toggle is active for Show pre-order label.
  6. Save changes.

Creating more than one preorder template

To create a new preorder template, base it on the existing preorder template and include the word preorder (no hyphen) in the name.

FAQs

How do I show breadcrumbs?

The Symmetry theme includes the option to Show breadcrumbs on the product page. Choose whether they include the collection name using the setting Theme Settings > Product grid > Include collection in URL.

How do I hide the Buy it Now/dynamic checkout button?

Dynamic checkout buttons or "Buy it Now" show under the main add to cart button on the product page and allow a customer to proceed directly to the checkout with just one item. Switch this feature off using the Buy block settings. Refer to the Shopify article Adding and removing dynamic checkout buttons for more details. 

How do I add an image zoom?

An image zoom can be enabled under Product Page > Media > Enable image zoom. It is not possible to set the strength of the zoom.

Sign up for Shopify today for $1

Can't find what you're looking for?

Our support staff are here to answer your queries, so don't hesitate to write to us!

Contact us