> ## 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 nabídek

> Nastavte, jak se karty nabídek zobrazují v mřížkách kolekcí: barvy, rámečky, rozestupy, zarovnání a nastavení obrázku.

![Panel nastavení karty nabídek v editoru storefrontu](https://mintcdn.com/twicecommerce/lZhc_tO8u1u_bL0Q/images/theme-editor-listings-card.webp?fit=max\&auto=format\&n=lZhc_tO8u1u_bL0Q\&q=85\&s=bfb6bcb1d9946a90eaf057949a1aaadb)

Editor storefrontu > Karta nabídek

Panel Karta nabídek řídí, jak se karty nabídek zobrazují v mřížkách kolekcí a řadách nabídek. Tyto karty jsou hlavní způsob, jakým zákazníci procházejí váš katalog, takže jejich vzhled přímo ovlivňuje nákupní zážitek.

## Barvy

| Nastavení | Výchozí | Popis |
| - | - | - |
| Pozadí | `#FFFFFF` | Výplň pozadí karty. |
| Text | `#111826` | Barva primárního textu: název nabídky a cena. |
| Text sekundární | `#374152` | Podpůrný text: popisy a metadata. |

## Rámeček

| Nastavení | Typ | Výchozí | Rozsah | Popis |
| - | - | - | - | - |
| Barva | Barva | `#E4E6EB` | - | Barva rámečku kolem karty. |
| Tloušťka | Posuvník | 0 px | 0–8 px | Šířka rámečku. Výchozí je 0 (žádný viditelný rámeček). |
| Poloměr rohu | Posuvník | 0 px | 0–40 px | Jak zaoblené jsou rohy karty. |

## Rozestupy a zarovnání

| Nastavení | Typ | Výchozí | Rozsah | Popis |
| - | - | - | - | - |
| Odsazení karty | Posuvník | 0 px | 0–16 px | Prostor mezi rámečkem karty a jejím obsahem. |
| Odsazení textu | Posuvník | 0 px | 0–16 px | Prostor mezi oblastí obrázku a textovým obsahem pod ní. |
| Zarovnání obsahu | Přepínač | Vlevo | Vlevo / Na střed / Vpravo | Vodorovné zarovnání názvu nabídky, ceny a popisného textu. |

## Obrázek

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

## CSS proměnné

```css CSS proměnné theme={null}
:root {
  --storefront-listings-card-background: #FFFFFF;
  --storefront-listings-card-text-color: #111826;
  --storefront-listings-card-text-secondary-color: #374152;
  --storefront-listings-card-border-color: #E4E6EB;
  --storefront-listings-card-border-width: 0px;
  --storefront-listings-card-border-radius: 0px;
  --storefront-listings-card-padding: 0px;
  --storefront-listings-card-content-padding: 0px;
  --storefront-listings-card-content-alignment: left;
  --storefront-listings-card-image-border-radius: 4px;
  --storefront-listings-card-image-padding: 0px;
}
```

## Související články

> **[Barvy](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/colors.md)**
>
> Definujte barevnou paletu storefrontu.

> **[Rozvržení](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/layout.md)**
>
> Řiďte šířku stránky a rozestupy.


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