Supported Versions
The details shared here apply to the most recent version of Turbo. To keep your theme up to date, check out this helpful document.
In This Article
Product Page Template in the Turbo Theme
The Turbo theme includes a default 'Product' template which is assigned by default when you start adding products to your store. The product page is where your customers learn what your product is called, what it looks like, how much it costs, and all its other important details.
This default template will appear as 'product' in your Product Admin Page under Theme Templates > Product Template:
For the Product Page, you can configure settings for the following areas in the Theme Editor: Product Gallery, Product Info, Product Reviews, Recommended Products, Recently Viewed Products, and Sidebar.
In addition to the above options, you can also configure settings for the 'Product Form' area which includes the add to cart/payment buttons, variant option styles, and inventory.
View our article on the Product Page Form for more detail on the settings and examples.
Product Page Settings
The settings determine the information and layout of what's displayed on your product pages! You can locate these settings by heading into Customize > choose 'Product Pages' in the drop-down page selector. Your theme editor on the left will then update with the product page settings.
Product Gallery
The 'Product Gallery' settings refer to the images that you've uploaded in the Product's admin page:
Within the 'Product Gallery' settings you can choose to enable a lightbox that opens the product images, enable a product gallery slideshow, and decide whether or not to display product gallery thumbnail images and their position.
View our article on the Product page's 'Product Gallery' for detail and examples for each setting.
Product Info
The 'Product Info' settings refer to the information displayed within the product form area on the Product page! This is the area where you product price, description, variants, and add to cart live in as well.
Show breadcrumb links
Breadcrumb links are a list of links that show a customer what page they are on, and all the pages that are "above" that page in a store's content. In this example, the breadcrumb links read as:
Home / Tops-Women / Aria Bra Top
So this shows the path of how we got to the 'Aria Bra Top'. From the 'homepage', we clicked into the 'Tops-Women' collection, and then clicked into 'Aria Bra Top'. The 'breadcrumb links' will display at the top left of the product page:
Show Vendor
You can enable the 'show vendor' setting which will display the name of the vendor/brand if you've added one in through the product admin page under Organization > Vendor. If you enable this setting, the vendor/brand name will then appear above the product title.
Show SKU
You can enable the 'show SKU' setting which will display the product's SKU number if you've added one in through the product admin page under Inventory. If you enable this setting, the SKU will then appear above the product title, and beneath the Vendor if you have that enabled.
Show Price Savings
If your product is on sale, you can enable the 'show price savings' which will display how much your customer is saving - both percentage and price amount. If you enable this setting, the price savings will display below the product price.
Show Collections
You can enable the 'show collections' setting which will display a list of collections that your product is a part of. You can add your product to Collections through the product admin page under Organization > Collections. If you enable this setting, the Collections will then appear beneath the product description and product form area.
Show Type
You can enable the 'show type' setting which will display the product type if you've added one in through the product admin page under Organization > Product Type. If you enable this setting, the Product Type will then appear beneath the product description and product form area, and underneath the Collections if you have 'show collections' enabled.
Show Tags
You can enable the 'show tags' setting which will display any tags you've added through the product admin page under Organization > Tags. The tags will then display listed as categories beneath the product description and product form area, and underneath Collections and Type if you have those enabled.
Show Social Media Share Icons
You can enable the 'show social media icons' setting which will display the Twitter, Facebook, Pinterest, and Email icons for customers to share the product page on social media/email. If you enable this setting, the social share icons will display beneath the product description and product form area, and underneath any other 'product info' settings you've enabled.
Description Position
The 'description position' lets you move the placement of your description either above or below the add to cart button (product form).
Product Reviews
The 'Product Reviews' settings are associated with Shopify's Product Reviews app which you can install on your storefront. Settings for the reviews are located in both the Product Page Settings and in the Product Grid settings (Theme Settings > Product Grid).
Within the Product Review settings, you can choose the reviews position and have the option to display the star rating as well.
View our article on Product Reviews
Recommended Products
Turbo's Product Page includes the option to display 'Recommended Products' underneath the Product Gallery/Product Form and Shopify Product Reviews (if you have those enabled). Within the Recommended Products settings, you can choose the layout option of a traditional 'grid' or a 'slider' as well as choose the 'products per row' and limit the amount of products shown.
View our article on Recommended Products
Recently Viewed Products
There is an option to include 'Recently Viewed Products' on the Turbo product page which will contain different products based on each individual customer's site experience and which products their checking out. Within the Recently Viewed Products settings, you can choose the layout option of a traditional 'grid' or a 'slider' as well as choose the 'products per row' and limit the amount of products shown.
View our article on Recently Viewed Products
Sidebar
Turbo's Product Page includes the option to display a 'Sidebar' on the left-hand side. The sidebar can include: a collection list, menu, page, recently viewed products, tag list, text area, type list, and vendor list.
View our article on the Sidebar
Examples
-
Demo Shop Examples
Here's how we set up the Product Page in our demo shops for Turbo!
-
Portland
Product Page Details
Product GalleryShow arrows on product gallery - enabled
Magnify product images on hover - enabled
Enable product gallery slideshow - enabled
Gallery transition - slide
Gallery position - left
Show product gallery thumbnails - enabled
Thumbnail position - bottom
Product InfoShow breadcrumb links - enabled
Show price savings - enabled
Show collections - enabled
Show social media share icons - enabled
Description position - above product form
Product ReviewsReviews - enabled
Reviews position - below image/description
Recommended ProductsShow recommended products - enabled
Layout - slider
Limit products - 12
Products per row - 5
Recently Viewed ProductsShow recently viewed products - enabled
Title - added
Layout - grid
Products limit - 10
Products per row - 5
Product DescriptionThe "split" tag is used to move the tabs section of the description below the fold.
Product FormEnable "Back in stock request" form - enabled
"Back in stock request" form text - added
Options style - color swatches
Show quantity box - enabled
"Free" text (for $0 products) - added
Size chart - added
-
Seoul
Product Page Details
Product GalleryEnable product gallery popup - enabled
Gallery transition - slide
Gallery position - left
Show product gallery thumbnails - enabled
Thumbnail position - left
Product InfoShow breadcrumb links - enabled
Show vendor - enabled
Show social media share icons - enabled
Description position - above product form
Recommended ProductsShow recommended products - enabled
Layout - slider
Limit products - 12
Products per row - 4
Product FormOptions style - color swatches
Show quantity box - enabled
"Free" text (for $0 products) - added
-
Florence
Product Page Details
Product GalleryShow arrows on product gallery - enabled
Enable product gallery popup - enabled
Gallery transition - slide
Gallery position - left
Show product gallery thumbnails - enabled
Thumbnail position - left
Product InfoShow breadcrumb links - enabled
Show price savings - enabled
Show social media share icons - enabled
Description position - above product form
Product ReviewsReviews - enabled
Reviews position - below image/description
Recommended ProductsShow recommended products - enabled
Layout - slider
Limit products - 4
Products per row - 4
Product FormEnable "Back in stock request" form - enabled
"Back in stock request" form text - added
Options style - select drop-down list
Show quantity box - enabled
"Free" text (for $0 products) - added
-
Chicago
Product Page Details
Product GalleryShow arrows on product gallery - enabled
Enable product gallery slideshow - enabled
Gallery transition - slide
Gallery position - left
Show product gallery thumbnails - enabled
Thumbnail position - left
Product InfoShow breadcrumb links - enabled
Show price savings - enabled
Show social media share icons - enabled
Description position - below product form
Recommended ProductsShow recommended products - enabled
Layout - slider
Limit products - 12
Products per row - 3
Recently Viewed ProductsShow recently viewed products - enabled
Title - added
Layout - grid
Products limit - 4
Products per row - 4
Product FormEnable "Back in stock request" form - enabled
"Back in stock request" form text - added
Options style - color swatches
Show inventory remaining - enabled
Inventory remaining threshold - 10
"Free" text (for $0 products) - added
-
Dubai
Product Page Details
Product GalleryShow arrows on product gallery - enabled
Magnify product images on hover - enabled
Enable product gallery popup - enabled
Gallery transition - slide
Gallery position - left
Show product gallery thumbnails - enabled
Thumbnail position - bottom
Product InfoShow price savings - enabled
Show social media share icons - enabled
Description position - above product form
Product ReviewsReviews - enabled
Reviews position - below image/description
Recommended ProductsShow recommended products - enabled
Layout - slider
Limit products - 12
Products per row - 5
Product FormEnable "Back in stock request" form - enabled
"Back in stock request" form text - added
Options style - color swatches
Show quantity box - enabled
"Free" text (for $0 products) - added
-
-
Additional Examples
Example 1
Product Page Details
Product GalleryMagnify product images on hover - enabled
Gallery position - left
Product InfoShow vendor - enabled
Show price savings - enabled
Show dynamic checkout button - enabled
Show type - enabled
Show social media share icons - enabled
Description position - above product form
Product ReviewsReviews - enabled
Display star rating on product - enabled
Reviews position - below image/description
Product FormShow inventory remaining - enabled
Inventory remaining threshold - 11
Example 2
Product Page Details
Product GalleryShow arrows on product gallery - enabled
Magnify product images on hover - enabled
Enable product gallery slideshow - enabled
Gallery transition - fade
Gallery position - right
Show product gallery thumbnails - enabled
Thumbnail position - bottom slider
Product InfoShow vendor - enabled
Show SKU - enabled
Show dynamic checkout button - enabled
Show type - enabled
Show social media share icons - enabled
Description position - above product form
Recommended ProductsShow recommended products - enabled
Layout - grid
Limit products - 5
Products per row - 5
Mobile layout
When viewed on a mobile device, the product page will responsively fit into your screen size. The main product image will be at the top, with the rest of the page layout following.
You product page settings will remain as well. For example, if you have set the 'thumbnail position' to be 'bottom', the thumbnails will remain on the bottom. If you have set the 'description position' to be 'above the product form', the description will remain above the product form.
