Product page

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

What is the product page?

A well crafted product page helps customers to discover and love your products. It's the storefront powerhouse detailing the benefits, product features and key selling points. The Symmetry theme offers a wealth of settings to enable you to customize the layout to suit your brand. A beautifully 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. 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.

Settings

The product template is divided into two columns on larger screens, with the product media on the left side and the product form on the right side. 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. 

Select Show breadcrumbs to show a breadcrumb trail at the top left of the product page on larger screens.  Choose to show the collection from which the customer navigated to the product page, by selecting Theme Settings > Product cards > Include collection in URL.

Sticky 'Add to cart'

In version 7.2.0 and above, a Sticky 'Add to cart' setting is available. This is a small overlay summary of the product, which shows as a floating prompt when customers have scrolled past the main product details.

Steps

  1. Open the Theme editor
  2. Select Products from the dropdown at the top and choose the desired product template (e.g. Default product).
  3. In the main Product pages settings, select Enable sticky 'Add to cart'.
  4. There are two Behavior settings that can be selected:
    Add to cart - This will show a button that will allow customers to add products to the cart.
    Scroll - This will show a 'View details' button which will scroll back to the top of the product page, once selected.

Media layouts

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

Carousel layouts

The carousel layouts in the theme offer 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 Carousel - thumbnails left layout will show all thumbnails in a vertical line to the left of the main image. This option is not advisable if you have a lot of thumbnails. 

Product-page-layout-1.png

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. 

Product page 2.png

Tip

Control whether the first available variant is selected when the customer first lands on the page using the setting Select the first available variant in the Variant picker block. In version 7.2.0 and above, this setting is located at the top of the main Product pages settings.
 
If the two sides of the page becomes very uneven in height due to a lot of product content in the right hand product form, then it can be useful to select Enable stick on scroll. In version 7.2.0 and above, this setting is called Enable sticky columns.

Adjusting image size

Set the Size of images: Small, Medium or Large.

Show a caption over product images

An alt text caption and icon can be shown over the image which can be used to provide extra information about the image. A clothing example could be to show details about the size and color of the item shown on the model. 

Video controls

Control the video behaviour for videos added as product media by choosing to Autoplay videos (not carousel layout) and Enable video looping.  A product video playing in the stacked layout can be an eye-catching way to attract customers' attention. 

Media grouping

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

In Symmetry themes after version 7.0.0, if there is a lifestyle image or video which needs to show for all groups this can be added just once and shown for all media groups.

Please refer to the Media grouping 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 promotions, 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, inventory level, fit/feature, countdown 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; Buttons and Dropdown

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

Deselect the setting Select first available variant where it is important to ensure the customer makes a variant choice, rather than defaulting to the first available variant, or where it is desirable to show the main product image when the customer first lands on the product page. This can be useful if the main product image is a lifestyle image. In versions after 7.2.0, this setting is located at the top of the main Product pages settings.

Dynamic availability 

In version 7.3.0 and above, there is a Dynamic availability setting which enhances the previous Show availability in selectors setting. This setting provides three options that can be used to indicate which variants are available for purchase.

  • Off - Availability is not shown in the variant picker options.
  • Show - Unavailable options will be greyed out. After each option is selected, the options below are updated to show their availability.
  • Prune - Unavailable options will be removed from view, instead of being greyed out. 

Swatches

Color options can be shown as swatches. Refer to our Swatches guide for more details on how to setup swatches and choose the Swatch variant picker style.

Size guide

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

Buy buttons block

Controls to Show quantity selector, Show dynamic checkout button, Show backorder text, Show pickup availability and the option to Show recipient information form for gift cards are all held in this block. 

Custom option block

The Custom option block can be used to allow customers to add specific information or instructions to their order such as engraving, personalisation, customer preferences or free gift wrap.

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)
  5. Rename your custom option and ensure that the name is unique

Note

Ensure that each custom option has a unique Label.
Text and long text can be set to required if the Add to Cart button is used. They will not be required when using accelerated checkout methods. 

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. 

Rich text and text block

The rich text and text block include the option to add an icon and a box style presentation useful for highlighting product features. 

Inventory level block

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

stock pulse.gif

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. 

Fit/Feature rating block

Adds a Fit/Feature rating block on the product page. Refer to the Fit/Feature rating block user guide for more details.

Countdown timer block

This block offers a countdown timer in a box to build hype, advertise sales and create anticipation for future coming promotions. Customize the box color, font, divider and behavior.

Barcode block and SKU block

The theme includes separate SKU and Barcode blocks which will automatically update based on the selected variant.

Vendor block

The vendor block shows the product vendor.  It will automatically link to a page showing all products by that vendor. If you'd prefer this link to go to a specific collection page, give that collection page the same handle as the vendor page handle. Follow the steps below to do this.

Steps

  1. In the Shopify admin area, go to Products > Collections and click on the relevant collection.
  2. Scroll down to the Search engine listing panel, and click Edit.
  3. Change the URL handle of the page to match the handle of the vendor. The handle of the vendor will normally be a lowercase version of the vendor name, with dashes instead of spaces. For example, if the vendor name is 'Example vendor', the handle should be 'example-vendor'.

Sharing block

Make it easy for customers to share links to your products using the sharing block with individual settings for X (formerly Twitter), Facebook and Pinterest.

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. This block does not show sold out products or products that are already in the cart. 

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 can be used to link to other products. Select products to show in the editor or use a product metafield of type 'product list' to show different items for each product. Refer to the Product list block user guide for more details.

Cross-selling

Suggesting other related products and cross-selling is a key function of the product page. The complementary products block and the product list block can be used for this purpose. In addition, the related products section, which exists on the product template, can be used to showcase other products. 

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

The Preorder template creates an alternative-looking product page that allows customers to purchase products that aren't currently in stock. Products assigned to the Preorder template will display a 'Pre-order' buy button.

Note

Make sure to set your products to "Continue selling when out of stock" Otherwise Shopify will display the "Sold out" button.

Steps

  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 cards > Labels beside price and make sure the toggle is active for the Show pre-order label.
  6. Save changes.

Tip

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

Important

The theme has to be published before the Shopify dashboard will provide the option of assigning templates to products.

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

Where can I find the quick buy settings?

Set the quick buy style in Theme settings > Product cards > Quick buy link style. Control which product page blocks appear on the quick buy using the Show in quick buy setting that appears in most blocks. Choose the color for the quick buy in Theme settings > Colors > Product quick-buy > Color scheme

How do I show different content per product?

Content for blocks such as the collapsible tabs block can be drawn from text product metafields. This can be useful for care or sizing information, materials, ingredients or many other product specific details. Metafields and metaobjects are a standard feature in Shopify. Refer to the Shopify metafields tutorial for more information. 

Steps

  1. To use metafields to hold product specific content shown in a collapsible tab on the product page, open the Shopify admin and go to Settings > Custom data.
  2. Click on Products to create a new product metafield for your content. The metafield should be a type that can contain text. There are several types available.
  3. In the Shopify admin, go to Products, edit a product and find the newly created metafield. Enter your content in the metafield and save the changes. There are also bulk editing options for products available in Shopify.
  4. Open the Theme editor, and select Products and the desired product template from the dropdown at the top.
  5. View the product page and scroll to your collapsible tab block. Next to Tab content select the Connect dynamic source icon to add your metafield/metafields. 

Metafields of the appropriate type held in metaobjects can also be used.

Note

The Bulk Editor is a helpful tool to quickly update metafields and other attributes across all your products.
Bring your business ideas to life with Shopify

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