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

Steps

1. Open the Theme Editor.
2. Navigate to Products > Default product from the dropdown at the top.
3. From the Template group, select the Product section to edit it, or add blocks as required.

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:

Note

If the Product details section is not placed immediately below the Product section, its content will be shown in a larger container which will show more centrally on the page.

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.

Tip

If the prompt overlaps another element which is also positioned in the bottom right hand corner of the screen, use the Position on large screens setting to move 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.

Tip

To make stacked images larger/smaller, change the Media width setting.

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.

Tip

In tests, we’ve found the Stacked layout marginally better for speed scores than the Slider layout.

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.

Note

Even if you’ve chosen the Stacked layout, the Slider will always show on mobile. 

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

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

Note

The Media background color setting will be overridden when the Blend product images settings is enabled. Read more about Color blending.

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

Note

To activate product zoom on mobile, select Enable lightbox on mobile.

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.

Steps

1. Open the Theme Editor.
2. Go to a product page template and select the Product section in the Template group.
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

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.

Note

Refer to the Swatches guide for details on how to enable swatches within the Variant picker and how these can be displayed. 

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

Note

Use the settings Show availability in selectors and the additional setting Update availability only in subsequent options to control the display of unavailable 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.

Caution

When the product becomes available, email alerts will NOT be automatically sent to the customer – you will need to do this.

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.

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. 

Tip

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

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

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.

Note

Ensure that each custom option has a unique Label.
Text and long text can be set to required if the Add to Cart button is used. They will not be required when using accelerated checkout methods. 

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.

Steps

1. Open the Theme Editor.
2. Select Products > Default product from the dropdown at the top.
3. Select the Product details section in the Template group.
4. 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.

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.

Tip

The payment icons displayed here will reflect those set in Admin > Settings > Payments.

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: 

Important

The theme has to be the published theme before the Shopify dashboard will provide the option of assigning the templates to products.

By default, Native 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.

Note

Products assigned to the Countdown template will display a message in the Quick Buy drawer explaining that the products cannot be purchased yet. If a ‘Product sign-up’ block is added to the product page, this will be shown instead.

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

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. 

Note

Products assigned to the Coming soon template will display a message in the Quick Buy drawer explaining that the products cannot be purchased yet. If a ‘Product sign-up’ block is added to the product page, this will be shown instead.

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.