> ## Documentation Index
> Fetch the complete documentation index at: https://www.twicecommerce.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Teemaeditori - Varianttipillerit

> Määritä listaussivujen valittavien varianttipillereiden (koko, väri ja muut vaihtoehdot) ulkoasu.

<Frame caption="Teemaeditori > Varianttipillerit">
  <img src="https://mintcdn.com/twicecommerce/cJlH0EnJIdVT0BaS/images/theme-editor-variant-pills.webp?fit=max&auto=format&n=cJlH0EnJIdVT0BaS&q=85&s=c5702cb2075dbc5f8bce81c2c1580dc9" alt="Varianttipillereiden asetuspaneeli teemaeditorissa" width="1920" height="1080" data-path="images/theme-editor-variant-pills.webp" />
</Frame>

Varianttipillereiden paneeli ohjaa niiden pilleripainikkeiden ulkoasua, joilla asiakas valitsee [variantin](/docs/fi/concepts/catalog/variants) — esimerkiksi koon tai värin — listaussivulla. Paneeli löytyy teemaeditorin kohdasta **Cards**.

## Asetukset

| Asetus            | Tyyppi      | Oletus        | Kuvaus                               |
| ----------------- | ----------- | ------------- | ------------------------------------ |
| Kulmien pyöristys | Liukusäädin | 8 px          | Kuinka pyöristetty kukin pilleri on. |
| Reunan väri       | Väri        | `#cbcbcb`     | Valitsemattoman pillerin reunaväri.  |
| Reunan paksuus    | Liukusäädin | 1 px          | Kunkin pillerin reunan leveys.       |
| Valitun tausta    | Väri        | `transparent` | Valitun pillerin taustatäyttö.       |
| Valitun teksti    | Väri        | `#111826`     | Valitun pillerin tekstiväri.         |

## CSS-muuttujat

<CodeGroup>
  ```css CSS-muuttujat theme={null}
  :root {
    --storefront-variant-pill-border-radius: 8px;
    --storefront-variant-pill-border-color: #cbcbcb;
    --storefront-variant-pill-border-width: 1px;
    --storefront-variant-pill-selected-background-color: transparent;
    --storefront-variant-pill-selected-text-color: #111826;
  }
  ```
</CodeGroup>

## Aiheeseen liittyvää

<CardGroup cols={2}>
  <Card title="Variantit" icon="shapes" href="/docs/fi/concepts/catalog/variants">
    Miten variantit ryhmittelevät vaihtoehtoja listauksen alle.
  </Card>

  <Card title="Listaussivu" icon="tag" href="/docs/fi/sales-channels/online-store/theme-editor/pages/listing">
    Määritä listaussivu, jolla pillerit näkyvät.
  </Card>
</CardGroup>