Shopping Experiences

For merchants

Every core Shopping Experiences block is styled on the theme's design system, in light and dark mode. You build layouts exactly as before.

What the theme styles

• Text: headings, body text and the lead intro paragraph.
• Images, image sliders and galleries with rounded corners; slider arrows as round 40 px buttons, quiet pill-shaped dots.
• Image bubble rows as circles.
• Image text blocks as hairline cards.
• Product boxes and product sliders with equal card heights (the Card style and Product image ratio settings apply here too).
• Text on image: a dark scrim behind light text, so the text stays readable on any photo.
• YouTube and Vimeo: a themed consent card before the video loads.
• CMS forms (contact, newsletter) use the theme's form styles.

What stays as you set it

The theme never overrides what an editor sets in the layout: block and section margins, background colours and background media, sizing mode and alignment. Section spacing is scaled by Layout → Section spacing in the theme configuration.

Opt-in looks: CSS classes

Three extra looks for any block. In Content → Shopping Experiences, open the layout, select the block, open its settings and enter the class in CSS class (under Advanced). Separate several classes with a space.

Class	Look
kmh-cms-surface	Tinted panel with a hairline border and inner padding
kmh-cms-cards	Each column of the block becomes a card
kmh-cms-center	Centred text in every column

In rich text

In a Text element, switch the editor to HTML (code view) and use:

Markup	Result
<p class="kmh-eyebrow">New season</p>	Small label above a heading
<p class="lead">…</p>	Larger intro paragraph
<a class="btn btn-primary" href="…">Shop now</a>	Primary button
<a class="btn btn-outline-secondary" href="…">Learn more</a>	Secondary button

Check in dark mode

Background colours and images you set in a layout are kept in dark mode. A white section background stays white — check your key layouts with the dark-mode button and choose backgrounds that work in both modes, or none.

Demo homepage (for developers)

The theme repository contains a script that builds a homepage using every block that works outside a product or listing page. It is meant for development and staging shops — see Developer → Tests.