Featured collection
Overview:
The Featured Collection section allows you to showcase a curated set of products from a chosen collection. It offers two layout modes (grid or slideshow), supports advanced customization for product cards, and includes optional headings, descriptions, and navigation controls. This section is ideal for drawing attention to specific collections or promotional product groups.
Section Configuration:
Collection Source
| Setting |
Description |
| Collection |
Selects the collection from which products will be displayed. |
| Maximum Products to Display |
Sets the maximum number of products shown from the selected collection (4–24). |
Section Heading & Description
| Setting |
Description |
| Heading |
Displays a customizable heading above the collection. |
| Heading Size |
Defines the heading’s visual size (e.g., H1 to H6). |
| Heading Weight |
Adjusts the font weight for the heading (e.g., light, bold). |
| Description |
Adds an optional rich text description below the heading. |
| Description Size |
Sets the font size for the description text. |
| Description Weight |
Controls the font weight for the description text. |
| Setting |
Description |
| Enable View All Button |
Toggles a button linking to the full collection page. |
| Button Label |
Sets the text for the "View all" button. |
| Open Link in New Tab |
Opens the button link in a new browser tab when enabled. |
Product Card Settings
| Setting |
Description |
| Image Ratio |
Selects the aspect ratio for product images (e.g., square, portrait). |
| Product Title Size |
Sets the font size of product titles within cards. |
| Product Title Weight |
Defines the font weight of product titles. |
| Text Alignment |
Sets text alignment (left, center, right) for product card content. |
| Enable Add to Cart Button |
Displays an “Add to Cart” button on product cards. |
| Show Price |
Displays the product price. |
| Show Vendor |
Shows the vendor name on product cards. |
| Show Swatches |
Displays product color swatches (if applicable). |
| Show Stock Tag |
Indicates stock availability (e.g., In Stock, Sold Out). |
| Show Sale Tag |
Displays a badge when a product is on sale. |
| Show Custom Tag |
Displays custom tags configured for the product. |
| Show Feature List |
Enables a feature list on product cards, if available. |
| Show Highlights |
Displays product highlights on cards, if available. |
Grid Layout Settings
| Setting |
Description |
| Desktop Columns |
Sets the number of product columns on desktop (2–4). |
| Mobile Columns |
Defines the number of columns shown on mobile devices (1 or 2). |
Slideshow Settings
| Setting |
Description |
| Show Pagination Dots |
Displays navigation dots beneath the slideshow. |
| Show Progress Bar |
Shows a progress bar that visualizes slide timing. |
| Show Navigation Arrows |
Displays previous/next arrows on the slideshow. |
| Enable Auto Play |
Automatically cycles through slides. |
| Slide Interval |
Sets the delay between slides in milliseconds (2000–9000ms). |
Layout Options
| Setting |
Description |
| Layout Style |
Chooses between a grid layout or slideshow presentation. |
| Gap Between Items |
Controls spacing between product items (0–60px). |
| Container Width |
Sets section width to contained (container) or full-width (container-fluid). |
| Enable Side Padding |
Toggles side padding within the container. |
| Text Alignment (Desktop) |
Aligns text left, center, or right on desktop. |
| Text Alignment (Mobile) |
Aligns text on mobile devices. |
| Color Scheme |
Applies a predefined color scheme to the section. |
Section Spacing
| Setting |
Description |
| Top Padding |
Sets vertical spacing above the section (0–100px). |
| Bottom Padding |
Sets vertical spacing below the section (0–100px). |