# Product grid OG image template

Two to four products on plinth tiles with price tags hanging from one line, and the title on a band across the bottom.

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

For stores, marketplaces and Shopify apps posting a collection, a gift guide or new arrivals from a catalogue feed. Each product gets a tile with its photo, its name on the plinth and a tag with the price and the struck-out old price. A product without a photo gets a tinted tile with its first letter, long names and prices end in an ellipsis, and more than four products are counted on the band ("+3 more"). Wide frames set the tiles in one row; square and vertical frames set them two by two, and three products put the first one on a wide tile.

## Fields

Every field is optional. Long text shrinks to fit instead of overflowing; an image field takes a public URL that we fetch on our side.

| Field | Type | Description | Example |
|---|---|---|---|
| `title` | text | Title on the bottom band, e.g. The weekend edit. (default: New collection) | The weekend edit |
| `subtitle` | text | One line under the title. | Four picks for slow Saturdays, free shipping over $50 |
| `products` | text | Products separated by `;`, each as name\|price\|old price, e.g. Halo smartwatch\|$179;Studio headphones\|$139\|$199. The old price is optional; four are shown. | Prism Runner sneakers\|$148\|$185;Halo smartwatch\|$179;Studio headphones\|$139\|$199;Glow serum\|$42 |
| `badge` | text | Small label above the title, e.g. Gift guide or New in. | Gift guide |
| `cta_label` | text | Button text on the band, e.g. Shop the edit. (default: Shop now) | Shop the edit |
| `url` | text | Store address under the button. | kestrel.co/weekend |
| `image_1` | image URL | Photo of the first product in `products`. | https://example.com/images/sneakers.jpg |
| `image_2` | image URL | Photo of the second product. | https://example.com/images/watch.jpg |
| `image_3` | image URL | Photo of the third product. | https://example.com/images/headphones.jpg |
| `image_4` | image URL | Photo of the fourth product. | https://example.com/images/serum.jpg |
| `logo` | image URL | Store logo on the band, square. | https://example.com/images/b07-kestrel.png |
| `accent` | colour | Brand colour as hex, e.g. #6366f1. Drives buttons, highlights and the background glow. (default: #f97316) | #f97316 |
| `theme` | dark | light | Colour scheme: dark or light. (default: light) | — |

## Render it with one request

```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"
    }
}'
```

## Make it yours

accent and theme change per request. For anything more, copy the template into your account: you get an ordinary HTML template with the same fields that you can edit in the dashboard or through the API. If the slug is free on your account, the copy takes it — your integrations switch to your version without changing a line.

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