Turn a product image into a checkout link

Hero images and cards often convert better when the whole visual is clickable.

Wrap the <img> in an <a> pointing to your product checkout. Keep alt text descriptive for accessibility and when images are blocked.

Use width and height attributes to reduce layout shift; constrain with max-width:100% for small screens.

Sample: image only

<a href="https://pay.zenofy.io/p/507f1f77bcf86cd799439011">
  <img src="https://www.example.com/images/product-cover.jpg"
       alt="Product cover — click to buy"
       width="600"
       height="340"
       style="max-width:100%;height:auto;border-radius:12px;display:block;" />
</a>

Sample: image + title card

Decorative images inside the card can use alt="" when the title conveys the purpose; otherwise describe the image.

<article style="max-width:320px;border:1px solid #e5e7eb;border-radius:16px;overflow:hidden;font-family:system-ui,sans-serif;">
  <a href="https://pay.zenofy.io/p/507f1f77bcf86cd799439011" style="text-decoration:none;color:inherit;">
    <img src="https://www.example.com/images/product-cover.jpg" alt="" width="320" height="180" style="width:100%;height:auto;display:block;" />
    <div style="padding:16px;">
      <h2 style="margin:0 0 8px;font-size:1.1rem;color:#0f2755;">Your product name</h2>
      <p style="margin:0;font-size:0.9rem;color:#6b7280;">Instant access after payment</p>
    </div>
  </a>
</article>

For email, use the email tutorial’s table layout instead of complex CSS cards.

All tutorials