Theme Playground

Storefront

ContentWithImageProductData

Feature section that combines a lead image, editorial copy, USP list, and optional product-card content.

Best for

product highlightslaunch sectionsfeature storytelling

Import

import { ContentWithImageProductData } from "@enadhq/enad-react-sdk/client/storefront"

When to use it

Use ContentWithImageProductData when a section should pair one strong product image with supporting copy, benefit bullets, and a direct path deeper into the product story.

Composition notes

The section is prop-driven. image, preheader, heading, and body define the narrative, usps adds a compact checklist, and productCards lets you extend the section with related commerce content.

Behavior and theming guidance

Keep the USP list short and concrete. This component works best when the image and the bullets support the same sales story instead of trying to introduce several competing messages.

Examples

Live examples you can edit directly in the sandbox.

1 example

Product highlight

Use the built-in USP list when the section should explain why a featured product matters at a glance.

Slots

bodyimageheadingrootinnercopypreheaderimageAreaproductCardsuspListuspItemuspIconbuttonArea

Component Sets

Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.

Props

PropTypeDefaultDescription
imagestring
No description yet.
preheaderstring
No description yet.
headingstring
No description yet.
bodystring
No description yet.
uspsstring[]
No description yet.
buttonLabelstring
No description yet.
buttonHrefstring
No description yet.
productCardsstring
No description yet.
classNamesPartial<Record<import("@enadhq/enad-react-sdk/client/storefront/types").ContentWithImageProductDataSlot, string>>
No description yet.
Slot keys
bodyimageheadingrootinnercopypreheaderimageAreaproductCardsuspListuspItemuspIconbuttonArea
classNamestring
No description yet.