Product page

Emphasize exciting benefits, features, and details of your products.

What is the product page?

The product page is the storefront's powerhouse where many benefits, features and product details can be communicated to potential customers. The Mode theme offers a plethora of settings and options that can assist in increasing 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.

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

The Carousel - thumbnails below layout will show thumbnails below 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. 

Tip

Control whether the first available variant is selected when the customer first lands on the page using the setting Select first available variant in the Variant picker block.
 
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 the main Product pages settings.

Adjusting image size

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

Video control

Control the video behaviour for videos added as product media by selecting 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.  

Please refer to the Media grouping article for more detailed guidance about how to set this up. 

Product labels

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, pop-up, 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 style on the product page; Box with label 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 Mode theme you can control this using the setting Variant picker > Show for a single variant.

Tip

Deselect the setting Select first available variant 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). This setting can also be useful if the main product image is a lifestyle image or shows all the available colors.

Select Show availability in selectors to indicate to customers which options are available.  After each option is selected, the options below are updated to show their availability.

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 using files or the variant images. Refer to Swatches for more details.

Buy buttons block

Controls for showing or hiding the quantity selector, dynamic checkout button, backorder text, pickup availability and gift card recipient info are all held in this block. 

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

Caution

Custom option blocks of type Text and Long text can be set to be required only 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 Mode 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 to show the description at full-width below the product images, 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. 

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. 

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.

Tip

  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.

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.

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 > Overlay labels and select 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 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 view style. Control which product page blocks appear on the quick buy using the Show in quick buy setting that appears in most blocks.

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