Szablon obrazka OG: Siatka produktów

og1200×630 square1080×1080 portrait1080×1350 story1080×1920 pinterest1000×1500 youtube1280×720

To prawdziwe rendery z API z przykładowymi wartościami z tabeli niżej. Przełącz rozmiar wyżej: ten sam szablon układa się w każdym z 6 rozmiarów — wyślij size albo sizes w zapytaniu.

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.

Wyrenderuj go jednym żądaniem

Slug podajesz jako template. W odpowiedzi dostajesz adres gotowego PNG; ?wait=true trzyma połączenie, aż obrazek będzie gotowy.

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

Albo wklej podpisany adres w og:image

Dla stron statycznych, Webflow, Shopify i narzędzi no-code: pola idą w query stringu, a całość podpisujesz swoim sekretem. Pierwsze żądanie renderuje obrazek, każde kolejne to przekierowanie na gotowy plik. Jak policzyć podpis.

<meta property="og:image" content="https://shareglint.com/i/acc_YOUR_ACCOUNT_ID/product-grid.png?badge=Gift%20guide&cta_label=Shop%20the%20edit&products=Prism%20Runner%20sneakers%7C%24148%7C%24185%3BHalo%20smartwatch%7C%24179%3BStudio%20headphones%7C%24139%7C%24199%3BGlow%20serum%7C%2442&subtitle=Four%20picks%20for%20slow%20Saturdays%2C%20free%20shipping%20over%20%2450&title=The%20weekend%20edit&url=kestrel.co%2Fweekend&s=YOUR_SIGNATURE">

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.

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

Więcej szablonów: E-commerce i sprzedaż

Karta produktu Produkt w promocji Nowość w sklepie Obniżka ceny Wyprzedaż błyskawiczna Kod rabatowy Ocena produktu Karta podarunkowa Znowu dostępny

Wszystkie szablony w kategorii E-commerce i sprzedaż (12) →  ·  Wszystkie szablony →