Change the design (variant) of a block
Select the block in the editor, open its Variants tab and click another design. The block keeps its content, but any custom styles you added are reset.
Steps
- Open Online Store → Theme Settings (or your page from Landing Pages) and click the block on the canvas.
- In the left rail, click the pencil (Edit) icon. The panel shows three tabs: Settings, Styles and Variants.
- Open Variants and click the design you want. The canvas updates immediately.
- Re-check the Settings tab: some designs expose different options (for example, Product List design 3 adds Number of items in grid / mobile / Tablet, and only Countdown design 3 has its own settings).
- If you had customised spacing, colours or animation in Styles, apply them again; switching a variant resets styles to the design's defaults while keeping the block's data.
- Click Save. If the page is still Unpublished, switch the toggle to Published so visitors see the change.
Tip: in Add Blocks, hover a block that has several designs to open the Available Variants side panel and drag the design you like straight onto the page.
The Button block has ten designs: Design 1 follows your theme's button style, 2 is a retro button with an offset shadow, 3 a glossy gradient pill, 4 a text link with an arrow, 5 a pill with the arrow in its own circle, 6 an outline that fills with your brand colour on hover, 7 a soft tint for quiet actions, 8 a bold order button with a pulsing ring, 9 a frosted glass button for photos and dark sections, and 10 a raised 3D key that sinks when tapped. Every design keeps the button's text, icon and action, including submitting the order when the button is the order form's button.
Common problems
- The Variants tab is emptythe block has a single design (Section, Image and most product blocks). Style it from the Styles tab instead.
- My padding and colours disappeared after switchingexpected: a variant swap resets the block's styles. Set them again in Styles, or press Undo in the top bar to go back.
- The panel says "No Block is Selected"click the block on the canvas first, or pick it from Design Layers (layers icon).
- I switched the Footer or Header design but other pages still show the old oneHeader and Footer are "Shared across all the store"; make sure you clicked Save, then reload the storefront.