> For the complete documentation index, see [llms.txt](https://easify.gitbook.io/easify-box-bundle-builder-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://easify.gitbook.io/easify-box-bundle-builder-docs/user-guide/visual-editor/advanced-feature/match-store-theme.md).

# Match Store Theme

Instead of spending hours manually setting up the color, font, and border radius for every element to match your store's theme, now it takes only **1 click**.

## What’s the Purpose?

Match Store Theme scans your store's theme and applies it across your entire box, down to the smallest detail — so your box looks like a natural part of your store, not something bolted on.

* **Color** — matched across every element, including individual states like hover, default, or selected
* **Typography** — headings and text are matched to your store's font family. Some system fonts may use a generic font family instead of the exact font shown in the Theme Editor.
* **Border radius** — matched across every element in your box

## How It Works?

### Before You Even Start Building

When creating a new box, the **Match store theme** **toggle** is on by default at the template step. Pick a template and click **Start building** — your box is already matched the moment you enter the editor.

Turned it off? No worries, you can still match your theme anytime from inside the **Visual Editor**.

<figure><img src="https://2136649288-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMSHFLDPGBWSkDmxkdLpP%2Fuploads%2Fe45kOHLfi79JQcONkQH1%2Fimage.png?alt=media&amp;token=ed07421c-fc5e-4e56-b190-7d0e21689948" alt=""><figcaption></figcaption></figure>

### In Visual Editor

#### **1. Match Your Whole Box**

In the Visual Editor, click the **Match store theme icon** in the top bar, **or** open **Theme Settings → Color Schemes** to use this feature.

<figure><img src="https://2136649288-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMSHFLDPGBWSkDmxkdLpP%2Fuploads%2FMTrTbtmJH23eCkFtFwsT%2Fimage.png?alt=media&amp;token=efe5f30a-91a4-4d11-831f-f9e7e743a7f4" alt=""><figcaption><p><strong>Match store theme icon</strong> in the top bar</p></figcaption></figure>

<figure><img src="https://2136649288-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMSHFLDPGBWSkDmxkdLpP%2Fuploads%2FITDqCY2u1MMMw7CVyuvJ%2Fimage.png?alt=media&amp;token=96715d16-501f-416d-8d9e-a4eadcaecbb2" alt=""><figcaption><p><strong>Theme Settings → Color Schemes</strong></p></figcaption></figure>

* **Pick a scheme:** Easify pulls ready-made color schemes straight from your store's theme. Click any scheme, and your color, typography, and border radius update to match instantly.
  * **Default:** not happy with the last few changes? Click Default to go back to how your box looked right before you started matching.
* **Theme dropdown:** choose which store theme to match. By default, it matches your live theme, but you can also match a draft theme. (Demo themes you haven't purchased on Shopify can't be synced.)
* **Sync icon:** updated your store's theme recently? Click sync to pull in the latest changes before matching again.

#### **2. Match a Single Element**

Click any element in the Visual Editor, then click its **Match store theme** button. The same picker shows up (same theme dropdown, sync, and schemes) but the changes **only apply to that one element**.

<figure><img src="https://2136649288-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMSHFLDPGBWSkDmxkdLpP%2Fuploads%2FRgDntaKg78ndjd1RDnNh%2Fimage.png?alt=media&amp;token=80ceee8c-ca78-4a78-a9fb-f2d7e9e1ad42" alt=""><figcaption></figcaption></figure>

## Common Issues

* **About fonts**&#x20;

Shopify's Theme Editor may display a font name that isn't directly available through Shopify's font library. In these cases, Shopify may provide a font family value instead of the exact font, so the font applied in Easify may differ slightly from the font name shown in the Theme Editor. [Learn more about Shopify's font settings →](https://shopify.dev/docs/storefronts/themes/architecture/settings/fonts#system-fonts)

* **About paid themes**

If your store uses a **paid Shopify theme**, you need to purchase the theme **so that** the app can match your box to it.

* **Undo Changes**

&#x20;If you are not satisfied with the result, click **Undo** in the top bar to revert the changes, just like any other edit in the app.

> We always want **your box-building experience to be as easy and effective** as much as possible, and this is just one more step toward that.

### 💬 Need Help?

Have questions about Match Store Theme? Reach out to us anytime via **24/7 live chat**.