Product Feature Card
The product feature card block is a carousel slide that showcases a product with a tall portrait image, optional hover media (image or autoplay video), a colored tag line, description text, and a call-to-action button. On hover, the entire card group fills the CTA button with the kale brand color. It pulls default images from the product’s nama.product_card_images metaobject and title overrides from custom.total_kitchen_card_override, so cards can look polished without manual configuration.
Settings
Section titled “Settings”| Setting | What it does |
|---|---|
| Product | The Shopify product to feature. Drives default image, title, and CTA link. |
| Title override | Replaces the product title. Falls back to the metaobject override, then the product title. |
| Description | A short text blurb displayed beneath the title. No metaobject fallback for this field. |
| Tag text | An optional colored label above the title, useful for categories like “New” or “Best Seller.” |
| Tag color | The color of the tag text. Defaults to kale green. |
| CTA label | The button text. Defaults to “Shop [Product Name]” when left blank. |
| CTA URL | The button destination. Defaults to the product URL. |
| Image | The main card image. Falls back through metaobject card image, then the product featured image. |
| Mobile image | Optional tightly-cropped image for the mobile peek carousel. Renders with object-cover. Falls back to the main image if not set. Upload this — the peek effect looks bad without it. |
| Hover media type | Switches hover behavior between a static image and an autoplay video. |
| Hover image | The image shown on hover. Falls back to the second image in the product card metaobject. |
| Hover video | A Shopify-hosted video that autoplays on hover. Only visible when hover type is set to video. |
Used in
Section titled “Used in”- The image fallback chain is generous: block setting, then metaobject override, then metaobject card images, then the product featured image. Most cards need zero manual image work if metaobjects are populated.
- Hover videos autoplay muted and loop. They pause automatically when the cursor leaves the card, so there is no lingering playback.
- The CTA button fills with kale green on group hover, which means hovering anywhere on the card (not just the button) triggers the effect.
- The tag text field is optional. When left blank, the tag line is simply not rendered and the title moves up to fill the space.