About Featured Collections
Featured collections are highlighted groups of products that you want customers to explore. They often serve as quick links to popular or seasonal categories, helping improve navigation and boosting sales for key collections.
Examples of Featured Collections:
- Shop for Men / Shop for Women: For gender-specific product categories.
- Summer Collection / Winter Collection: Seasonal highlights or promotions.
- Best Sellers / New Arrivals: Draw attention to popular or recently added items.
These sections are usually placed prominently on the Home Page to attract customer attention.
How to Design a Featured Collection List with the Hero Banner Element
Step 1: Create a Row with 3 Columns
- Open the GemPages editor and create a new Row with 3 columns:
Locate the Row element in the Element Library.
Drag and drop the 3 Column Row onto your page.
This layout will allow you to display three featured collections side by side.
Step 2: Add the First Hero Banner
- Drag and Drop the Hero Banner
In the Element Library, find the Hero Banner element.
Drag and drop it into the first column of the row.
- Customize the Background Image:
Click on the Hero Banner to access its settings.
Upload a background image that represents the first collection.
- Add Text and Button
Edit the text to match the collection title.
Customize the button text and link it to the respective collection page.
- Add a Hover Effect for Visual Appeal:
Enable the Zoom on Hover feature in the Hero Banner settings.
Set the scale value to determine how much the image enlarges when hovered over.
Adjust the time to control the speed of the zoom animation for a smooth experience.
Step 3: Duplicate the Hero Banner for Other Columns
- Duplicate the First Hero Banner
Click the 3-Column Row to open its settings.
Under the Column section, you can duplicate the first Column using the buttons shown in the image below.
Delete the redundant columns to have 3 duplicated columns.
- Customize Each Column:
Replace the background image, text, and button for each column to represent a different collection.
Ensure the design remains consistent across all columns for a cohesive look.
Step 4: Optimize for Mobile
Switch to Mobile View in the GemPages editor.
Adjust the Layout for Smaller Screens. Refine Image, Text, and Button Sizes.
