> ## 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 - Kokoelmakortti

> Määritä verkkokaupan ruudukoissa ja listoissa näkyvien kokoelmakorttien ulkoasu.

<Frame caption="Teemaeditori > Kokoelmakortti">
  <img src="https://mintcdn.com/twicecommerce/R_1b45pRTajoRzbd/images/theme-editor-collection-card.webp?fit=max&auto=format&n=R_1b45pRTajoRzbd&q=85&s=25b7be55e6e3b77ad8da835bd0c646b5" alt="Kokoelmakortin asetuspaneeli teemaeditorissa" width="1920" height="1080" data-path="images/theme-editor-collection-card.webp" />
</Frame>

Kokoelmakortin paneeli ohjaa [kokoelmien](/docs/fi/concepts/catalog/collections) korttien ulkoasua — esimerkiksi etusivun kokoelmalistassa. Se on eri paneeli kuin [Listauskortti](/docs/fi/sales-channels/online-store/theme-editor/settings/listings-card), joka määrittää tuotekorttien ulkoasun. Paneeli löytyy teemaeditorin kohdasta **Cards**.

## Värit

| Asetus              | Oletus    | Kuvaus                               |
| ------------------- | --------- | ------------------------------------ |
| Tausta              | `#FFFFFF` | Kortin taustatäyttö.                 |
| Reuna               | `#E4E6EB` | Kortin ympärillä olevan reunan väri. |
| Teksti              | `#111826` | Otsikkotekstin väri.                 |
| Toissijainen teksti | `#374152` | Kuvaustekstin väri.                  |

## Reuna ja välistys

| Asetus            | Tyyppi      | Oletus | Vaihteluväli          | Kuvaus                                          |
| ----------------- | ----------- | ------ | --------------------- | ----------------------------------------------- |
| Reunan paksuus    | Liukusäädin | 0 px   | 0–8 px                | Reunan leveys. Oletus on 0 (ei näkyvää reunaa). |
| Kulmien pyöristys | Liukusäädin | 0 px   | 0–40 px               | Kuinka pyöristettyjä kortin kulmat ovat.        |
| Kortin täyte      | Liukusäädin | 0 px   | 0–16 px               | Kortin reunan ja sisällön välinen tila.         |
| Sisällön tasaus   | Valitsin    | Left   | Left / Center / Right | Kokoelman otsikon vaakatasaus.                  |

## Kuva

| Asetus            | Tyyppi      | Oletus | Vaihteluväli | Kuvaus                                          |
| ----------------- | ----------- | ------ | ------------ | ----------------------------------------------- |
| Kulmien pyöristys | Liukusäädin | 4 px   | 0–40 px      | Kuinka pyöristettyjä kokoelmakuvan kulmat ovat. |
| Täyte             | Liukusäädin | 0 px   | 0–16 px      | Kortin reunan ja kuvan välinen tila.            |

## CSS-muuttujat

<CodeGroup>
  ```css CSS-muuttujat theme={null}
  :root {
    --storefront-collection-card-background: #FFFFFF;
    --storefront-collection-card-border-color: #E4E6EB;
    --storefront-collection-card-border-width: 0px;
    --storefront-collection-card-border-radius: 0px;
    --storefront-collection-card-padding: 0px;
    --storefront-collection-card-content-alignment: left;
    --storefront-collection-card-text-color: #111826;
    --storefront-collection-card-text-secondary-color: #374152;
    --storefront-collection-card-image-border-radius: 4px;
    --storefront-collection-card-image-padding: 0px;
  }
  ```
</CodeGroup>

## Aiheeseen liittyvää

<CardGroup cols={2}>
  <Card title="Listauskortti" icon="grid-2" href="/docs/fi/sales-channels/online-store/theme-editor/settings/listings-card">
    Määritä tuotekorttien ulkoasu.
  </Card>

  <Card title="Kokoelmat" icon="layer-group" href="/docs/fi/concepts/catalog/collections">
    Miten kokoelmat ryhmittelevät listauksia.
  </Card>
</CardGroup>