Featured collection

The Featured Collection Section allows merchants to showcase specific product collections by setting collection images, titles, and product card layouts, effectively enhancing the visual impact and display efficiency. This section supports custom collection content, carousel functionality, color schemes, and layout options to ensure a consistent user experience on both desktop and mobile devices, helping to increase user engagement and sales.

Detailed Instructions

1. Collection Image Settings

• Display Collection Image: Check this option to enable the display of collection images, enhancing the section’s visual appeal.

• Color Scheme: Select an appropriate color scheme for the collection image background and text to improve the display effect.

• Collection Image Position (Desktop): Choose the position of the collection image on desktop, either left or right.

• Image Upload: Click the "Select Image" button to upload or browse available images to use as the main collection image.

• Collection Image Opacity: Adjust the opacity slider to control the transparency of the image according to different visual needs.

• Custom Collection Title: Enter a custom collection title; if not set, the default title will be used.

• Title Uppercase: Check this option to display the collection title in uppercase for greater prominence.

2. Content Settings

• Select Collection: Choose the product collection to display from the dropdown menu.

• Number of Products Displayed: Use the slider to set the number of products displayed in the featured collection.

• Desktop Carousel Settings: Enable the carousel function to display the collection in a carousel format on desktop.

• Navigation Buttons: Enable navigation buttons to help users browse the product collection easily on desktop.

• Pagination Dots: Enable pagination dots so users can navigate between product sets.

3. Product Card Settings

• Image Ratio: Choose the image ratio for product cards, either square or portrait, to align with the overall design.

• Content Wrap: Enable this option to wrap content within the product cards for a more compact display.

• Content Wrap Color Scheme: Select a suitable color scheme for the content wrap’s background and text.

• Text Alignment: Set the alignment of text within the product cards, choosing between left, center, or right alignment.

4. Mobile Settings

• Enable Mobile Carousel: Ensure the carousel function is also enabled for mobile, enhancing the mobile user browsing experience.

Usage Suggestions

1. Visual Consistency

• Choose images and color schemes that match the brand's visual identity to ensure that the collection display aligns with the brand image, increasing user recognition.

• Make good use of the image opacity feature to enhance contrast between images and text, making the titles and descriptions stand out.

2. Collection Image Selection

• The collection image should relate to the product collection and convey the product features, attracting user attention. For example, use images showcasing key products or product scenarios.

• Ensure high-quality images with sufficient clarity to display well on both desktop and mobile.

3. Product Quantity Control

• It is recommended to limit the number of displayed products to a reasonable range (e.g., 6 to 10) to avoid overwhelming users and causing browsing fatigue.

• If the collection contains many products, enabling the carousel function can improve page efficiency while enhancing the browsing experience.

4. Mobile Friendliness

• As mobile screens are smaller, enabling the carousel and pagination dots can better display the collection, making it easier for users to browse.

• Test the appearance of images and text on mobile to avoid layout issues caused by long text or improper image ratios.

5. Navigation and User Experience

• Enable navigation buttons on desktop, allowing users to quickly switch between product collections, improving usability and interactivity.

• For special promotions or limited products, highlight relevant information in the collection title and description to increase purchasing interest.

6. Content Richness

• Use the content wrap feature in product cards to display detailed product information, helping users better understand the product’s features and benefits, thereby increasing conversion rates.

• Flexibly use text and content alignment features to make product card layouts more aesthetically pleasing and organized, enhancing the visual comfort for users.