The HTML behind it
Price anchor ad template HTML
This is the whole template. The fields in double braces fill from your data on every render. Copy it into your account and change anything you like.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style data-thirds="base">
html,body{margin:0}
[data-thirds="canvas"]{position:relative;overflow:hidden}
[data-thirds="canvas"] [data-thirds]{position:absolute;box-sizing:border-box;margin:0}
[data-thirds="text"]{white-space:pre-wrap;overflow-wrap:anywhere}
[data-thirds="image"]{display:block}
[data-thirds="table"]{border-collapse:collapse}
[data-thirds="table"] th,[data-thirds="table"] td{padding:4px 6px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule,#dde1e8)}
[data-thirds="table"] th{background:var(--head,transparent)}
[data-thirds="list"]{display:flex;flex-direction:column}
[data-thirds="canvas"] [data-thirds="item"]{position:relative;flex:none}
</style>
<style>@page { size: 1080px 1080px; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; } </style>
</head>
<body>
<div data-thirds="canvas" data-thirds-kind="image" data-thirds-page="p1" data-thirds-name="Page 1" style="width:1080px;height:1080px;background:#d9042b">
<div data-thirds="text" data-thirds-id="brand" data-thirds-name="Brand" style="left:70px;top:70px;width:940px;height:40px;font-size:28px;color:#ffd1d9;font-weight:700;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;">{{ brand }}</div>
<div data-thirds="text" data-thirds-id="product" data-thirds-name="Product" style="left:70px;top:150px;width:940px;height:160px;font-size:64px;color:#ffffff;font-weight:800;line-height:1.05;letter-spacing:-2px;" data-thirds-fit="shrink" data-thirds-min-font="30" data-thirds-max-font="64">{{ product }}</div>
<div data-thirds="text" data-thirds-id="old-price-label" data-thirds-name="Old price label" style="left:70px;top:380px;width:400px;height:30px;font-size:22px;color:#ffd1d9;font-weight:700;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;">{{ old_price_label }}</div>
<div data-thirds="text" data-thirds-id="old-price" data-thirds-name="Old price" style="left:70px;top:410px;width:500px;height:110px;font-size:88px;color:#ffd1d9;font-weight:700;line-height:1.1;text-decoration:line-through;text-decoration-thickness:8px;">{{ old_price }}</div>
<div data-thirds="text" data-thirds-id="new-price-label" data-thirds-name="New price label" style="left:70px;top:560px;width:400px;height:30px;font-size:22px;color:#ffffff;font-weight:700;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;">{{ new_price_label }}</div>
<div data-thirds="text" data-thirds-id="new-price" data-thirds-name="New price" style="left:60px;top:580px;width:800px;height:300px;font-size:260px;color:#ffffff;font-weight:800;line-height:1.0;letter-spacing:-14px;" data-thirds-fit="shrink" data-thirds-min-font="80" data-thirds-max-font="260">{{ new_price }}</div>
<div data-thirds="box" data-thirds-id="savings-tag" data-thirds-name="Savings tag" style="left:730px;top:330px;width:300px;height:300px;background:#ffe600;border-radius:150px;transform:rotate(12deg)"></div>
<div data-thirds="text" data-thirds-id="savings-label" data-thirds-name="Savings label" style="left:730px;top:420px;width:300px;height:40px;font-size:24px;color:#0b0b0b;font-weight:700;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;text-align:center;transform:rotate(12deg);">{{ savings_label }}</div>
<div data-thirds="text" data-thirds-id="savings" data-thirds-name="Savings" style="left:730px;top:460px;width:300px;height:90px;font-size:72px;color:#0b0b0b;font-weight:800;line-height:1.0;text-align:center;transform:rotate(12deg);letter-spacing:-2px;">{{ savings }}</div>
<div data-thirds="text" data-thirds-id="offer-line" data-thirds-name="Offer line" style="left:70px;top:900px;width:940px;height:50px;font-size:30px;color:#ffffff;font-weight:400;line-height:1.2;">{{ offer_line }}</div>
<div data-thirds="box" data-thirds-id="action-button" data-thirds-name="Action button" style="left:70px;top:970px;width:480px;height:70px;background:#ffffff;border-radius:35px"></div>
<div data-thirds="text" data-thirds-id="action" data-thirds-name="Action" style="left:70px;top:990px;width:480px;height:34px;font-size:24px;color:#d9042b;font-weight:800;line-height:1.2;text-align:center;">{{ action }}</div>
</div>
</body>
</html>
Sample data
The values that made the picture.
Change any of them, and the same HTML makes a new file.
{
"brand": "Kestrel Bikes",
"product": "Kestrel Ridge 2 trail bike",
"old_price_label": "Was",
"old_price": "$1,499",
"new_price_label": "Now",
"new_price": "$999",
"savings_label": "You save",
"savings": "$500",
"offer_line": "Free delivery and a 30-day ride-it-home trial.",
"action": "Claim this price"
}