Featured collection
Featured collection :
The Featured collection section is probably one of the most-used sections when setting up an Online store. It can be an excellent way to present collections of products to potential customers in a concise and user-friendly layout, aiding product discovery and helping to drive sale.
How to set up the Featured collection section?
- Navigate to customization theme. At the top of the page, click the dropdown to select the Home page template.
- Select “Featured collection” from the left menu.
- Customize this section by using the settings described in the following table:
Customize section settings:
| Settings | Description |
| Collection | Select any collection to display its list of products. |
| Set Countdown end date | End date: Type the date you want the countdown to end. The format must be use as follow: yyyy-mm-dd. End text: Set the any end text. This shows when the end date elapses. |
| Heading | The title for the block. Use the buttons to make the text bold or italicized, or to add an internal/external link. |
| Heading size | The size of the heading text.
|
| Description | Display paragraph-style text in the section. |
| Enable “View all” button if collection has more products than shown | If the collection has more products than set in the Maximum product to show field, then this displays a “View all” button that takes the customers to the collection page. |
| Button label | The text that displays on the button. |
| Full Width Button | Makes the button stretch across the full container width. |
Grid Settings
| Setting | Description |
|---|---|
| Columns on Desktop | Number of columns (2–5) shown on desktop. |
| Rows | Number of rows (1–3) of products to show. |
| Columns on Mobile | Show 1 or 2 columns on mobile. |
| Mobile Column Breakpoint | Define mobile column breakpoint width (416–640px). |
| Hide Quantity Field (Mobile) | Hides quantity selector on mobile devices. |
| Hide Info Bar (Mobile) | Hides extra info (price, ratings, etc.) on mobile. |
| Hide Info Bar (Desktop) | Hides the info bar on desktop. |
| Hide Quick Add (Mobile) | Removes the quick add-to-cart button on mobile. |
| Hide Compare Button (Mobile) | Hides compare button on mobile. |
| Hide Compare Button (Desktop) | Hides compare button on desktop. |
| Show Variant (Color) Switcher | Enables product variant swatches (like color circles). |
Product Card Settings
| Setting | Description |
|---|---|
| Image Ratio | Aspect ratio for product images (adapt, square, portrait, landscape). |
| Card Layout | Layout of product cards: layout I or II. |
| Enable Button Overlay | Places the button over the product image. |
| Center Product Text | Centers product name, price, etc. |
| First Card Expanded | Makes the first card larger (like a feature product). |
| Item Index (Expanded) | Choose which product to feature (based on its index in collection). |
| Expanded Card Columns / Rows | Set the size of the expanded card. |
| Show Secondary Image | Show image on hover. |
| Show Product Rating | Displays star ratings. |
| Show Inventory | Displays inventory count or status (e.g. "Low stock"). |
| Show Savings Badge | Shows savings like "-25%". |
| Show Vendor | Show product vendor (brand name). |
| Show Custom Badges | Displays custom product badges. |
| Enable Compare Button | Shows compare button to compare products. |
| Enable Quick Add Button | Adds quick add-to-cart functionality. |
| Card View | Shows quick add button in a compact card (only visible if quick add is enabled). |
| Enable Animation | Animates product cards on load. |
| Animate Buttons Too | Applies animation to buttons (visible only if animations are on). |
| Enable Quantity Field | Shows quantity input on product card. |
| Show Status as Overlay | Status bar (e.g., "Sold out") overlays the image. |
| Status Bar Position | Choose to show status at top or bottom of product card. |
| Compare Button Position | Choose to show compare button at top or bottom of product card. |
Slideshow Settings (Optional)
| Setting | Description |
|---|---|
| Enable Slideshow | Converts grid into a carousel slider. |
| Autoplay | Automatically scrolls through products in slider mode. |
| Show Navigation Arrows | Show next/prev arrows in slider. |
| Arrow Position | Set arrow position: center, default, or top. |
| Pagination Style | Choose pagination type: none, dots, lines, numbers. |
| Slide Change Interval | Time between slide changes (2–9 seconds). |
Layout & Style Settings
| Setting | Description |
|---|---|
| Text Alignment | Align text left, center, or right. |
| Mobile Text Centering | Center-aligns text on mobile. |
| Full Screen Width | Makes the section stretch full width. |
| Color Scheme | Pick a predefined color scheme. |
Spacing Settings
| Setting | Description |
|---|---|
| Top Padding | Padding above the section (0–100px). |
| Bottom Padding | Padding below the section (0–100px). |