Product pages
Products are the lynchpin of your store. Without products, you would have nothing to sell, so it’s immensely important you master how to add products and familiarise yourself with all the settings available to build your store and your brand correctly, right from the start.
Products can be linked to on your storefront by using images or via text.
Shopify has a great guide on how to add products here:
Product descriptions, compare at pricing (sale price), variants and images are outlined here:
Note
For further information relating to specific image sizing, see here:
Here are two examples of how you can display your products on your storefront.
The first example is a text link in the footer:
If you need help with setting up footer links, we have a great resource available here:
Here is a more visual representation of your product/s, using the “featured product” section:
More info is available on specific sections and their options here:
Once your product link is clicked on, regardless of visual format, your customers will either be taken through to that product’s dedicated page where further details are shown or if the “add to cart” button is clicked, the product will be added to the cart.
Here is an example of the “image with text” section, linking to a product:
To view your product page, head here:
Admin
Online store → Themes → Customise
Select 'Product pages' from the page selector dropdown:
Select 'Product pages' again from the left-hand settings panel.
You will see the following options:
Toggle between hidden and visible.
Toggle between hidden and visible, at the bottom of the Description:
Note that this feature needs the store's Shipping Policy to be set in:
Admin
Settings
Legal
Under 'Shipping policy', add the needed content here:
Toggle between hidden and visible.
Tip
More information available here:
You can now upload a trust badge that will display below the Add to Cart button.
Trust badges help to put your customers at ease and increasing your store's credibility.
Changes the visual width of your Trust Badge image.
To display how much a product has been discounted compared to the Compare at price, select either Percentage or Value from the dropdown.
Hide
Percentage
Value
This option always you to define how and where the description should be laid out on the page. There are 3 options to choose from:
Above add to cart button
Below add to cart button
Below product image
Toggling this allows you to hide a section of the Description below a cut-off point, useful for making long descriptions load faster and look less visually heavy on screen
When you enable Full size images in the Secondary image display setting. under Media, you can enable this feature to ensure the product description remains sticky and visible while the customer scrolls down the images.
Toggles between active and inactive.
When active, this feature triggers the dropdown selector to change to reflect the thumbnail clicked.
This option will add an out of stock email signup to your product listing so customers can be notified when the product is back in stock.
Choose between Dropdowns to present the Variant options as just their Variant Names or 'Swatches' to represent them visually.
Toggle between active and inactive. When active, this feature triggers the dropdown selector to change to reflect the thumbnail clicked.
When enabled, any variant that has no available stock will be automatically hidden on page load, instead of appearing as an unavailable option for the customer.
Note
As of version 14.3, there is a link available directly to our Image Reference Guide, to aid you in getting the best post images selected and edited for your Products.
For those working with a version released before this point, the guide can be found instead below:
Choose between small, medium or large, from the dropdown selector:
Choose between vertically stacked Full size images or an image gallery that highlights one image at a time, with the other image files show in smaller Thumbnails:
Choose between “below main image”, “left of main image” or “right of main image” from the dropdown selector.
Toggle between Enable and disable.
Allows video Media to loop when the first play is completed
Select how the page should respond after the customer hits 'Add to cart':
Open the Cart Drawer with the item added:
Displays a success banner over the Add to Cart Button for a few seconds:
Loads the customer through to the Cart Page:
Toggle between hidden and visible.
Review stars and customer testimonials will appear under the Product Description:
Note
You will need to install Shopify's Product Reviews app before enabling this option:
Allow customers to share your products right from the product page by toggling these icons:
Toggle between Enable and disable. If this section contains more than 4 products, it will turn into a slider.
Note
This recommendation algorithm uses sales data and product descriptions to show a mix of products that are similar or often bought together.
Product recommendations become more accurate over time as new orders and product data become available.
More information on how the "related products" feature works:
When the button is clicked, a drawer with a product overview is shown.
Resizes all the images in the Collection to match the tallest vertical image - however, we would still recommend using uniform Product Image size if possible to create a more uniform look:
Enable this setting to display the customer's recently viewed products at the bottom of the Product pages settings:
You can edit this section's heading, enable quick view functionality and enable auto-height sizing for product images.
