Product page

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

What is the product page and why is it important?

Your product page is your storefront's powerhouse where many exciting benefits, features, and details of your products can be emphasized. Showcasing beautiful imagery on your product page is just one way of the many ways to create an emotional impact that empowers customers as they make purchasing decisions!

How to edit your product page

To begin crafting a finely-tuned layout in accordance with the guides below, first we have to navigate to any product using the Shopify Theme Editor, or simply select Product page from the dropdown list at the top of the Editor: 

products-list.jpg

Note

Settings applied to your Default product template (or any other template) will affect all products using that template, not just the product you are currently viewing. To learn more on the topic of using unique templates to represent the varying needs of your products, check out our guide How to create unique product page templates.

Pre-order template

Use this template to display a dedicated Pre-order button:

mode-preorder-template.jpg

Tip

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

Creating more than one pre-order template

When creating a template, include the word preorder (no hyphen) in the name, and a pre-order product template will be created. You can base the new template on an existing pre-order template (recommended), but ensure to include ‘preorder’ in the name when creating it.

Variant media grouping (for multiple variant images)

This feature allows you to display only the images associated with the selected variant only and hides the rest until called upon. For example, all images containing a ‘red’ dress would display when the red variant is selected and hide all images associated with a ‘green’ dress (inversely when the ‘green’ variant is selected). To implement this feature, check out our guide! — Media grouping

Product card color set-up

Product labels

Custom labels

Add labels with your own custom text to individual products using metafields.

Steps

  1. From the Admin, go to Settings > Metafields.
  2. Select Products > Add definition. Add Name: Theme label and for Namespace and key: theme.label
  3. Under this, select Content type: Text (Single line text) and save.
  4. From the Admin, access any product you'd like to add a custom label to, scroll down to the bottom of that product's options page, and you will see your new metafield. Here, simply type your desired label text and that’s it!
  5. To change the label's color, from the Admin, go to Theme settings > Colors. Search for Custom text and change the color of the label. Save.

New in label

Display a ‘New in’ label on products, controlled by Tag, Collection, or Date.

Steps

There are three ways to display the ‘New in’ label: Collection, Tag, and Date.

  1. Collection — Create a collection that incorporates the word New and any products in it will display a New in label.
  2. Tag — Add New (case sensitive) as a tag for the products you wish to display the label.
  3. Date — Any product that has been created (not published date) will show the label as long as it falls within the number of days you have set on the slider.

Tip

To change the New in text. Go to the Language Editor by clicking Actions > Languages. Search for New in, update the text to reflect your preferences, and save the changes.

Custom option content blocks

Capture customer information directly on the product page using these four options:

  • Text
  • Long text
  • Checkbox
  • Multiple options (dropdown menu)

Steps

  1. From the Admin, go to Online store > Themes > Customize.
  2. Select Products from the dropdown at the top of the editor window and go to Default product.
  3. In the left-hand settings panel, click Add block and select Custom option (you can add multiple Custom option blocks).
  4. Choose which Custom option block you want, customize the label and set it as a required step (if you wish). Save your changes.

Tip

Settings applied to your “default product” template (or any other template) will affect all products using this same template, rather than just the individual product you are viewing. To understand more about using different sections for different products, see our guide How to create unique product page templates.

Product tabs & accordions

Organize your content and declutter your product pages by creating tabs and accordions. This will help keep as much of the product card content above the fold.

Steps

  1. From the Admin, go to Online store > Themes > Customize.
  2. Select Products from the dropdown at the top and go to the Default product.
  3. Click to Add block and select Collapsible tab (you can add multiple Collapsible tab blocks).
  4. Choose the heading, icon (optional and only available on theme version 5.1.0) and content. Content can be added directly to the tab in the theme editor, pulled from pages or by using metafields.
  5. You can also choose if you want the tab open by default and whether you want it to show in quick buy. Save your changes.

Tip

All settings here will be applied to all products, not just the one you are on. If you are looking to have different sections on different products, see our ‘unique product page templates’ guide or check out Shopify’s guide on ‘metafields‘ which can also be used to add unique content to products.

Hide Buy it now dynamic checkout buttons

Dynamic checkout buttons include PayPal, GPay, Apple Pay, Amazon Pay and more. For further information on hiding these buttons, please refer to Adding and removing dynamic checkout buttons.

Steps

  1. From the Admin go to Online store > Themes > Customize.
  2. Select Products from the dropdown at the top and select Default product.
  3. Click on the Buy buttons block in the menu.
  4. Uncheck the Show dynamic checkout button checkbox. Save your changes.

Note

If the button is still showing on the collection pages (an occurrence with some theme versions), this additional step is required:

  1. Access Theme Settings.
  2. Click on Products.
  3. Uncheck the Show dynamic checkout button. Save your changes.

Show/hide product vendor

Toggle this setting via the dedicated content block. Click the eyeball icon when hovering over the content block to switch between hidden or visible:

vendor.jpg

Enable/disable image zoom

Locate the checkbox Product pages > Media > Enable image zoom, to disable or enable image zoom. You cannot set the strength of the zoom.

Size chart

Refer to Size charts

Swatches

Refer to Swatches

Product page story

Add sections to your product page's default layout, such as Gallery, Slideshow, or any other section that you feel would enhance your product and customer experience.

Product recommendations

This section is sometimes referred to as You may also like or Cross-selling or Suggested products. The recommendation logic that controls which products are displayed to your customers is not determined by the theme, but by the Shopify platform.

This is the same for all themes. You can now control this by creating your own product recommendations under Shopify's Search & Discovery app.

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