> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/options/storefront-display-and-design/match-your-theme-style.md).

# Match your theme style

One setting that makes the widget inherit your theme's fonts, colors, and control styling, on supported themes.

**Match theme style** makes the widget use your theme's appearance instead of the app's default styling. On a supported theme, this one setting replaces most of the work of matching the color and typography settings by hand.

Check the setting before you change anything: if your store was running a supported theme when you installed the app, it is already on.

## It may already be on

When you install the app, it looks at your published theme. If that theme is one it has styling for, **Match theme style** is turned on for you, so the widget matches from the start.

This happens **once, at install**. It does not follow you afterwards:

* Switch to a different supported theme later, and you turn the setting on yourself.
* Stores that installed the app before this existed are not changed.
* If anything goes wrong while checking, the setting is simply left off.

## Where it is

**Settings** > **Settings** > **Design** > **Theme style** > **Match theme style**.

Beside the setting is a link to the list of supported themes, which is the list below.

<figure><img src="https://3141646361-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkMyxhAk2ZlJa4wZQGfBI%2Fuploads%2Fgit-blob-e7a3e32c104eae386ef9f65e4030b1422d795fb2%2F2026-09-07_11-10-57.png?alt=media" alt="The Match theme style switch with its supported themes link"><figcaption><p>One switch, and a link to check whether your theme is covered.</p></figcaption></figure>

## Supported themes

The app includes styling for these themes. Support is per theme **and per theme version**, and the app uses the closest version it has to the one you are running.

The table is ordered by **ID**, Shopify's theme store ID. It identifies a theme regardless of the name it is sold under, which matters because several of these are sold under more than one name. **Theme** is the standard name; **Also sold as** lists the others. If you run one of those names, the styling for that theme applies.

<table><thead><tr><th width="110">ID</th><th width="250">Theme</th><th>Also sold as</th></tr></thead><tbody><tr><td><code>57</code></td><td>Sunrise</td><td></td></tr><tr><td><code>141</code></td><td>Fashionopolism</td><td></td></tr><tr><td><code>230</code></td><td>Expression</td><td></td></tr><tr><td><code>304</code></td><td>Responsive</td><td></td></tr><tr><td><code>459</code></td><td>Vantage</td><td></td></tr><tr><td><code>567</code></td><td>Mr Parker</td><td></td></tr><tr><td><code>568</code></td><td>Symmetry</td><td>Amara</td></tr><tr><td><code>606</code></td><td>Blockshop</td><td></td></tr><tr><td><code>623</code></td><td>Testament</td><td></td></tr><tr><td><code>677</code></td><td>Showcase</td><td></td></tr><tr><td><code>686</code></td><td>Icon</td><td></td></tr><tr><td><code>714</code></td><td>Focal</td><td></td></tr><tr><td><code>718</code></td><td>Grid</td><td></td></tr><tr><td><code>732</code></td><td>Canopy</td><td></td></tr><tr><td><code>739</code></td><td>Pipeline</td><td>Pahoa</td></tr><tr><td><code>757</code></td><td>Colors</td><td></td></tr><tr><td><code>801</code></td><td>Flow</td><td></td></tr><tr><td><code>833</code></td><td>Local</td><td>Emerge</td></tr><tr><td><code>838</code></td><td>Empire</td><td></td></tr><tr><td><code>855</code></td><td>Prestige</td><td></td></tr><tr><td><code>857</code></td><td>Impulse</td><td></td></tr><tr><td><code>859</code></td><td>Cascade</td><td></td></tr><tr><td><code>868</code></td><td>Broadcast</td><td></td></tr><tr><td><code>887</code></td><td>Dawn</td><td></td></tr><tr><td><code>902</code></td><td>Expanse</td><td></td></tr><tr><td><code>910</code></td><td>Baseline</td><td></td></tr><tr><td><code>939</code></td><td>Beyond</td><td></td></tr><tr><td><code>1114</code></td><td>Bullet</td><td></td></tr><tr><td><code>1356</code></td><td>Sense</td><td></td></tr><tr><td><code>1363</code></td><td>Crave</td><td></td></tr><tr><td><code>1368</code></td><td>Craft</td><td></td></tr><tr><td><code>1399</code></td><td>Be Yours</td><td></td></tr><tr><td><code>1431</code></td><td>Studio</td><td></td></tr><tr><td><code>1434</code></td><td>Taste</td><td></td></tr><tr><td><code>1499</code></td><td>Colorblock</td><td></td></tr><tr><td><code>1500</code></td><td>Ride</td><td></td></tr><tr><td><code>1567</code></td><td>Refresh</td><td></td></tr><tr><td><code>1608</code></td><td>Athens</td><td>Pharm</td></tr><tr><td><code>1609</code></td><td>Xtra</td><td>Vailt</td></tr><tr><td><code>1611</code></td><td>Zest</td><td></td></tr><tr><td><code>1615</code></td><td>Yuva</td><td></td></tr><tr><td><code>1621</code></td><td>Stiletto</td><td>Tapestry</td></tr><tr><td><code>1651</code></td><td>Thrive</td><td>Local</td></tr><tr><td><code>1657</code></td><td>Enterprise</td><td></td></tr><tr><td><code>1667</code></td><td>Avante</td><td></td></tr><tr><td><code>1751</code></td><td>Taiga</td><td>Meadow</td></tr><tr><td><code>1762</code></td><td>Reformation</td><td>Sunshine</td></tr><tr><td><code>1826</code></td><td>Combine</td><td></td></tr><tr><td><code>1839</code></td><td>Blum</td><td></td></tr><tr><td><code>1841</code></td><td>Origin</td><td></td></tr><tr><td><code>1864</code></td><td>Publisher</td><td></td></tr><tr><td><code>1878</code></td><td>Neat</td><td></td></tr><tr><td><code>1891</code></td><td>Spotlight</td><td></td></tr><tr><td><code>2048</code></td><td>Eurus</td><td>Whiff</td></tr><tr><td><code>2077</code></td><td>Gain</td><td>Mio</td></tr><tr><td><code>2138</code></td><td>Berlin</td><td></td></tr><tr><td><code>2221</code></td><td>Xclusive</td><td></td></tr><tr><td><code>2240</code></td><td>Next</td><td></td></tr><tr><td><code>2316</code></td><td>Minimalista</td><td></td></tr><tr><td><code>2328</code></td><td>Cello</td><td></td></tr><tr><td><code>2412</code></td><td>Concept</td><td></td></tr><tr><td><code>2481</code></td><td>Horizon</td><td></td></tr><tr><td><code>2514</code></td><td>Murmel</td><td>Aesthetic and Flirt</td></tr><tr><td><code>2515</code></td><td>Monk</td><td></td></tr><tr><td><code>2566</code></td><td>Veena</td><td></td></tr><tr><td><code>2576</code></td><td>Shine</td><td></td></tr><tr><td><code>2684</code></td><td>Wonder</td><td></td></tr><tr><td><code>2698</code></td><td>Release</td><td></td></tr><tr><td><code>2699</code></td><td>Trade</td><td></td></tr><tr><td><code>2738</code></td><td>Rise</td><td></td></tr><tr><td><code>2779</code></td><td>Luxe</td><td></td></tr><tr><td><code>2801</code></td><td>Nordic</td><td></td></tr><tr><td><code>2821</code></td><td>Sleek</td><td></td></tr><tr><td><code>2881</code></td><td>Satoshi</td><td></td></tr><tr><td><code>2896</code></td><td>Outsiders</td><td></td></tr><tr><td><code>2967</code></td><td>Ultra</td><td>Grip</td></tr><tr><td><code>2989</code></td><td>Ascent</td><td></td></tr><tr><td><code>3027</code></td><td>Ignite</td><td></td></tr><tr><td><code>3038</code></td><td>Swiss</td><td></td></tr><tr><td><code>3039</code></td><td>Motto</td><td></td></tr><tr><td><code>3051</code></td><td>Boutique</td><td>Noom</td></tr><tr><td><code>3094</code></td><td>Nimbus</td><td></td></tr><tr><td><code>3247</code></td><td>Hyper</td><td></td></tr><tr><td><code>3422</code></td><td>Allure</td><td>Carrara and Bijou</td></tr><tr><td><code>3425</code></td><td>Monochrome</td><td></td></tr><tr><td><code>3486</code></td><td>Edge</td><td></td></tr><tr><td><code>3605</code></td><td>Purity</td><td></td></tr><tr><td><code>3620</code></td><td>Pitch</td><td></td></tr><tr><td><code>3621</code></td><td>Atelier</td><td></td></tr><tr><td><code>3622</code></td><td>Fabric</td><td></td></tr><tr><td><code>3623</code></td><td>Dwell</td><td></td></tr><tr><td><code>3624</code></td><td>Heritage</td><td></td></tr><tr><td><code>3625</code></td><td>Ritual</td><td></td></tr><tr><td><code>3626</code></td><td>Savor</td><td></td></tr><tr><td><code>3627</code></td><td>Tinker</td><td></td></tr><tr><td><code>3628</code></td><td>Vessel</td><td></td></tr><tr><td><code>3716</code></td><td>Maximize</td><td>Tender, Swift, Various, Vast, and Vigor</td></tr><tr><td><code>3745</code></td><td>Supreme</td><td>Heatwave, Royce, Realm, and Rose</td></tr><tr><td><code>3754</code></td><td>Krank</td><td></td></tr><tr><td><code>3773</code></td><td>Stockist</td><td>Verve, Optic, Residence, and Porter</td></tr><tr><td><code>4032</code></td><td>Pebble</td><td>Bunie</td></tr><tr><td><code>4041</code></td><td>Athora</td><td>Quantum</td></tr><tr><td><code>4276</code></td><td>Helix</td><td></td></tr><tr><td><code>4961</code></td><td>Stylist</td><td></td></tr><tr><td><code>5077</code></td><td>Analog</td><td></td></tr><tr><td><code>5231</code></td><td>Radian</td><td></td></tr><tr><td><code>5359</code></td><td>Node</td><td>Fuse and Fluid</td></tr><tr><td><code>5560</code></td><td>Sky</td><td></td></tr><tr><td><code>5665</code></td><td>Cielo</td><td>Miro</td></tr><tr><td><code>5679</code></td><td>Chronicle</td><td>Tide</td></tr></tbody></table>

If your theme is not listed, see [If your theme is not supported](#if-your-theme-is-not-supported) below.

{% hint style="info" %}
The list is updated over time. If your theme is not listed here, check the **View supported themes** link beside the setting.
{% endhint %}

## What it does

With the setting on, the widget takes its input and button styling, control shapes, and typography from your theme rather than from the app's defaults.

The widget then looks like part of the product page rather than a separate form.

## What it does not do

<table><thead><tr><th width="290">Not covered</th><th>Where to handle it</th></tr></thead><tbody><tr><td>Where the widget sits on the page</td><td><a href="/options/storefront-display-and-design/widget-placement.md">Widget placement</a></td></tr><tr><td>Behavior — tooltips, height limits, selected values</td><td><a href="/options/storefront-display-and-design/widget-behavior.md">Widget behavior</a></td></tr><tr><td>Anything specific to your own customizations of the theme</td><td><a href="/options/storefront-display-and-design/custom-css.md">Custom CSS</a></td></tr><tr><td>The builder's preview panel</td><td>Nothing — the preview always uses the app's own styling. Compare with <strong>View in Store</strong></td></tr></tbody></table>

## Steps

{% stepper %}
{% step %}

### Turn on Match theme style

**Settings** > **Settings** > **Design** > **Theme style**.
{% endstep %}

{% step %}

### Save

{% endstep %}

{% step %}

### Check a real product page

Use **View in Store** from the builder. The builder preview does not display the change because it never uses your theme's styling.
{% endstep %}

{% step %}

### Adjust anything that is left

Use the [color](/options/storefront-display-and-design/colors.md), [border, and typography](/options/storefront-display-and-design/borders-and-typography.md) settings, which continue to work alongside this one.
{% endstep %}

{% step %}

### Check on a phone

Check the widget again after any theme update.
{% endstep %}
{% endstepper %}

## If your theme is not supported

Turning the setting on causes no problems. The widget keeps the app's own styling. Style it manually instead:

{% stepper %}
{% step %}

### Match your fonts

**Settings** > **Design** > **Typography**. Set the four text styles to your theme's fonts and sizes. See [Borders and typography](/options/storefront-display-and-design/borders-and-typography.md).
{% endstep %}

{% step %}

### Match your colors

**Settings** > **Design** > **Color**. Copy the values from your theme's own settings so they match exactly. See [Colors](/options/storefront-display-and-design/colors.md).
{% endstep %}

{% step %}

### Match your border weight and radius

Also in **Design**. Rounded controls in a theme with square controls are the most noticeable mismatch.
{% endstep %}

{% step %}

### Fill any gaps with custom CSS

See [Custom CSS](/options/storefront-display-and-design/custom-css.md).
{% endstep %}

{% step %}

### Or contact support

Support can help with theme styling. See [Contact support](/options/help/contact-support.md).
{% endstep %}
{% endstepper %}

## Notes

* This setting is store-wide, like everything in **Design**.
* Support is per theme version, and the app uses the nearest version it has. A very old or very new version of a supported theme may match less closely.
* A heavily customized copy of a supported theme may not match, because the app styles the original theme rather than your changes.
* Color, border, and typography settings still apply, so you can turn this on and then adjust them.