Product Comparison

Dynamically generate a responsive comparison table for multiple products and their attributes.

Image, 1080 × 1080, 1 credit

Output

Product Comparison, rendered by oJo with its first sample

Variables

  • comparisonAttributes[].displayNametext
    Price
  • comparisonAttributes[].keytext
    price
  • pageTitletext
    Compare Our Top Laptops
  • productstext
    [{"name":"Laptop Pro X","imageUrl":"https://placehold.co/300x200/CCCCCC/FFFFFF?text=Laptop+Pro+X","tagline":"Ultimate performance for professionals.","attributes":{"price":"$1499","cpu":"Intel i7, 12th Gen","ram":"16GB DDR5","storage":"1TB NVMe SSD","screen_size":"15.6\" QHD","os":"Windows 11 Pro","touchscreen":true,"dedicated_gpu":true,"weight":"1.8 kg"},"highlightAttribute":"cpu"},{"name":"UltraBook Air","imageUrl":"https://placehold.co/300x200/DDDDDD/FFFFFF?text=UltraBook+Air","tagline":"Lightweight and powerful for on-the-go.","attributes":{"price":"$1299","cpu":"Intel i5, 12th Gen","ram":"16GB DDR4","storage":"512GB NVMe SSD","screen_size":"14\" FHD+","os":"Windows 11 Home","touchscreen":false,"dedicated_gpu":false,"weight":"1.2 kg"}},{"name":"Gamer Max RGB","imageUrl":"https://placehold.co/300x200/EEEEEE/FFFFFF?text=Gamer+Max+RGB","tagline":"Dominate the game with cutting-edge graphics.","attributes":{"price":"$1999","cpu":"AMD Ryzen 9","ram":"32GB DDR5","storage":"2TB NVMe SSD","screen_size":"17.3\" FHD 240Hz","os":"Windows 11 Pro","touchscreen":false,"dedicated_gpu":true,"weight":"2.5 kg"}}]
  • products[].attributestext
    {"price":"$1499","cpu":"Intel i7, 12th Gen","ram":"16GB DDR5","storage":"1TB NVMe SSD","screen_size":"15.6\" QHD","os":"Windows 11 Pro","touchscreen":true,"dedicated_gpu":true,"weight":"1.8 kg"}
  • products[].highlightAttributetext
    cpu
  • products[].imageUrltext
    https://placehold.co/300x200/CCCCCC/FFFFFF?text=Laptop+Pro+X
  • products[].nametext
    Laptop Pro X
  • products[].taglinetext
    Ultimate performance for professionals.
  • theme.backgroundColortext
    #F0F2F5
  • theme.borderColortext
    #CED4DA
  • theme.headerTextColortext
    #FFFFFF
  • theme.primaryColortext
    #007BFF
  • theme.secondaryColortext
    #FF6347
  • theme.textColortext
    #333333

Send any of these in modify. Anything you leave out prints the sample value, and the response lists it in warnings.

Render it

Save the template to your account first. Saving gives you its ID.

curl --request POST \
  --url https://api.ojo.so/v1/image/template \
  --header 'Authorization: Bearer <your API key>' \
  --header 'Content-Type: application/json' \
  --data '{
  "templateId": "<YOUR_TEMPLATE_ID>",
  "modify": {
    "pageTitle": "Compare Our Top Laptops",
    "theme": {
      "backgroundColor": "#F0F2F5",
      "textColor": "#333333",
      "primaryColor": "#007BFF"
    }
  },
  "viewportWidth": 1080,
  "viewportHeight": 1080
}'

What's included

Related templates

All templates
Dynamic Product Comparison Table Generator - oJo