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 Collection Section
The homepage is the perfect place to showcase the products your excited about and promote the items that you want your customers to see. These could be your 'New Arrivals' collection, 'Sale' collection, or products that you just really want to show off! Adding the 'Featured Collection' section to your homepage is a quick and effective way to group these items together.
The 'Featured Collection' section allows you to choose between a traditional 'grid-based layout' or a more modern 'slider layout' to display the products. In order to set up a Featured Collection, click into Customize (your Theme Editor) > Sections > Add Section > Featured Collection.
You can choose to have the product title and price visible below the product thumbnail image, or you can choose to have it only display when the customer hovers over the product thumbnail image (Theme Settings > Product Grid > Product Thumbnails > 'Show product information on hover').
Enabling the 'Quick Shop' option will also display a button when a customer hovers over the product thumbnail image; when clicked, this opens a modal window with a partial product description and an Add to Cart button. This is a quick way to let your customers get a bit more detail about a product or even purchase it without having to go through the full product page. Clicking the actual product image, meanwhile, takes the shopper to the full product detail page.
The 'Quick Shop' can be enabled by heading into Customize > Theme Settings > Product Grid > Quick Shop.
For any 'New,''Sale,' 'Coming Soon,' 'Pre-Order,' 'Best Seller,' or 'Staff Picks' products you have, you can display product stickers on the product thumbnail images in the Featured Collection by enabling them in Theme Settings > Product Grid > 'Show sale stickers'.
Featured Collection Section Settings
The section settings determine the look and layout of this section! Here, you can choose the collection you'd like to feature and also select the product, layout and advanced settings.
Product
The product settings include options for the product thumbnail images in the collection.
Products per row
Here you can choose how many products you'd like to show per row. You can choose between 2 - 7.
Products per row on mobile
For products per row on mobile, you can choose either 1 or 2.
Limit products
Here you can limit the number of products you'd like to show. You can choose between 3 - 50.
Align to height/Product image height
While we recommend uploading product images that are the same size and orientation for consistency, you might have some that are a little different in size! If you enable the 'align to height' setting, this will match the height of all the thumbnail images, which you can adjust with the 'product image height' slider. This will help if your images look unaligned.
Layout
The layout settings include options to configure the presentation of the featured collection.
Collection layout
In the 'collection layout' setting, you can either choose to display your featured collection as a grid or slider.
Width
You can choose between 'wide' and 'standard' for the width of this section. Selecting 'wide' will spread this section out full-width. Choosing 'standard' will keep the section in a container and not spread the full-width.
Show gutter
When enabled, the 'show gutter' setting will add space (margin) in between your product thumbnail images. If you don't want space between the promotions and want them to be flush with each other, you can disable this setting.
Top/Bottom spacing
You can choose to add space (padding) above and below the section by adjusting the 'top spacing' and 'bottom spacing' settings.
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:
- Collection layout - slider
- Products per row - 3
- Width - wide
Example 2
Settings:
- Collection layout - grid
- Products per row - 5
- Show gutter - enabled
- Width - wide
- Custom CSS added to hide section title:
-
.heading-wrapper {
display: none;
}
-
Mobile layout
When viewed on a mobile device, if the 'collection layout' is set to 'slider', it will still remain a slider where you can swipe through the images.
If the 'collection layout' is set to 'grid', the 'featured collection' will remain as a grid layout on mobile as well. You can select to either have 1 or 2 products per row by adjusting the 'Products per row on mobile' setting.
