Product Label Template HTML and JSON

This guide is based on the Product Label template in the Gallery.

It explains a practical flow: template HTML structure, matching JSON payload, and API render request.

Step 1 - Template HTML structure

HTML

<div class="label">
<div class="label-top">
<h1>{{brand_name}}</h1>
<p>{{brand_tagline}}</p>
</div>
<div class="label-body">
<div class="product-name">{{product_name}}</div>
<div class="specs">
<div class="spec-row">
<span class="label-text">SKU</span>
<span class="value">{{sku}}</span>
</div>
<div class="spec-row">
<span class="label-text">Weight</span>
<span class="value">{{weight}}</span>
</div>
<div class="spec-row">
<span class="label-text">Dimensions</span>
<span class="value">{{dimensions}}</span>
</div>
<div class="spec-row">
<span class="label-text">Material</span>
<span class="value">{{material}}</span>
</div>
<div class="spec-row">
<span class="label-text">Origin</span>
<span class="value">{{origin}}</span>
</div>
<div class="spec-row">
<span class="label-text">Price</span>
<span class="value">{{price}}</span>
</div>
</div>
<div class="barcode">|||| {{sku}} ||||</div>{{#if warning}}<div class="warning">{{warning}}</div>{{/if}}</div>
</div>

Step 2 - Matching JSON payload

JSON

{
  "brand_name": "NORDIC HOME",
  "brand_tagline": "Scandinavian Design",
  "product_name": "Oak Desk Lamp",
  "sku": "NH-DL-2026-041",
  "weight": "1.2 kg",
  "dimensions": "15 \u00d7 15 \u00d7 42 cm",
  "material": "Solid Oak / Brass",
  "origin": "Sweden",
  "price": "$89.00",
  "warning": "Bulb not included. Max 40W."
}

Step 3 - Final rendered preview in page

Rendered output preview Template style preview

Preview uses the original Gallery template HTML and CSS with sample payload values.

Step 4 - Key mapping checklist

{{brand_name}} -> brand_name
{{brand_tagline}} -> brand_tagline
{{product_name}} -> product_name
{{sku}} -> sku

Step 5 - Render request example

BASH

curl -X POST "https://api.hookpdf.com/v1/render" \
  -H "Authorization: Bearer <api_key>" \
  -H "Content-Type: application/json" \
  -d '{
    "template_id": "<gallery-product-label-template_id>",
    "payload": {
      "brand_name": "NORDIC HOME",
      "brand_tagline": "Scandinavian Design",
      "product_name": "Oak Desk Lamp",
      "sku": "NH-DL-2026-041",
      "weight": "1.2 kg",
      "dimensions": "15 \u00d7 15 \u00d7 42 cm",
      "material": "Solid Oak / Brass"
    }
  }'

Use this template for free now

Start with this template in HookPDF and render your first PDF for free.

Use this template free

Product Label Template: HTML + JSON Payload