# Szablon obrazka OG: Siatka produktów

Od dwóch do czterech produktów na kafelkach-postumentach, metki z cenami zawieszone na wspólnej linii i tytuł na pasie u dołu.

- Slug: `product-grid`
- Preview (real render): https://shareglint.com/storage/template-previews/product-grid.jpg
- Page: https://shareglint.com/pl/templates/product-grid

Dla sklepów, marketplace'ów i aplikacji Shopify, które publikują kolekcję, przewodnik prezentowy albo nowości prosto z katalogu. Każdy produkt dostaje kafelek ze zdjęciem, nazwę na postumencie i metkę z ceną oraz przekreśloną ceną sprzed obniżki. Produkt bez zdjęcia dostaje zabarwiony kafelek z pierwszą literą nazwy, długie nazwy i ceny kończą się wielokropkiem, a produkty ponad cztery są policzone na pasie („+3 więcej”). W szerokich kadrach kafelki stoją w jednym rzędzie, w kwadratowych i pionowych po dwa w dwóch rzędach, a przy trzech produktach pierwszy dostaje szeroki kafelek.

## Pola

Każde pole jest opcjonalne. Za długi tekst zmniejsza się, zamiast wychodzić poza kadr; pole obrazka przyjmuje publiczny adres URL, który pobieramy po naszej stronie.

| Pole | Typ | Opis | Przykład |
|---|---|---|---|
| `title` | tekst | Tytuł na dolnym pasie, np. Weekendowy wybór. (domyślnie: New collection) | The weekend edit |
| `subtitle` | tekst | Jedna linia pod tytułem. | Four picks for slow Saturdays, free shipping over $50 |
| `products` | tekst | Produkty rozdzielone `;`, każdy jako nazwa\|cena\|stara cena, np. Zegarek Halo\|179 zł;Słuchawki Studio\|139 zł\|199 zł. Stara cena jest opcjonalna; widać cztery. | Prism Runner sneakers\|$148\|$185;Halo smartwatch\|$179;Studio headphones\|$139\|$199;Glow serum\|$42 |
| `badge` | tekst | Mała etykieta nad tytułem, np. Na prezent albo Nowość. | Gift guide |
| `cta_label` | tekst | Tekst przycisku na pasie, np. Zobacz wybór. (domyślnie: Shop now) | Shop the edit |
| `url` | tekst | Adres sklepu pod przyciskiem. | kestrel.co/weekend |
| `image_1` | adres obrazka | Zdjęcie pierwszego produktu z `products`. | https://example.com/images/sneakers.jpg |
| `image_2` | adres obrazka | Zdjęcie drugiego produktu. | https://example.com/images/watch.jpg |
| `image_3` | adres obrazka | Zdjęcie trzeciego produktu. | https://example.com/images/headphones.jpg |
| `image_4` | adres obrazka | Zdjęcie czwartego produktu. | https://example.com/images/serum.jpg |
| `logo` | adres obrazka | Logo sklepu na pasie, kwadratowe. | https://example.com/images/b07-kestrel.png |
| `accent` | kolor | Kolor marki w zapisie hex, np. #6366f1. Barwi przyciski, wyróżnienia i poświatę w tle. (domyślnie: #f97316) | #f97316 |
| `theme` | dark | light | Schemat kolorów: dark albo light. (domyślnie: light) | — |

## Wyrenderuj go jednym żądaniem

```bash
curl -X POST "https://shareglint.com/v1/images?wait=true" \
  -H "Authorization: Bearer sk_live_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "template": "product-grid",
    "modifications": {
        "title": "The weekend edit",
        "subtitle": "Four picks for slow Saturdays, free shipping over $50",
        "products": "Prism Runner sneakers|$148|$185;Halo smartwatch|$179;Studio headphones|$139|$199;Glow serum|$42",
        "badge": "Gift guide",
        "cta_label": "Shop the edit",
        "url": "kestrel.co/weekend",
        "image_1": "https://example.com/images/sneakers.jpg",
        "image_2": "https://example.com/images/watch.jpg",
        "image_3": "https://example.com/images/headphones.jpg",
        "image_4": "https://example.com/images/serum.jpg",
        "logo": "https://example.com/images/b07-kestrel.png"
    }
}'
```

## Dopasuj do siebie

accent i theme zmieniasz w każdym żądaniu. Jeśli chcesz więcej, skopiuj szablon na swoje konto: dostajesz zwykły szablon HTML z tymi samymi polami, który edytujesz w panelu albo przez API. Jeśli slug jest na Twoim koncie wolny, kopia go przejmuje — Twoje integracje przechodzą na Twoją wersję bez zmiany jednej linijki.

```bash
curl -X POST "https://shareglint.com/v1/templates/library/product-grid/copy" -H "Authorization: Bearer sk_live_YOUR_KEY"
```