Featured Products Section - eComm Performance Theme
Supported Versions: The details shared in this article apply to the updated version of eComm Performance.
Using the Featured Products Section
The eComm Performance theme has a 'Featured Products' section which is an easy way to showcase products and allows your customers to view (and purchase) an item right from your homepage!
This section gives you the opportunity to showcase multiple products and choose their order for a 'checkered' layout. You can decide which product information you want to show, arrange the settings for each product's gallery, and display Shopify's 'dynamic checkout buttons'.
To set up the Featured Products, go into Customize (your Theme Editor) > Sections > Add Section > Featured Products.
Featured Products Settings
Section Settings
The section settings allow you to decide on the look and layout of the Featured Products sections!
Content Block Settings
This setting is where you upload your product. After you select a product, all of the information that you have enabled in the section settings will show up beside the actual product.
Wide Display
You can enable the 'wide display' setting, which enables the section to spread out the full width of the screen. If this is not enabled, the section will sit in a 'container' on the homepage and not span its full width:
Stagger Products Left and Right
If you have more than one product you want to be featured, you have the ability to stagger them which alternates the order of the image and text:
Enable Lightbox
After you have your featured product picked, you can select the 'enabled lightbox' setting, which will turn your cursor into a magnifying glass. When you click the product, a lightbox will open and allow you to look through the gallery images:
Show Arrows
If your product has more than one image, you can enable the 'show arrows' setting, which adds arrows to the product image and gives you the ability to go through the product gallery images:
Magnify Product Images on Hover
If you want customers to be able to zoom in on your products images, you can enable the 'magnifying images on hover' setting:
Enable Gallery Speed/Transition
If you want the product gallery to be shown as a slideshow, you can change the 'Gallery Speed' anywhere from 1 to 6 seconds. Your gallery will then automatically transition between images. If it is set to 0, the slideshow will not be enabled.
You can also decide how you want your slideshow to transition. The 'Gallery Transition' setting allows you to choose if you want your images to transition as a 'slide' or if you want the images to 'fade':
Show Vendor
You can also choose to select the 'show vendor' setting to display the product's vendor (brand/manufacturer). You are able to add vendors to any product through your product admin pages under Organization > Vendors.
Display Star Rating
You can select the 'display star rating on product' setting to show the rating and number of reviews if you have the Shopify Product Reviews app installed through your storefront.
Show Price Savings
If an item is on sale, you can choose to display the price savings, by selecting 'show price savings'. If you have this setting enabled, the percentage and dollar amount saved will be shown below the price:
Show Dynamic Checkout Button
If you want customers to have the option to easily check out, you can select the 'show dynamic checkout button'. This allows them to skip the cart and complete their order and payment with the checkout displayed on the bottom.
View Shopify's full documentation about dynamic checkout buttons.
Show Product Description/Description Position
You can have your product description shown by selecting the 'show product description' setting to show your featured product's description. You can also choose to show the description above or below the product form:
Example
Section settings
- Wide display - enabled.
- Lightbox- enabled.
- Show Arrows- enabled.
- Gallery Speed- 4 seconds.
- Show Product Description- enabled.
- Description position- above product form.
Mobile Layout
The 'featured products' section will stack vertically with the product image at the top when it is viewed on a mobile device:
Related Articles
Recommended Products in the eComm Performance Theme
Supported Versions: The details shared in this article apply to the updated version of eComm Performance. Adding Recommended Products You have the option to enable Recommended Products on all product pages in the eComm Performance theme. Shopify has ...Collection List Section in the eComm Performance Theme
Supported Versions: The details shared in this article apply to the updated version of eComm Performance. Using the Collection List Section The eComm Performance theme features a 'Collection List' section that is available on the homepage. The ...Gallery Section in the eComm Performance Theme
Supported Versions: The details shared in this article apply to the updated version of eComm Performance. Using the Gallery Section The eComm Performance theme has a section where you can display only images! The 'Gallery' section is a great way to ...Using the Video Section in eComm Performance
Supported Versions: The details shared in this article apply to the updated version of eComm Performance. How to Use the Video Section The eComm Performance theme has a 'Video' homepage section, which gives you the ability to creatively enhance ...Header Settings in the eComm Performance Theme
Supported Versions: The details shared in this article apply to the updated version of eComm Performance. Setting up the Header The eComm Performance theme has a customizable 'Header' section. The Header has some built-in settings, including ...