Product page – User Guides

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

From the Shopify admin area, go to Online store > Themes > Customize.
Select Products from the dropdown at the top and choose the desired product template (e.g. Default product).
Click on the words Product details to edit the product page and product media settings.
Choose the preferred product Media layout from the two available options under Thumbnails position.
Choose whether to show the product description in the Description block on the right, or under the product media and product form using the Description position options.
Click on the Buy buttons block to further configure the layout, selecting options such as Show quantity selector, Show dynamic checkout button and Show inventory level.
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.

Thumbnail positions

The theme has two different thumbnail positions for the product page. The first option is Beside the main image, which places a vertical stack of thumbnail images to the left of the main product image and the second is Below the main image, which displays thumbnails horizontally, underneath the main product image.

Note

Even if a Beside the main image, or Below the main image layout is selected, a carousel will always show on mobile.

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 as many times as required - all other blocks are limited to one instance each.

Steps

From the Shopify admin area, go to Online store > Themes > Customize.
Select Products from the dropdown at the top and choose the desired product template.
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.

Description block

In the Expression theme, the product description can be shown on the right of the product page or below the product media and product form.

Note

Choose whether to show the product description in the Description block on the right, or under the product media and product form, using the Description position options found in Product details.

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.

Note

Settings and sections applied to the Default product template (or any other template) will affect all products using that template, not just the product currently being viewed.

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 article 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 Adding and removing 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't find what you're looking for?

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