> 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/globo-combined-listings/styles/styles.md).

# How styles work

A **style** is a saved look for an option widget: which template it uses (swatch, button, tab…) plus all its visual settings (size, shape, borders, colors, hover effects…). Groups reference styles, so one style can dress many groups — edit it once and every group using it updates.

{% hint style="success" %}
You don't have to design anything. Pick a ready-made style that fits your brand and you're done — the [style editor](/globo-combined-listings/styles/customize-a-style.md) is there only when you want to fine-tune further.
{% endhint %}

<figure><img src="/files/r335LJNgzrXkG2H77ivt" alt="One saved style is used by many groups; editing it updates all of them"><figcaption><p>One style can dress many groups — edit it once, every group updates.</p></figcaption></figure>

## Two surfaces

Styles are managed per surface, matching the two tabs on the **Styles** page:

| Surface (tab)       | Where it renders                                                                                                                                                                              |
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Product page**    | The option widget on product detail pages.                                                                                                                                                    |
| **Collection page** | The compact widget on product cards in collections, search, and featured sections. This is the same surface labeled **On product card** when you pick a style per option in the group editor. |

Quick view reuses the **Product page** style — it isn't a third tab or a separate style to configure.

Each option in a group picks one style per surface — or **Hidden** to skip a surface entirely (see [Appearance in the group editor](/globo-combined-listings/product-groups/create-a-group/create-a-single-option-group.md#appearance)).

## Default styles

On install, two ready-to-use button styles are created (one per surface), so new groups render immediately. New options are prefilled with them.

## The Styles page

<figure><img src="/files/vfelpSDcNqnjy1RPzvnD" alt="Styles page showing the Your styles grid and Explore more styles shelf"><figcaption><p>Your saved styles, plus more to explore below.</p></figcaption></figure>

* **Your styles** — the styles you've saved, with **Customize**, **Rename**, **Duplicate**, **Delete**, and an **In use** badge when a group references the style.
* **Explore more styles** — ready-made presets to add with one click; **Browse all** opens the full catalog. See [Style library](/globo-combined-listings/styles/style-library.md).

## In this section

* [Style library](/globo-combined-listings/styles/style-library.md) — the 9 templates and their preset catalog. Start here.
* [Customize a style](/globo-combined-listings/styles/customize-a-style.md) — optional fine-tuning: every control in the style editor.