Customizing the design

Every offer has a Design panel on the first wizard step. It sets the block's theme, accent color, colors, corners, spacing and width, and the preview on the right updates as you change it. Nothing here requires theme code.

Where to find it

Open the offer, scroll to the collapsible card headed Design, and click it to expand. The Theme and accent row stays visible even when the card is collapsed, because those two choices shape a block more than anything else.

Once you change anything, the card shows a Customized badge.

Theme

Five shipped looks, each drawn as a miniature of its own card:

Inline — no card; the block sits directly on the page background. This is the default.
Card — white card with a light border and a soft shadow.
Dark — dark card with light text.
Editorial — warm off-white with a squared-off border.
Soft — white with rounded corners and a lifted shadow, no visible border.

Accent

One accent color does all the pointing in a block — badges, the selected state, the button. Six presets are offered: Ink, Cobalt, Teal, Amber, Berry and Violet. There is also a custom color control for an exact brand hex.

An unset accent falls back to the theme's own default, or to Ink.

Fine-tuning

Expand the card for the rest.

Colors — Card background, Border, Text, Title, Button background and Button text. Anything you leave unset uses the block's built-in value.

Shape and spacing — sliders paired with the exact pixel value they produce:

Control	Range
Corner radius	0–40 px
Inner spacing	0–48 px
Title size	10–32 px
Space above & below	the gap between the block and what surrounds it
Maximum width	how wide the block may grow

Width — Full width or Contained.

Reset to default clears everything you set and puts the block back on its shipped design.

Setting the design before you create the offer

The Create an offer page has the same Theme and accent controls in its top right corner. Change them there and every preview card restyles at once — and whichever card you then Choose opens the wizard with that design already applied. It is often quicker than adjusting afterwards.

Editing the words

Colors are one panel; copy is another. On the same step, Text & translations edits the block's headings, badges, button labels and sold-out text, with a tab per locale your store publishes. Leave a field blank to keep the shipped English default.

Custom CSS

If the design controls do not go far enough, expand the Advanced card underneath.

CSS class — the class the storefront block carries, shown after the offer's first save. It is unique to this offer, so theme CSS can target it alone.
Custom CSS — a box that applies to this offer only. The preview reflects it as you type; the storefront gets it on save.

Blocks expose documented CSS variables and shadow parts rather than a stable internal DOM. Write against those and your CSS will survive updates; write against internal structure and it may not. See Styling Hype's storefront components, Offer block CSS variables and Offer block ::part() hooks.

Designs and A/B tests

Design is testable. When you are editing an A/B variant, the same Design panel edits that variant's design, marked with a Variant badge, and blank values fall back to the base design. Reset to base design clears a variant's overrides.