Home Flow Templates Product pages

Product pages

Build up your store’s offerings and entice buyers with your range of products, displayed in the best possible way.

Overview

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.


How do I add a product?

Shopify have a great guide on how to add products here:

help.shopify.com/manual/products/add-update-products

Product descriptions, compare at pricing (sale price), variants and images are outlined here:

help.shopify.com/manual/products/understanding-products

Note

For further information relating to specific image sizing, see here:
docs.wetheme.com/faqs/what-sizes-should-I-upload-my-images


How can I display or link to my product page on my storefront?

Here are three 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:

docs.wetheme.com/flow/sections/footer

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:

docs.wetheme.com/flow/sections

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:


What control do I have over my product page layout?

To view your product page, head here:

  1. Admin
  2. Online store > Themes > Customise
  3. Select 'Product pages' from the page selector dropdown:
  4. Select 'Product pages' again from the left-hand settings panel:

You will see the following options:


Settings

Show quantity selector -

Toggle between hidden and visible.


Show tags -

Toggle between hidden and visible.


Show collections -

Toggle between hidden and visible.


Show type -

Toggle between hidden and visible.


Show vendor -

Toggle between hidden and visible.


Show SKU -

Toggle between hidden and visible.


Show dynamic checkout button -

Toggle between hidden and visible.


Enable zoom for product images -

View our FAQ for more information on how this functions here:

https://faqs.wetheme.com/article/190-how-does-the-zoom-feature-work


Cart button location -

Select either “below product description” or “above product description”.


Images position -

Swap the product image and description elements, between the left and right of your page.


Image display -

Choose between full size images which stack vertically, or thumbnails which populate as a grid below the main, full-size image.


Change variant based on the thumbnail -

Toggle between active and inactive. When active, this feature triggers the dropdown selector to change to reflect the thumbnail clicked.


Reviews -

Toggle between hidden and visible.

Note

You will need to install Shopify's Product Reviews app before enabling this option:
apps.shopify.com/product-reviews


Related products -

Toggle between enable and disable.

Note

This option pulls in products from the same collection and displays them in the default order of the products in that collection. A customer must first choose a collection and then inside that collection select a product for this to display.

Heading: Add your own heading text for the related products feed. By default, this reads “you may also like”.


Show quick shop -

This displays a “shop now” button on image hover for ‘related products’.
When the button is clicked, a drawer with product overview is shown.


Auto-height images -

Toggle whether the auto-height feature is enabled or disabled for your ‘related products’.
This setting uses advanced CSS to provide enhanced visual consistency and continuity across your site. Whilst this setting can tidy up your images and attempt the unify the way they are displayed, the only true way of aligning your images is to keep them consistent in aspect ratio by cropping correctly before uploading to the Shopify admin area.


Social sharing -

Allow customers to share your products right from the product page by toggling these icons:

Change the ‘heading text’ to appear above your social icons.

Here’s how this could look on your storefront:


That is everything that you need to know about your product pages. You are now full to the brim with storefront knowledge and ready to show the world!