Featured Products
A heading and supporting copy on the left, a “shop all” link on the right, then a responsive grid of product cards below. Optional small print at the bottom.
Used on the homepage as “Find the right MigreLief for you.”
Layout
Section titled “Layout”The grid is one column on mobile, two from xs, four from lg. Card count is
whatever you add — four fills the desktop row exactly.
Settings
Section titled “Settings”| Setting | What it does |
|---|---|
| CTA mode | Quick add puts an add-to-cart button on each card. Details links through to the product page instead. |
| Disclaimer | Small print centred below the grid. Leave empty to hide it. |
| Text theme | Light = dark green text. Dark = white text with inverted components. |
| Background gradient | CSS background with a gradient picker, any number of stops. Empty = transparent. |
| Padding | Top and bottom, set separately for mobile, tablet and desktop. |
The disclaimer is a section setting, not a block
Section titled “The disclaimer is a section setting, not a block”Deliberate. It’s regulatory small print, so the styling is locked — 12px, centred, muted green — and it always sits below the grid. Merchants own the wording; the section owns the appearance.
The standard FDA text ships in the preset:
*These statements have not been evaluated by the Food and Drug Administration. This product is not intended to diagnose, treat, cure, or prevent any disease.
Blocks
Section titled “Blocks”Static blocks (fixed positions, always present):
- Title — the section heading
- Rich text — supporting copy below the title
- Buttons — the “shop all” link on the right
Repeatable:
- Product row card — one per product
- Four cards fill the desktop grid cleanly. Five wraps one onto a second row on its own.
- Badges come from product tags automatically — see Product Row Card. You usually don’t need to set them per card.
- Match the gradient’s last stop to the next section’s first stop for a seamless transition.