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 set up 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:
Note
Tip
How to create multiple unique product page templates
Steps
- From the Admin, go to Online store > Themes > Customize.
Navigate to your product page using the dropdown menu in the Theme Editor header. - Select Product pages: Create template from the dropdown menu (it’s best not to use the ‘default product’ so we can keep this untouched).
- In the Create a template box that appears, add a name that clearly associates this template with the product you’d like to apply it to.
- Choose Default product for the Based on option and click Create template. This will not affect your original default product template.
- The page will reload, and you can alter this new layout on a preview of any product of your choice (select Change from the top left of the editor area to choose a different product).
- Click Product pages in the left-hand menu. This will show you a list of content blocks.
- Drag and drop your content blocks or add/remove/hide them as you see fit. The same can be achieved with your product page sections if you wish.
- When you are happy with your layout, save your changes.
- From the Admin, go to Products. Choose the product you wish to assign your newly made template.
- On the right-hand side, under Theme template use the dropdown to select your new template and save your changes to apply this.
- If you do not see this template in your dropdown list, make sure you have published your theme (a theme needs to be made live for its associated templates to show as options in the Shopify Admin).
- For any additional unique page templates you wish to create, simply repeat steps one to thirteen and assign your template(s) to the products you like.
Creating a unique product page does take some effort, but the end result will be well worth it! You'll have a personalized page that truly stands out. You got this!
Product description, tabs, expandable content, inventory level display set up guide
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. For assistance, refer to our helpful video on how to set up this feature.
How to create unique product tabs/size charts with metafields
Steps
- First, we need to create a new page containing the size chart. From the Admin, go to Online store > Pages > Add page. Call this 'Mens size chart' or similar.
- Add content to the page as an image or as a table, using the built-in rich text editor.
- From the Admin, go to Settings > Metafields > Products > Add definition. Create a name (e.g. 'Size charts').
- Add a description of your choice (used internally as a reference). Something like 'Guide for size charts'.
- Assign a Content type which defines the metafield’s purpose. Select Reference: Page. Save changes. This metafield will now show on all products but will only become active on your storefront for customers to view once it is triggered (on a per-product basis), explained in the next steps.
- Access a product that you wish to trigger the new metafield. From the Admin, go to Products. Select your desired product and the new metafield should be listed at the bottom of that product's page.
- Click on your newly created, grey metafield content box, which should display a dropdown list where you can choose your page to link to (e.g. Mens size chart we created in step one 1).
- Save your changes to apply this to your product. Repeat steps six to eight (6-8) for any other products where you wish for this metafield to display.
- Return to your product through the Theme Editor.
- Select the content block called Size charts (you may need to add this content block if you do not currently see it).
- Under Tab content, click the Connect dynamic source icon, select Size charts and save your changes. You should see your size chart page shown when you expand the Size charts tab on the page preview window.
Multiple Variant Images Grouping
The Media grouping feature allows you to show only the media related to the current variant using the ‘Media Grouping’ setting (v5.1.0+). This can help reduce the number of images on the page at any one time, making it easier for customers to focus on the product they are interested in. To enable this feature, you can enable Only show media associated with the selected variant setting. However, it is recommended to read our Media Grouping article for more information on how to set up your product imagery correctly for this feature to work.
General page layout
Showcase has two key settings which affect the general layout of the page.
Display style
This determines the overall layout of your images.
One column:
Two column:
Collage (v5.1.0+):
The first image will be full width; if there is an odd number of remaining images, the last image will be full width.
Carousel (v5.1.0+):
The horizontal slider feature allows you to showcase a maximum of two images simultaneously in a horizontal view. This can be a great way to highlight specific images while keeping the page uncluttered. However, please note that this view may cut off some portions of the images to fit them into the view, making it more suitable for portrait product images. If you want to avoid making customers scroll through all the images on the page, this feature can be a great choice for you.
Page width
If the Page is full width of the screen option is selected, the image and product text will stretch to the full width of the screen. Note, your images will display as large when this setting is on.
Full-width ‘on’:
Full-width ‘off’:
Making the product details more visible
The Product details stick on scroll setting (v5.1.0+) can be set to Stick to the bottom to make the product details scroll as users scroll down the page. Also, from v5.1.0 and above, you can choose to show only the media associated with the current variant – please see the section Media Grouping above.
Note
Hide the ‘buy it now' button and ‘express checkout’ buttons (Paypal/GPay)
Steps
- From the Admin, go to Online store > Themes > Customize. Navigate to your product page.
- Select Product pages from the left-hand menu.
- Find and select the Buy buttons/quantity content block.
- In the new options panel that displays, deselect the Show dynamic checkout button check-box. Save changes.
Pre-order template
If you need help setting up your pre-order templates, you can view our guide. It's specific to our themes and will provide detailed instructions on setting everything up.
Show/hide product vendor
The setting for showing or hiding the product vendor can be found on the product page. It's worth noting that some themes also display the product vendor on the collection page. If you want to disable or enable it there as well, you'll need to navigate to the collection page, open the collection pages section, and check the appropriate box.
Enable/disable image zoom
You'll find the option to enable or disable image zoom in the settings. Unfortunately, you cannot adjust the strength of the zoom. However, you can change the icon that appears when you hover over an image by using the Image zoom cursor setting (v5.1.0+).
Product tabs
Steps
- From the Admin, go to Online store > Themes > Customize. Navigate to your Product page.
- Select Product pages from the left-hand menu.
- Scroll down to Description.
- In the dropdown options under Display style, select Tabs.
- Link your desired content in First page and Second page areas. (This is outlined further in the video, along with removing the Reviews tab).
- Save changes.
Size chart
For information on how the size chart works, you can check out our size chart guide through this link.
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 Search & Discovery app.
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 (v5.1.0+), 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?
In version 5.1.0+ and above, you can also hide images that are unrelated to the current variant. This feature is called Media Grouping; you can learn more about it in the above section.
Can videos be added to product images?
If you want to add videos to your product images, Showcase supports Shopify's listed product media types. If your theme is older than February 2020, you'll need to follow updating themes for this feature to work. However, this feature is not available for older versions of Showcase.
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
