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
Using the Featured Products Section
The Turbo theme includes a 'Featured Products' section which is a quick and easy way for you to highlight specific products and allow your customers to view (and purchase) an item directly from your homepage!
The 'Featured Products' section allows you to display multiple products and alternate their order for a 'checkered' layout. You can pick and choose which product information you'd like to show, configure settings for each product's gallery, and even display the 'dynamic checkout buttons'.
In order to set up the Featured Products, click into Customize (your Theme Editor) > Sections > Add Section > Featured Products.
Featured Products Settings
-
Section Settings
The section settings determine the look and layout of this section!
Wide Display
You can choose to enable 'wide display' so this section will spread out the full width of the screen. Otherwise, the section will sit in a 'container' on the homepage and not span the full width:
Stagger products left and right
If you're uploading more than one featured product, you have the option to stagger them which alternates the order of product image and text:
Enable product gallery popup
Once you have your featured product chosen, if you check off the 'enable product gallery popup' setting, on hover, your cursor will turn into a magnifying glass (with a + sign). When you click the product image, a lightbox will open up allowing you to click through the product gallery images:
Show arrows on product gallery
You can enable the 'show arrows on product gallery' setting to add arrows on top of the product image on hover which will allow you to click through the product gallery images:
Magnify product images on hover
You can enable the 'magnify product images on hover' setting if you'd like to zoom in on your product images when hovering over them:
Enable product gallery slideshow/Gallery transition
The 'enable product gallery slideshow' setting will allow your product gallery to become a slideshow that automatically transitions through the images. The 'gallery transition' setting setting allows you to choose which transition style you'd like for your slides within the slideshow. You can choose from: 'Slide' or 'Fade':
Show Vendor
You can enable the 'show vendor' setting if you'd like to display the product's vendor (which is the brand or manufacturer). You can add vendors to your products though their product admin pages under Organization > Vendors.
Display star rating on product
If you have the Shopify Product Reviews app installed on your storefront, you can enable the 'display star rating on product' setting to show the star rating and number of reviews.
How to enable product reviews
Show Price Savings
The 'show price savings' setting will only apply to products that are on sale. If you enable this setting, the percentage and dollar amount saved will display below the price:
Show dynamic checkout button
You can enable the 'show dynamic checkout button' to allow customers to easily checkout. They skip the cart and complete their payment with the checkout method displayed on the button.
View Shopify's full documentation about dynamic checkout buttons.
Show product description/Description position
You can enable the 'show product description' setting to display your featured product's description. With the 'description position' setting, you can choose to display your position above or below the product form:
-
Content Block Settings
The content block settings are where you upload your actual product. Once you select your product, all of the information that you've enabled through the section settings will appear alongside the actual product.
Examples
-
Demo Shop Examples
Here's how we set up the 'Featured Products' homepage section in our demo shops for Turbo!
-
Seoul
Section settings
Wide display - enabled
Enable product gallery popup - enabled
Show product description - enabled
Description position - above product form
-
Chicago
Section settings
Wide display - enabled
Enable product gallery popup - enabled
Show arrows on product gallery - enabled
Enable product gallery slideshow - enabled
Gallery transition - slide
Show product description - enabled
Description position - below product form
-
Dubai
Section settings
Enable product gallery popup - enabled
Display star rating on product - enabled
Show dynamic checkout button - enabled
Show product description - enabled
Description position - above product form
-
-
Additional Examples
Section settings
Stagger products left and right - enabled
Enable product gallery popup - enabled
Magnify product images on hover - enabled
Show price savings - enabled
Show product description - enabled
Description position - above product form
Mobile layout
When viewed on a mobile device, the 'featured products' section stacks vertically with the product image at the top:
