> 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/swatch/appearance/customize-a-swatch-style.md). # Customize a swatch style How the style editor works, and what the shared setting groups do. ## Open the editor 1. Go to **Appearance**. 2. Choose the **Product page** or **Collection page** tab — this decides which surface you're editing. 3. Find the style and click **Customize**.
The style editor for Color or custom image swatch, with collapsible setting groups on the left and a live Preview on the right

The Preview follows every change, and the Image/Color and Desktop/Mobile toggles let you check both cases.

The editor has the settings on the left, grouped into collapsible sections, and a **Preview** on the right that updates as you change things. Above the preview: * **Image** / **Color** — preview the style with image swatches or colour swatches. * **Desktop** / **Mobile** — preview at either width. The hint under the preview — *Hover an option to test hover and animation effects* — is worth using: hover states are easy to get wrong and easy to check here. Click **Save** when you're happy. ## Shared setting groups Most styles share the same vocabulary. Not every style has every group — see the [reference](/swatch/appearance/swatch-styles-reference.md). #### 1, Shape and Layout Size and position: **Shape** (**Circle**, **Square**, **Fit text**), **Corner radius**, **Width**, **Height**, **Spacing** between swatches, and **Align content** (**Left**, **Center**, **Right**). Button styles use **Size** (**Small**, **Medium**, **Large**) and **Corner** (**Sharp**, **Round**, **Pill**) instead. On the **Collection page** tab this group also holds **Carousel** — put the swatches on one scrollable line instead of letting them wrap. It is set per style, and only here; the product-page equivalent is the single **Show Carousel** checkbox in [Settings → Swatch on Product Page](/swatch/settings/swatch-on-product-page.md). #### 2, Border **Type** (**None**, **Single**, **Double**), **Thickness**, and a colour for each state: **Default color**, **Hovered color**, **Selected color**. #### 3, Default style / Hover style / Selected style Button, pill and dropdown styles use three parallel groups instead of one Border group — the same handful of fields (**Text color**, **Border color**, **Background color**, and sometimes **Font weight** and **Case**) repeated for each state. Set all three so a shopper can always tell what's selected. #### 4, Hover behavior * **Shadow** — **None**, **One** (a glow) or **Both** (a shadow). * **Image zoom in** — zoom the swatch image slightly on hover. * **Animation** — **None**, **Scale up**, **Scale gentle**, **Scale down**, **Float up**, **Float down**, **Rotate left**, **Rotate right**. {% hint style="info" %} Animations are not available for swatches in carousel mode. {% endhint %} #### 5, Image For styles that render an image swatch: **Width** and **Height** in pixels, and **Background size**: * **Cover** — the image fills the swatch; the edges may be cropped. * **Contain** — the whole image fits inside the swatch; there may be padding. **Width** and **Height** here are the size the app asks for the image at — not the size of the swatch, which comes from **Shape and Layout**. Both start at **150 px**, while a swatch starts at **35 × 35 px**, so by default the app is fetching an image more than four times wider than the chip it ends up in. Bringing the two closer together means a smaller file for every shopper to download: * Swatches rendering at **35 × 35 px** → set the image to **35 × 35 px** as well. * If it looks blurry at that size, raise it to **50–60 px** rather than back to 150. * If you've made the swatch much bigger — say **300 × 300 px** for a fabric close-up — raise the image to match, or the 150 px version gets stretched and goes soft. Because **Width** and **Height** are set separately, they also decide the shape of the image area: equal values give a square, a taller **Height** a portrait, a wider **Width** a landscape. #### 6, Sold out How unavailable values are treated — see [Out-of-stock styles](/swatch/appearance/out-of-stock-styles.md). #### 7, Sale badge and In stock message Product pages only — see [Sale badge and in-stock message](/swatch/appearance/sale-badge-and-in-stock-message.md). ## Related pages * [Swatch styles reference](/swatch/appearance/swatch-styles-reference.md) * [Choose a display style](/swatch/options/choose-a-display-style.md) * [Custom CSS](/swatch/settings/custom-css.md) — for anything the editor doesn't cover.