# 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

1. Open **Online Store → Theme Settings** (or your page from **Landing Pages**) and click the block on the canvas.
2. In the left rail, click the pencil (Edit) icon. The panel shows three tabs: **Settings**, **Styles** and **Variants**.
3. Open **Variants** and click the design you want. The canvas updates immediately.
4. 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).
5. 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.
6. 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 empty → the block has a single design (Section, Image and most product blocks). Style it from the **Styles** tab instead.
- My padding and colours disappeared after switching → expected: 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 one → Header and Footer are "Shared across all the store"; make sure you clicked **Save**, then reload the storefront.

## Related
- [Style a block: spacing, background, border, shadow, animation](https://help.dropify.shop/en/guides/style-a-block-spacing-background-border-animation/)
- [Add, move, copy and delete blocks on a page](https://help.dropify.shop/en/guides/add-move-copy-and-delete-blocks/)
- [How to change your store's theme and edit its sections](https://help.dropify.shop/en/store_theme/change-your-store-theme-and-sections/)