Product Page Template in the eCommerce Performance Theme

Product Page Template in the eCommerce Performance Theme

Supported Versions: The details shared in this article apply to the updated version of eComm Performance. 


Product Page Template 

The eComm Performance theme includes a default 'Product' template, which is assigned when you start adding products to your online store. The product page is where your customers learn all the essential details about your product (what it's called, what it looks like, cost, etc.)
This is the default template that will show up as 'product' in your Products Page under Pages > Add Product:


Once you are on this page, you can adjust the settings for the following areas in your Theme Editor: Product Gallery, Product Info, Reviews, Recommended Products, Recently Viewed, and Sidebar.

You can also change your settings for the 'Product Form' area, which includes the add to cart and payment buttons, variant style options, and inventory. 

Product Page Settings

The settings are used to determine the information that you want to include and the layout of your product page. These settings can be found in Customize > select 'Product Pages' on the drop-down page. Your theme editor is on the left and will update with the product page settings.


These settings are referring to the images that you chose to upload to your Product's page:


The 'Product Gallery' setting allows you to choose to enable a lightbox, which opens the product images, enables a gallery slideshow, and also if you want to display your product gallery thumbnail with the images and their position.

 

Product Info

The 'Product Info' settings refer to the information shown in the product form area on the Products page. This is where you can decide if you want to display the price, description of the product, variants, and enable the 'add to cart.'
Show breadcrumb links
Breadcrumb links are a list of links that allow the customer to see what page they are viewing and all the pages that the product they're viewing is in. This example shows the breadcrumb links as:
Home/ All Products/ Cardigan Autumn Long Flare Sleeve Sweater
This allows the customer to see how we got to the 'Cardigan Autumn Long Flare Sleeve Sweater.' When we were at the homepage, we clicked into All Products and then clicked the sweater. These links are shown at the top left of the product page:

Show Vendor

You can also 'show vendor,' which will also show the vendor or brand's name if you have one added in the product admin page under Organization > Vendor. If you have this setting enabled, it will be shown above the product title.

Show SKU

You can also enable the 'show SKU' setting, which will show the product's SKU number if you included one in the product admin page under Inventory. If you have this setting enabled, the number will show above the product title but below the Vendor if you also have that enabled. 

Show Price Savings

If a product is on sale, you can 'show price savings,' which will show the customer how much they are saving- both the percentage and the price amount. If you have this setting enabled, the savings will be shown below the product price.

Show Collections

If your product is in a collection, you can 'show collections,' which will display a list of the collections your product is a part of. You can add any product to a collection through the product admin page under Organization > Collections. If you have this setting enabled, the Collections will appear below the product description and product form area.

Show Type

You can also select the 'show type' setting, which will show the product type if you have one added through the product admin page under Organization > Product Type. If you have this setting enabled, the Product Type will be shown below the product description and product area form. It will also be displayed underneath the Collections if you have the 'show collections' enabled.

 

Show Tags

If you have any tags for your product, you can enable the 'show tags' setting, which will show any tags added to your product admin page under Organization > Tags. Whichever tags your product has will be shown as categories below the product description, product form area, Collections, and Type if you have those settings enabled.

 

Show Social Media Share Icons

Suppose you have your social media accounts linked to your site. In that case, you can choose to display those under the 'show social media icons' setting, which will show the Facebook, Pinterest, Twitter and email icons for customers if they want to share the product on their social media, or through email. If you have this enabled, the icons will be shown below the product description, product form area, and any other 'product info' settings you've enabled.

 

Description Position

You can choose to display the 'description position,' which lets you move your description to above or below the add to cart button.
 
 

Product Reviews

You can install Shopify's Product Reviews app, which will allow you to enable the 'Product Reviews' settings. Review Settings can be found in the Product Page Settings and the Product Grid settings (Theme Settings > Product Grid). 

With the Product Review settings, you can change the position of the review and display the star rating.
eComm Performance's Product Page can show 'Recommended Products' below the Product Gallery and Product Form. With the Recommended Products setting, you can choose the layout option as either a 'grid' or 'slider' and choose the 'products per row' and limit the amount of products shown.
View our article on Recommended Products

Recently Viewed Products

You can also feature 'Recently Viewed Products' on the eComm Performance product page, which will feature different products based on each customer's site experience and what products they have been viewing. With this setting, you can decide which layout option you would like between 'grid' or 'slider' and choose how many products you want in the row and the number of products that the customer can see.
View our article on Recently Viewed Products
eComm Performance's Product Page also gives you the option to show a 'Sidebar' on the left-hand side. You can include a collection list, menu, recently viewed products, tag list, pages, text area, type list, and vendor list in this feature.
View our article on the Sidebar
 

Example



Example Product Page Features

  1. Product Gallery
  2. Show arrows on gallery- enabled
  3. Product Gallery Slideshow- enabled
  4. Gallery transition - slide
  5. Gallery position - left
  6. Gallery speed- 5 seconds
  7. Show product gallery thumbnails - enabled.
  8. Thumbnail position - bottom
  9. Product Info
  10. Show breadcrumb links - enabled.
  11. Show price savings - enabled.
  12. Show collections - enabled.
  13. Show social media share icons - enabled.
  14. Description position - above product form
  15. Recommended Products
  16. Show recommended products - enabled.
  17. Layout - Grid
  18. Limit products - 6
  19. Products per row - 3
  20. Recently Viewed Products
  21. Show recently viewed products - enabled.
  22. Layout - grid
  23. Products limit - 4
  24. Products per row - 4
  25. Product Form
  26. Enable "Back in stock request" form - enabled
  27. "Back in stock request" form text - added.
  28. Options style - color swatches
  29. Show quantity box - enabled

Mobile Layout

When the product page is viewed on a mobile device, it will automatically change to fit the screen size. The main product image will be on top, with the rest of the page following.
Any product page settings that you have enabled will remain as well. For example, if you enabled color swatches, the color swatches will be displayed below the size. If you have the description to display above the product form, it will remain above the product form.

    • Related Articles

    • Facebook Pixel Event Tracking and the SSD Theme

      Tracking Sales (conversions) using the Facebook Pixel works in all versions of the SSD theme if you follow these steps from Shopify. Compatibility Notes In situations where your marketing strategy requires detailed page visit tracking we would ...

    • FAQ Template - eComm Performance Theme

      The theme will need to be published to use the 'page.faq'  template. The templates that you can select are limited to the templates available in the currently published theme.  Supported Versions: The details here apply to the most recent version of ...

    • Collection Page Sidebar on the eComm Performance Theme

      Supported Versions: The details shared in this article apply to the most updated version of eComm Performance.    Using the Collection Page Sidebar eComm Performance's Collection pages has the ability to display a 'sidebar' on the collection page. ...

    • eComm Performance Guide: Custom Contact Page

      Supported Versions: The details shared in this article apply to the updated version of eComm Performance. Using the Custom Contact Page Template With the release of eComm Performance v6.2.0, not only is there a default contact page template but the ...

    • Using the Page Section on the eComm Performance Theme

      Supported Versions: The details shared in this article apply to the updated version of eComm Performance. Using the Page Section The eComm Performance theme includes a 'Page' homepage section that has multiple uses. This section allows you to create ...