Product page

What is the product page?

The Product page is arguably one of the most important pages on any store. It's where customers can access in-depth product information and learn about other products they might be interested in. More importantly, it’s where purchases are most frequently made, and as such, an effective Product page is essential for any Shopify store.

A well constructed product page can not only help to increase conversion rates and promote upselling, but also reinforce brand identity and improve search engine rankings.

How to set up the product page

The Product section of the page template is divided into two columns, with the product media on the left side and the product form on the right hand side.

The Product details section can also be used to show additional information directly beneath the product media. To do this, ensure it is placed immediately below the Product section, e.g:

Settings

In version 1.6.0 and above, the Select first available variant setting is present. To ensure customers make an intentional selection and don't default to the first available variant, deselect the Select first available variant option.

This setting is particularly helpful when you want the main product image, such as a lifestyle shot, to remain visible when a customer first visits the product page. It also encourages users to engage with the product variants and ensures that they actively choose their preferred option. This could potentially enhance the shopping experience and reduce the risk of accidental purchases.

Enabling the Sticky 'Add to cart' prompt setting will show a small overlay summary of the product information that can be used to scroll the page back to the product form when it is no longer in view. This provides a convenient way for the customer to return to the product form once they've scrolled passed it.

Stacked layout

The Stacked layout shows all the product images at the same time, stacked on top of one another. This view works best when your product images are consistently sized, and when you're keen for customers to see all available images.

When a variant is selected the image to focus on needs to change. In the Stacked layout, the page will automatically scroll such that the relevant image is in view. For example, when the 'Red' dress is chosen, the 'Red' image will need to be scrolled to and focussed on. Similarly, when the page first loads if the 'Red' dress is the default variant, the page will scroll such that the 'Red' image is in view.

Experiencing this scroll when the page first loads could be jarring or confusing for customers. To avoid this, ensure that the image of the default variant is ordered to be first in product page editor of the Shopify admin area.

Alternatively, the Scroll to variant media setting could be set to When the variant is changed or Never instead.

Note, the Underline active media setting will underline the relevant image/video when the variant is changed.

Slider layout

The Slider is the best option when it's not too important for customers to see all images, or when your images are inconsistently sized. Mobile devices will always show images in a slider.

Refer to the theme settings for advanced controls over how and when the thumbnails show, and whether arrows/product counts show on the Slider.

Note, the Colors settings can control the color of the slideshow. See the next section for more.

Media cropping

Enterprise caters particularly well for inconsistently sized product imagery. The Media width, Media aspect ratio and Media crop can be adjusted to best work with your product images, and the desired page layout. 

Use the settings under Colors to adjust the Media border and Media background color.

Multiple variant images

If product images are neatly arranged by color (e.g. selling the same top in different colors), the Show media only associated with the selected variant setting can be used to show images of only the selected color i.e. selecting the 'Red' dress will only show the red images of the dress.

Please refer to the Multiple variant images article for more detailed guidance.

Zoom

A product zoom is available in Enterprise which allows customers to zoom in to specific areas of product images. To use this feature, ensure that the Enable zoom setting is selected, and choose from the following options in the Zoom mode on large screens setting.

Magnify on click - Click once on the product image and it will zoom in.

Magnify on hover - Hover over the image and it will automatically zoom in.

Open lightbox - Click on the image and a new window will open. Clicking on the image a second time will, if possible, zoom in further. If selecting to open the lightbox, within the Thumbnails setting decide whether to Show thumbnails on slider or not.

Set the Zoom level for the Magnify on click and Magnify on hover options.  It is not possible to magnify the image beyond the original image size.

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 section. The Collapsible content, Custom Liquid, Divider, Image, Pop-up, Rich text and Flash message blocks can be added as many times as required - all other blocks are limited to one instance each.

Variant picker block

The Variant picker block is used to display pertinent product information such as colour swatches and sizes. Use the settings provided to adjust the Selector style (Buttons or Dropdown) and Show backorder text visibility.

The Enterprise theme can show variant availability to make it quick and easy for your customers to find out which product variants are in stock and can be purchased. The Show availability in selectors setting will indicate availability using a diagonal line or text.

If the Show availability in selectors setting is chosen, this will be updated each time the customer changes their selection. A second setting, Update availability only in subsequent options, can be used to refine this behaviour so it works using a top down method. This cascading approach is particularly useful in stores where products have combinations that are unavailable or frequently sold out. When an option is selected, only the option below it is updated to show availability. To choose this method select both Show availability in selectors and the additional setting Update availability only in subsequent options.

Under Size chart, there are customizable settings to Enable size chart and adjust the Option name (e.g. Size), as well as to select the Page containing the size chart. (Pages can be set up in Online store > Pages). A page metafield can be used if different products require different size charts. 

Inventory status block

The Inventory status block is an excellent way of providing customers with a visual representation of stock levels.

By choosing the Show inventory indicator bar setting, a thin horizontal indicator bar will display a visual representation of the current stock levels.

Under Urgency messages, a number of inputs have been included that can be used to set custom text to display when stock levels reach a particular level. The visibility of these messages can be set with the Show urgency message setting.

Inventory colors and thresholds can be customized in Theme Settings > Product Inventory. See the Product inventory indicators guide for more.

Product sign-up block

The Product sign-up block will allow customers to enter their email address and subscribe to receive updates about a product. You will receive an email every time someone fills in this form. 

This block can used as a 'Back in stock' notifier, when the Only show when the product is not available setting is ticked.

Pop-up block

A Pop-up can be added to the product form which can be used to display additional details and information such as size charts.

Use the Link text input to customize the link itself, and the Link style dropdown to select whether the link displays as a Primary button, Secondary button or Link (text link).

The Content to display in the Pop-up can be entered in the input provided, or by selecting a page created in Online Store > Pages using Content from page > Select page.

Product rating block

To display a rating add the Product rating block into the product form where required, and install a product reviews app if you haven’t already. Refer to the Product reviews guide for more.

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 either Carousel or List as required.

Flash message block

The Flash message block can be used to create urgency around a product. There are settings included to customize the appearance and functionality of the block, including the Icon, Message, Close button and Style.

Refer to Flash messages for a full guide.

Product labels block

Use the Product labels block to further enhance the product form. See the settings in Theme settings > Product labels to customize the content, colour and visibility of product labels.

Refer to Product labels for a full guide.

Image block

Additional graphics can be inserted into the product form by adding an Image block. With the Image block selected, enter a Heading in the input provided (if required), select the Image source, adjust the image Width and Alignment and add a Link to the image (if required).

The image block is a useful way of adding any promotional banners, e.g:

Vendor / SKU block / Barcode block

The Vendor / SKU / Barcode block can show the vendor, SKU and barcode side-by-side. The SKU and barcode will automatically update depending on the selected variant.

The barcode can also be added as a separate block using the Barcode block.

If you require the vendor and SKU to be on separate lines, using this block to just show the SKU and then add a Rich text block, and use a Dynamic source to show the vendor. 

Weight block

The weight block will display the variant weight.  If all variants have the same weight, then the weight can also be displayed on the product cards using the setting Theme settings > Show product weight.

Share block

Add the Share block to display links to Facebook, X (formally known as Twitter) and Pinterest.

Link block

In version 1.6.0 and above, the Link block is available which allows a clickable URL to be added to the page. This can be styled as a link, primary or secondary button.

Custom option

In version 1.6.0 and above, the Custom option block is available and allows customers to insert specific information or instructions to their order, such as engraving, and it is available in four different formats:

Text - a simple single line text. 

Long text - provides a larger area than standard single line text option.

Checkbox - provides a checked value and an unchecked value, both of which can be customized.

Dropdown - provides a list of options that appear when the dropdown arrow is clicked.

Product details section

The Product details section can be used to show additional information directly beneath the product media. To do this, ensure it is placed immediately below the Product section, e.g.

If the Product details is not placed immediately below the Product section, its content will be shown as a larger section, centred in the page.

Tabs block

Tabs are a great way to present additional product and/or brand information to your customers in a visually interesting way, to avoid overloading the product form.

The Tabs style can be set to either Collapsible content (shown above) or Horizontal tabs, and can contain the product description, product reviews, specifications (see below) or up to three custom pages.

Tabs block - Specifications tab

The products on your store may have custom data, such as height, weight, energy rating, warranty, etc, all of which is very useful for customers to see. This information can be displayed in the Specifications tab.

The data firstly needs to be set up as Metafields in Shopify admin area > Settings > Custom data > Metafields > Products, and then each product needs to be updated (e.g. to set the 'Warranty' of each product). For more on this process, read Shopify's Creating custom metafield definitions guide.

Once Metafields have been set up, the Metafields block can be added in the Specifications tab. Ensure that the labels and metafield keys have been added in the correct format.

In the above, 'Warranty' is the label shown in the tab, and 'custom.warranty' is the metafield key as set in the Shopify admin area, as seen below.

Up to 3 Custom tabs can also be added to the block, with inputs available to customize the Title and Content, as well as the option to select Content from page. (Pages can be set up in Online store > Pages).

Highlight text block

The Highlight text block is great way of presenting key product features or USPs in an impactful typographic composition.

If two or more Highlight text blocks are added in succession, they will tile in a two column layout.

The Title entered will display in the site headline font, and the smaller accompanying Text in the site body font. If you want to display general information that will be the same for all products assigned to the Product page template, use the inputs provided. Alternatively, you can connect Dynamic sources to display product-specific information.

Payment & Security block

The Payment & Security block can be used to display trust-building information such as accepted payment methods.

The main block Title can be set in the input provided, and specific content added for the Payment methods including Title and Text, and whether nor not to Show payment icons.

Under Secondary content, additional information can be added to the block using the Title, Image and Text settings. This can be a great way to show additional trust icons to help build customer confidence.

Product page templates

Highly customizable and packed full of powerful features, product page templates can be tailored to present alternative looking product pages. By developing a range of product page templates, with different features and functionality, it is possible to create a highly effective store full of variety and visual interest. 

Once created, the templates can be assigned to individual products by editing the product within the Shopify dashboard: 

By default, Enterprise ships with three product templates, described in this section.

Preorder template

The Preorder template allows customers to purchase products that aren't currently in stock. Products assigned to the Preorder template will display a 'Pre-order' label in the product card.

The icon/color settings for this can be edited in Theme settings > Product labels > Preorder label.

To set your product to this template, select the preorder option from the Theme template dropdown on the relevant product page within the Shopify admin area.

Countdown template

This section utilizes the powerful Countdown timer section to build hype, advertise sales, create anticipation, product drops and for any future coming promotions. You can save more time by using the preset countdown template created by the designers at Clean Canvas. 

To set your product to this template, select the countdown option from the Theme template dropdown on the relevant product page within the Shopify admin area.

The Countdown template does not affect the product labels and information shown to customers on the product card. To avoid showing a sold out label or inventory information, it may be desirable to switch off inventory tracking for these countdown products in the Shopify admin. Alternatively, the theme settings for labels or product cards can be adjusted to not show an inventory count on the product.

Coming soon template

Create excitement about soon-to-be released products on your store using the pre-configured template supplied by Enterprise.

This template omits the buy button/add to cart button in favour of The Product sign-up block for gathering a list of interested customers. Along with versatile content elements, that are complete with individual styling such as flash messages, you can create highly attractive and informative product pages aimed at building customer anticipation!

To set your product to this template, select the coming-soon option from the Theme template dropdown on the relevant product page within the Shopify admin area. 

The Coming Soon template does not affect the product labels and information shown to customers on the product card. To avoid showing a sold out label or inventory information, it may be desirable to switch off inventory tracking for these coming soon products in the Shopify admin. Alternatively, the theme settings for labels or product cards can be adjusted to not show an inventory count on the product.

FAQs

In stacked view, why does my page scroll when it loads?

When a variant is selected the image to focus on needs to change. In the Stacked layout, the page will automatically scroll such that the relevant image is in view. For example, when the 'Red' dress is chosen, the 'Red' image will need to be scrolled to and focussed on. Similarly, when the page first loads if the 'Red' dress is the default variant, the page will scroll such that the 'Red' image is in view.

Experiencing this scroll when the page first loads could be jarring or confusing for customers. To avoid this, ensure that the image of the default variant is ordered to be first in product page editor of the Shopify admin area.

Alternatively, the Scroll to variant media setting could be set to When the variant is changed or Never instead.

Why can't I assign my product to one of the product templates?

Enterprise (or any theme) has to be the published theme before the Shopify dashboard will provide the option of assigning the templates to products (pictured below).

Where can I find the quick buy settings?

Choose the quick buy button appearance on both mobile and desktop in Theme Settings > Product cards > Quick Buy.

There is the option to control whether the payment buttons are fixed to the bottom of the quick buy, by using the setting Fix the Quick Buy footer to the bottom of the drawer when it scrolls. It may be beneficial to disable the setting if the store's products have a lot of variants or when using dynamic checkout buttons, where multiple payment buttons can be shown. Allowing the quick buy drawer to fully scroll gives more space for product information.