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. Open the Theme editor and select Products from the dropdown at the top to choose the desired product template (e.g. Default product).
  2. Click on the words Product details to edit the product page and product media settings.
  3. Choose whether to show the product description in the Description block on the right, or under the product media and product form using the setting Description position.
  4. Choose the preferred product Thumbnails position for the product Media on larger screens - Beside the main image or Below the main image. A carousel is always used on mobile.
  5. 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.

Blocks

There are a range of blocks to choose from that can be used to improve functionality or enhance the appearance of the product page. The Divider, Rich text, Image and Custom liquid blocks can be added multiple times, all other blocks are limited to one instance.

Steps

  1. From the Shopify admin area, go to the Theme editor.
  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.

Title block

Displays the product title. 

Price block

Shows the product price and, if the variant is reduced in price, the Shopify compare at price. Sale prices use the Sale price color. 

Tax and shipping information can be displayed under the price. The currency can be shown using the settings in Theme settings > Currency.

Reviews summary block

To display a rating add the Reviews summary block into the product form where required, and install a product reviews app. 

Description block

In the Expression theme, the product Description can be shown as a block in the product form on the right of the page. Alternatively by using the Description position setting in the main Product details settings, it can be shown below the product product media and product form. 

Variant picker block

Variant pickers can be Listed as boxes or shown in a Dropdown. This variant picker style is managed using the Variant style setting in Theme settings > Products. Swatches can be used to display color variants and have a Swatch variant picker style setting in Theme settings > Swatches. Our Swatches user guide explains more. 

Within the variant picker block settings, choose whether to Show for a single variant. If a product only has one variant (e.g. Color: blue) it might be unnecessary to display the option name and value on the product page. 

Use the Enable size chart setting in the variant picker block to show a link to a size guide page which will open an overlay window showing the selected page. Enter the Option name, usually 'Size', in the setting and select the page to be shown.

Buy buttons block 

The Expression theme Buy buttons block includes controls to manage the buying process. Choose whether to Show quantity selector and use Show dynamic checkout button to display additional checkout options. 

The setting Show pickup availability is used for items that can be collected from stores. Show backorder text for items where the inventory is managed by Shopify but they are available to purchase when out of stock. The setting Show recipient information form for gift cards allows customers to email gift cards to a specific recipient with a personal message. 

Select Show inventory level to display the current stock quantity . Set the Inventory level threshold. Inventory quantities will be shown below this threshold or if zero is selected the full inventory level will be displayed. 

SKU block

Shows the SKU for the selected variant. 

Vendor and Type block

Shows the product Vendor and Type chosen in Admin > Products. 

Custom liquid block

The Custom liquid block is for developers who require a block in which to add liquid code. 

Divider block

Use the Divider block to add a dividing line between different blocks.  

Image block

Additional graphics can be inserted into the product form by adding an Image block. 

Rich text block

The Rich text block includes the option to add text and links.  

Share block

Make it easy for customers to share links to your products.

Cross-selling

Suggesting other related products and cross selling is a key part of the product page. There is the Complementary products block and Related products section 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.

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.

FAQs

How do I change the variant picker style?

The Expression theme includes two options for displaying variants on the product page. Choose from either Listed or Dropdown via Theme Settings > Products > Product form > Variant style. Swatches can also be used to display colors or materials. Refer to our Swatches user guide for more details.

Can I change the quantity selector style?

The quantity selector will always be shown as a dropdown but it can be hidden in the Buy buttons block. It can also be configured to only show the quantity available in stock via Theme Settings > Products > Product form > Hide unavailable quantity options.

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 buttons block settings. Refer to the Shopify article about dynamic checkout buttons for more details.

How do I show the inventory level?

The inventory level for a product where the stock is managed by Shopify can be shown above the buy buttons. Switch this feature on or off and set the Inventory level threshold in the Buy buttons block.

Can I show a link to a size guide?

Versions of the Expression theme after version 10.0.0 can show a link to a size guide. Use the settings in the variant picker block to select the option and page to display.

Does the theme support 2048 variants?

Versions of the Expression theme after 10.0.0 support 2048 variants.

Does the theme support combined listings?

Versions of the Expression theme after 10.0.0 support the Shopify combined listings app.

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