Supported Versions
The details shared here apply to the most recent version of Flex. To keep your theme up to date, check out this helpful document.
In This Article
Using the Featured Product Section
The Flex theme includes a 'Featured Product' section which is a quick and simple way for you to highlight certain products and allow your customers to view (and purchase) an item directly from your homepage!
In the 'Featured Product' section, you can pick and choose which product information you'd like to show, configure settings for each product's gallery, display the 'dynamic checkout button,' configure layout settings, and add in custom CSS.
In order to set up the Featured Product, click into Customize (your Theme Editor) > Sections > Add Section > Featured Product.
Featured Product Settings
The section settings determine the look and layout of this section! The section settings are divided into: product gallery, product information, layout, and advanced settings.
Product Gallery
The product gallery settings contain options for your Featured Product's images.
Show arrows
When the 'show arrows' setting is enabled, when your product image is hovered previous/next arrows will appear so you can click through the product's gallery images.
Magnify 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 lightbox
If you check off the 'enable lightbox' setting, when you click the product image, a pop up will open up allowing you to click through the product gallery images.
Gallery speed
With the 'gallery speed' setting, you can adjust how quickly your product gallery changes its image. Choose from 0 - 6 seconds. Setting to 0 will disable the gallery from autoplaying, so the user will have to click the arrows to switch product images!
Gallery transition
The 'gallery transition' setting setting allows you to choose which transition style you'd like for your images within the product gallery. You can choose from slide or fade.
Thumbnails
If you'd like to display your product's thumbnail images you can choose from left, right or bottom. If you do not want to display your product thumbnail images, you can select none.
Enable thumbnail slider
If you have a lot of product thumbnail images and want to avoid visual clutter, you can check off the 'enable thumbnail slider' setting. The slider will kick in when you have 6 or more thumbnail images.
Gallery position
You can choose the 'gallery position' to either display your product image gallery on the left side of the section, or the right.
Product Information
The product information settings contains options for what info you'd like to display in the description area for the Featured Product.
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.
Display star rating
When you enable the 'display star rating' setting, the average star rating plus the number of reviews left by customers will display above the product title. You will need to have the Product Reviews enabled in order for the star rating to show up (Theme Settings > Product Grid > Reviews > Enable Reviews).
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 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 description/Description position
You can enable the 'show 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.
Product description
If you'd like to enter a different description for your featured product than what shows up on its main product page, you can enter custom text in the 'product description' setting.
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.
You can choose your 'icon style' by going into Theme Settings > Typography > Icons. Here, you can choose between 'solid' and 'outline.'
Layout
The layout settings contains options to adjust the spacing and width in this section, and enable animation for when the Featured Product section loads in.
Width
The options under the 'width' setting include: 'standard' and 'wide.' Selecting 'wide' will spread out the section full-width of the screen. Selecting 'standard' will keep the section in a container and not spread the full-width.
Top/Bottom Spacing
You can choose to add space (padding) above and below the section by adjusting the 'top spacing' and 'bottom spacing' settings.
Animation
The 'animation' setting will determine how the section 'loads in' . The options for animation are: 'none,' 'fade in,' 'fade in down,' 'fade in left,' 'fade in right,' 'slide in left,' 'slide in right,' and 'zoom in.'
Advanced
In the advanced settings, you can add in your own CSS class and custom CSS.
More information about using the Advanced CSS feature.
In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!
The 'Custom CSS' field is where you can add in the actual CSS code.
Examples
Example 1
Settings
- Gallery position - right
- Show description - enabled
- Show tags - enabled
- Show social media share icons - enabled
- Width - standard
Example 2
Settings
- Show arrows - enabled
- Magnify on hover - enabled
- Gallery position - right
- Thumbnails - bottom
- Show description - enabled
- Show dynamic checkout button - enabled
- Show description - enabled
- Description position - above product form
- Show social media share icons - enabled
Mobile Layout
When viewed on a mobile device, the Featured Product section stacks vertically with the product image at the top:
