Product Catalog Page Template HTML and JSON

This guide is based on the Product Catalog Page 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="catalog-header">
<h1>{{catalog_title}}</h1>
<p>{{catalog_subtitle}}</p>
</div>
<div class="products">{{#each products}}<div class="product">
<div class="product-img">{{this.emoji}}</div>
<div class="product-info">
<h3>{{this.name}}</h3>
<div class="sku">SKU: {{this.sku}}</div>
<p class="desc">{{this.description}}</p>
<div class="price">${{this.price}}</div>
</div>
<div class="product-specs">{{#each this.specs}}<div class="spec">
<span>{{this.label}}</span>
<span>{{this.value}}</span>
</div>{{/each}}</div>
</div>{{/each}}</div>
<div class="footer">{{company_name}} | {{year}} Product Catalog</div>

Step 2 - Matching JSON payload

JSON

{
  "catalog_title": "Spring Collection",
  "catalog_subtitle": "Premium Products \u2014 2026 Edition",
  "company_name": "Nordic Home",
  "year": "2026",
  "products": [
    {
      "emoji": "\ud83e\ude91",
      "name": "Ergonomic Office Chair",
      "sku": "NH-CH-201",
      "description": "Breathable mesh design with lumbar support and adjustable armrests.",
      "price": "449.00",
      "specs": [
        {
          "label": "Material",
          "value": "Mesh / Aluminum"
        },
        {
          "label": "Weight Capacity",
          "value": "300 lbs"
        },
        {
          "label": "Warranty",
          "value": "5 Years"
        }
      ]
    },
    {
      "emoji": "\ud83d\udca1",
      "name": "Smart Desk Lamp",
      "sku": "NH-DL-104",
      "description": "Touch-controlled LED lamp with wireless charging base.",
      "price": "89.00",
      "specs": [
        {
          "label": "Light",
          "value": "3000K-6000K"
        },
        {
          "label": "Power",
          "value": "12W LED"
        },
        {
          "label": "Feature",
          "value": "Qi Charging"
        }
      ]
    },
    {
      "emoji": "\ud83c\udfa7",
      "name": "Studio Headphones",
      "sku": "NH-HP-082",
      "description": "Over-ear headphones with active noise cancellation.",
      "price": "299.00",
      "specs": [
        {
          "label": "Driver",
          "value": "40mm"
        },
        {
          "label": "Battery",
          "value": "30 hrs"
        },
        {
          "label": "Connection",
          "value": "BT 5.3"
        }
      ]
    },
    {
      "emoji": "\u2328\ufe0f",
      "name": "Mechanical Keyboard",
      "sku": "NH-KB-055",
      "description": "Low-profile mechanical keyboard with RGB backlighting.",
      "price": "159.00",
      "specs": [
        {
          "label": "Switches",
          "value": "Cherry MX"
        },
        {
          "label": "Layout",
          "value": "75%"
        },
        {
          "label": "Connect",
          "value": "USB-C / BT"
        }
      ]
    }
  ]
}

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

{{catalog_title}} -> catalog_title
{{catalog_subtitle}} -> catalog_subtitle
{{company_name}} -> company_name
{{year}} -> year
{{#each products}} -> products[]
{{this.emoji}} -> products[].emoji

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-catalog-page-template_id>",
    "payload": {
      "catalog_title": "Spring Collection",
      "catalog_subtitle": "Premium Products \u2014 2026 Edition",
      "company_name": "Nordic Home",
      "year": "2026",
      "products": [
        {
          "emoji": "\ud83e\ude91",
          "name": "Ergonomic Office Chair",
          "sku": "NH-CH-201",
          "description": "Breathable mesh design with lumbar support and adjustable armrests.",
          "price": "449.00",
          "specs": [
            {
              "label": "Material",
              "value": "Mesh / Aluminum"
            },
            {
              "label": "Weight Capacity",
              "value": "300 lbs"
            },
            {
              "label": "Warranty",
              "value": "5 Years"
            }
          ]
        },
        {
          "emoji": "\ud83d\udca1",
          "name": "Smart Desk Lamp",
          "sku": "NH-DL-104",
          "description": "Touch-controlled LED lamp with wireless charging base.",
          "price": "89.00",
          "specs": [
            {
              "label": "Light",
              "value": "3000K-6000K"
            },
            {
              "label": "Power",
              "value": "12W LED"
            },
            {
              "label": "Feature",
              "value": "Qi Charging"
            }
          ]
        }
      ]
    }
  }'

Use this template for free now

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

Use this template free

Product Catalog Page Template: HTML + JSON Payload