Product page

What is the Product page?

The Product page is one of the most important pages on any store. It is where customers can access in-depth product information and learn about all the exciting benefits, features and details of the products available. It also provides an opportunity to use beautiful imagery to establish an emotional connection with customers, which may assist in influencing their purchase decisions as they browse through the store.

How to set up the product page

Settings

In the Page Layout settings, there are four Display styles that can be selected. These will determine the overall layout of the product images on larger screens. 

One Column

This shows one image at a time and covers the maximum space available.

Two Column

Two column provides the opportunity to display more product images, side by side.

Collage

When Collage is selected, the first image will be full width and the images below will follow in a two column format. If there is an odd number of remaining images, the last image will be full width.

Carousel

The Carousel option shows a maximum of two images simultaneously, in a horizontal view. This a great way to highlight specific images whilst keeping the page uncluttered. This option is most appropriately used for portrait product images, as it may cut off some portions of the images to fit them into the view. 

Product details stick on scroll

This setting ensures that the product details remain visible as the user scrolls through the images on the left hand side of the screen. There are three options available - None, Stick to the top and Stick to the bottom. Overall, it is recommended to select the option that keeps the buy buttons visible for the longest period.

None: The page scrolls as normal.

Stick to the top: Will keep the top part of the details mostly visible while scrolling through the product images. 

Stick to the bottom: Will keep the bottom part of the details mostly visible while scrolling through the product images.

Page width

Selecting the Page is full width of the screen setting will stretch the image and product text to be the full width of the screen.

Conversely, when the Page is full width of the screen setting is off, the image and the product text will be much narrower on the screen.

Image zoom

In the Media settings, Enable image zoom can be selected. The icon that appears when you hover over an image can be changed by selecting one of the three Image zoom cursor options.

Media grouping

If product images are neatly arranged by color (e.g. selling the same shirt in different colors), the Only show media associated with the selected variant setting located in the Media grouping settings can be used to show images of only the selected color i.e. selecting the 'Grey' shirt will only show the grey images of the shirt.

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

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. 

Tabs/description block

This block creates horizontal tabs making it a great way to present additional product information to customers in a visually interesting manner. It also avoids overwhelming potential customers with too much information, which may put them off making a purchase decision. 

In the Tabs/description block there are two horizontal tabs available - the Description tab and a Reviews tab. There are also a further three optional tabs that can be added to make the most of the space available. 

Description block

The Description block is a particularly versatile block because it can display product description text in a normal paragraph, or it can be converted to a vertical tab. 

There are three different Display styles that can be used to show text in the description block. If a short amount of text is required, then the Standard option may be most appropriate. 

Alternatively, if there is more information that may be overwhelming at first glance, there are two expandible content options Expandable content - closed and Expandable content - open. Furthermore, by adding a separate Expandable content block, more content can be added alongside the description, thereby showing more information, without taking up much more space.

Expandable content block

As well as being used alongside the Description block, the Expandable content block can also be used separately. An Icon, Title, Text and Text from a page can be added.  If using multiple blocks which will show in a stacked format, it is recommended to have a similar amount of content in each block.

Inventory level block

The Inventory level block is an excellent way of providing customers with a visual representation of stock levels. This can either be shown as just text, or as a horizontal indicator bar with text by selecting the Show inventory indicator bar setting. 

Set the Low inventory threshold number setting and then choose the colors to show in the Indicator bar settings.

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 choose to Enable carousel if required.

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 select the Variant display style (Dropdown or Underlined).

When the Underlined Variant display style is selected, the Showcase theme can show customers which items are unavailable for purchase. In addition to selecting the display style, select Cross out unavailable options every time someone changes a variant.

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

Image block

Additional graphics can be inserted into the product page by adding an Image block. With the Image block selected, select the Image source, adjust the Image width and add a Link to the image (if required).

Trust icons block

Up to four eye catching icons with optional text can be added to the product page by adding the Trust icons block. It is an efficient way of succinctly communicating critical messages to customers.

Custom option block

The Custom option block can be used in many ways, for example, to enable personalized products, highlight customer details, or show additional product preferences. There are four different types that can be selected - Text, long text, Checkbox, and Multiple options.

Preorder template

The Preorder template creates an alternative-looking product page that allows customers to purchase products that aren't currently in stock. Products assigned to the Preorder template will display a 'Pre-order' buy button.

FAQs

Can product images be made smaller?

If you're looking to make your product images smaller, a couple of options are available. One is to uncheck the "wide display" option, which will reduce the size of the images. Additionally, you can change the display style to Two column or Carousel, which will line up the images side by side, reducing the space needed to scroll down if you have many images on your products.

Can images which are unrelated to the current variant be hidden?

Yes, you can also hide images that are unrelated to the current variant. This feature is called Media Grouping.

Why can't I assign my product to the preorder template?

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

Where can I find the quick buy settings?

The are located in Theme settings > Products > Product cards > Enable Quick-buy.