What is the product page?
A nicely crafted product page can help to increase conversion rates, promote upselling, reinforce brand identity and improve search engine rankings. The Boost theme offers a playful layout and a wealth of settings to help you to create the perfect product page for your brand.
How to set up the product page
Steps
- Open the Theme Editor.
- Select Products from the dropdown at the top and choose the desired product template (e.g. Default product).
- Click on the word Product details to edit the product media settings.
- Choose the preferred product Media layout from the three available desktop layouts and set the media Size.
- Select one of the pre-loaded blocks to begin customizing its settings, or click Add block to choose a block from the list.
Tip
Media layouts
Boost has three different media layouts for the product page on large screens. On mobile a carousel layout will be always be used.
The media layouts on larger screens are:
- List: This will stack all product images on top of one another, vertically. All images will be the same size. When a variant is selected, the focus moves to the image linked to that specific variant. The page will automatically scroll vertically such that the relevant image is in view.
- Thumbnails - below: The main product image will be shown as a large picture, with the smaller thumbnails positioned underneath this.
- Thumbnails - left: The main product image will be shown as a large picture, with the smaller thumbnails positioned to the left of this.
Note
Product media layout - List
Product media layout: Thumbnails - below
Product media layout: Thumbnails - left
Blocks
There is a large range of blocks to choose from that can be used to improve functionality or enhance the appearance of the product page. The Custom liquid, Custom option, Text, Rich text, Image, Link and Collapsible tabs blocks can be added as many times as required - all other blocks are limited to one instance each.
Steps
- Open the Theme Editor.
- Select Products from the template 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.
Variant picker block
Variant pickers across the store can be shown as a dropdown or listed out.
Dropdown layout
Listed out layout
To choose the preferred layout go to Theme settings > Products > Product form > Variant style. This choice applies on the product page, quick buy and featured product sections. The dropdown and button variant pickers can also include swatches. Our swatches guide explains how to set this up.
Show a size chart link under a size option. Refer to Size charts for more details.
Buy buttons block
Controls for showing or hiding the quantity selector, dynamic checkout button, backorder text, pickup availability and gift card recipient information are all held in this block.
The Boost theme has a dropdown style quantity selector. A hide unavailable quantity options setting in Theme settings > Products can be used to limit this dropdown to only show available quantities in stock to avoid customer frustration.
Use the setting Show inventory notice to show stock availability above the buy buttons and bring a sense of urgency to encourage customer purchases. Set the low inventory threshold and choose whether to show an inventory count.
Custom option block
Add additional custom content blocks for personalised products, customer details or additional product preferences.
Steps
- Open the Theme Editor.
- Select Products from the dropdown at the top and choose the desired product template.
- In the left-hand settings panel, click Add block and select Custom option.
- Choose the appropriate custom option type - Text, Long text, Checkbox or Multiple options (dropdown menu or radio buttons)
- Rename your custom option and ensure that the name is unique.
Caution
Description block
The Boost theme offers flexibility in how the product description is displayed. It can be shown on the right side of the product template or full-width below the product media and product form. It can also be either listed out or in a horizontal or vertical tab. Different layouts may suit different product types in which case, separate product templates can be created.
Vertical tabs in the product form
Horizontal tabs shown full width
Steps
- Open the Theme Editor.
- Select Products from the dropdown at the top and choose the desired product template.
- Click on the Description block.
- Choose to the preferred position for the description. It can be shown on the right hand side of the product template next to the product media. Or, select Show full width to show the description below the product media and product form.
- An additional two tabs of content can be shown next to the description in the same block. Content for these tabs can be added directly in the theme editor or pulled from pages and metafields.
- Choose whether to show the description as a tab by clicking Enable tabs. The tab design can be vertical or horizontal. The vertical tab design includes an icon setting.
Collapsible tab block
Organize content and declutter product pages by using collapsible tabs. This can help keep product card content above the fold.
Steps
- Open the Theme Editor.
- Select Products from the dropdown at the top and choose the desired product template.
- Click to Add block and select Collapsible tab (it is possible to add multiple Collapsible tab blocks)
- Choose the Heading, Icon (optional) and Tab content. Content can be added directly to the tab in the theme editor, pulled from pages or metafields.
- Choose if the tab should be full width under the product media or on the right hand side in the product form.
Vendor block
The vendor block shows the product vendor. It 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.
Tip
- In the Shopify admin area, go to Products > Collections and click on the relevant collection.
- Scroll down to the Search engine listing panel, and click Edit.
- 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'.
Sharing block
Make it easy for customers to share links to your products using the sharing block with individual settings for X (formerly Twitter), Facebook and Pinterest.
Cross-selling
Suggesting other related products and cross selling is a key part of the product page.
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.
Product list section
The product list section shows a selection of products. Unlike the complementary products block, it will also show sold out products and products that are already in the cart. Select products to show in the editor or use a product metafield of type product list to show different items for each product.
Note
Preorder template
Use this template to display a Pre-order button.
Tip
- From the Admin, go to Products. Select the product to be assigned to the preorder template. (Please note theme must be published in order to select the template)
- Under Theme template, select preorder.
- Save changes.
Creating more than one preorder template
FAQs
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 block settings. Refer to the Shopify article Adding and removing dynamic checkout buttons for more details.
Where can I find the quick buy settings?
Set the quick buy style in Theme settings > Quick buy. Choose the color for the quick buy in Theme settings > Colors > Quick buy.
How do I show different content per product in the collapsible tab block?
Content for the collapsible tabs can be drawn from text product metafields. This can be useful for care or sizing information, materials, ingredients or many other product specific details.
Note
Steps
- To use metafields to hold product specific content shown in a collapsible tab on the product page, open the Shopify admin and go to Settings > Custom data.
- Click on Products to create a new product metafield for your content. The metafield should be a type that can contain text. There are several types available.
- In the Shopify admin, go to Products, edit a product and find the newly created metafield. Enter your content in the metafield and save the changes. There are also bulk editing options for products available in Shopify.
- Open the Theme editor, and select Products and the desired product template from the dropdown at the top.
- View the product page and scroll to your collapsible tab block. Next to Tab content select the Connect dynamic source icon to add your metafield/metafields.
Metafields of the appropriate type held in metaobjects can also be used.
Note
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