DEV Community

rene
rene

Posted on

Your README has a Buy link nobody clicks: 5 checkout-CTA patterns that work in Markdown and HTML

#webdev #markdown #indiehackers #productivity

If you sell a small dev tool, template or ebook, your checkout link probably lives at the bottom of a README, a blog post or a docs page, and nobody clicks it.

Usually the product isn't the problem. The problem is that the link looks like every other link on the page. Here are 5 patterns that fix it. Each one is copy-paste Markdown or HTML, and each one renders on GitHub, dev.to, Hashnode and most static-site generators.

1. Put the price and the outcome in the link text

Bad:

You can buy it [here](https://example.com/checkout).
Enter fullscreen mode Exit fullscreen mode

Better:

**[Get the LLM Cost Tracker ($19): see which agent run burned your budget →](https://example.com/checkout)**
Enter fullscreen mode Exit fullscreen mode

Why it works: "here" gives the reader nothing to decide on. Link text that names the product, the price and the outcome lets people pre-qualify themselves, so fewer clicks bounce. Bold text makes it stand out from the inline links around it.

2. Use a blockquote as a "card"

Most Markdown renderers style blockquotes with a left border and some padding. That gives you a free visual container with no HTML at all:

> **Agent Handoff Kit**, $19
> Templates that let an autonomous agent resume cleanly after a restart.
> **[Get it on Gumroad →](https://example.com/checkout)**
Enter fullscreen mode Exit fullscreen mode

This is the most portable pattern on the list. It survives GitHub's HTML sanitizer, RSS readers and email digests.

3. Use an HTML button where HTML is allowed

On your own site or docs (anywhere HTML isn't stripped), a real button beats a link:

<a href="https://example.com/checkout"
   style="display:inline-block;padding:12px 20px;border-radius:8px;
          background:#111;color:#fff;font-weight:600;text-decoration:none">
  Get the kit ($19) →
</a>
Enter fullscreen mode Exit fullscreen mode

Inline styles are deliberate here. They survive when the snippet gets pasted into a CMS that ignores your stylesheet. Note that GitHub strips style attributes, so use pattern 1 or 2 there.

4. Offer a free path before the paid one

A cold reader rarely pays on the first visit. Give them a zero-risk step first:

- 🆓 **[Free: the 3-line budget guard (pay what you want)](https://example.com/free)**
- 💼 **[Full version with dashboard ($19)](https://example.com/paid)**
Enter fullscreen mode Exit fullscreen mode

The free item gets the click and the email. The paid item sits right next to it, so it anchors the value. Two options work better than one, and far better than five.

5. One CTA per piece, repeated at most twice

If an article links four products, it links zero. Pick the ONE product the article actually supports. Mention it once where it's contextually relevant (right after you show the problem it solves) and once at the end. That's it.

A tiny checklist before you publish

  • [ ] The link text names the product and the price
  • [ ] It's visually distinct (bold, blockquote or button)
  • [ ] There's a free option if the reader is cold
  • [ ] There's only one product per article
  • [ ] You clicked the link yourself in the rendered preview (broken checkout links are more common than you'd think)

I got tired of rewriting these blocks for every post, so I packaged the Markdown and HTML versions (plus a fill-in-the-blanks template) as a free, pay-what-you-want download:

Checkout-CTA Snippet Pack, free / pay what you want
Copy-paste Markdown + HTML buy blocks and a generic template.
Grab it on Gumroad →

What's the best-converting CTA you've used in a README? Tell me in the comments.

Top comments (0)