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

# Editor storefrontu - Karta kolekce

> Stylujte karty, které reprezentují kolekce v mřížkách a seznamech storefrontu.

![Panel nastavení karty kolekce v editoru storefrontu](https://mintcdn.com/twicecommerce/R_1b45pRTajoRzbd/images/theme-editor-collection-card.webp?fit=max\&auto=format\&n=R_1b45pRTajoRzbd\&q=85\&s=25b7be55e6e3b77ad8da835bd0c646b5)

Editor storefrontu > Karta kolekce

Panel Karta kolekce řídí, jak vypadají karty [kolekcí](https://www.twicecommerce.com/docs/cs/concepts/catalog/collections.md), například v seznamu kolekcí na hlavní stránce. Je oddělený od panelu [Karta nabídek](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/listings-card.md), který stylizuje karty nabídek. Najdete jej pod **Karty** v editoru storefrontu.

## Barvy

| Nastavení | Výchozí | Popis |
| - | - | - |
| Pozadí | `#FFFFFF` | Barva pozadí karty. |
| Rámeček | `#E4E6EB` | Barva rámečku kolem karty. |
| Text | `#111826` | Barva textu nadpisu. |
| Text sekundární | `#374152` | Barva textu popisu. |

## Rámeček a rozestupy

| Nastavení | Typ | Výchozí | Rozsah | Popis |
| - | - | - | - | - |
| Tloušťka rámečku | Posuvník | 0 px | 0–8 px | Šířka rámečku. Výchozí hodnota je 0 (rámeček není vidět). |
| Poloměr rohu | Posuvník | 0 px | 0–40 px | Jak zaoblené jsou rohy karty. |
| Odsazení karty | Posuvník | 0 px | 0–16 px | Prostor mezi rámečkem karty a jejím obsahem. |
| Zarovnání obsahu | Přepínač | Vlevo | Vlevo / Na střed / Vpravo | Vodorovné zarovnání názvu kolekce. |

## Obrázek

| Nastavení | Typ | Výchozí | Rozsah | Popis |
| - | - | - | - | - |
| Poloměr rohu | Posuvník | 4 px | 0–40 px | Jak zaoblené jsou rohy obrázku kolekce. |
| Odsazení | Posuvník | 0 px | 0–16 px | Prostor mezi rámečkem karty a obrázkem. |

## CSS proměnné

```css CSS proměnné 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;
}
```

## Související články

> **[Karta nabídek](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/listings-card.md)**
>
> Stylujte karty nabídek.

> **[Kolekce](https://www.twicecommerce.com/docs/cs/concepts/catalog/collections.md)**
>
> Jak kolekce seskupují nabídky.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.