Transformar uma imagem de produto num link de checkout

Imagens de destaque e cartões convertem melhor quando toda a área visual é clicável.

Envolva o <img> num <a> que aponte ao checkout do produto. Use texto alternativo descritivo para acessibilidade e quando as imagens são bloqueadas.

Use atributos width e height para reduzir saltos de layout; limite com max-width:100% em ecrãs pequenos.

Exemplo: só imagem

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

Exemplo: cartão com imagem e título

Imagens decorativas no cartão podem usar alt="" quando o título transmite o propósito; caso contrário, descreva a imagem.

<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;">Nome do seu produto</h2>
      <p style="margin:0;font-size:0.9rem;color:#6b7280;">Acesso imediato após o pagamento</p>
    </div>
  </a>
</article>

Para email, use o layout em tabela do tutorial de email em vez de cartões CSS complexos.

Todos os tutoriais