Ghost CMS includes a default content CTA (Call-to-Action) designed to encourage newsletter signups or paid memberships. While it works out of the box, customizing the CTA to match your brand and conversion goals can improve engagement and retention.

In this guide, we’ll walk through how to edit the content-cta in your Ghost theme by modifying the theme’s template files. Whether you want to change the text, adjust the design, or add dynamic content for members and subscribers, this tutorial will help you create a CTA that fits your needs.

What you’ll learn:
✅ Where to find the content-cta in your Ghost theme
✅ How to modify the CTA’s text, layout, and appearance
✅ Styling the CTA with custom CSS
✅ Best practices for improving conversions with a custom CTA

By the end of this guide, you’ll have full control over your Ghost site’s content CTA, making it more effective for newsletter signups, membership growth, or other calls to action.

Locating the content CTA in your theme

The content CTA in Ghost is a built-in prompt that encourages readers to subscribe or become members. While some themes include a dedicated file, others rely on Ghost’s default template.

To check whether your theme has its own template or uses the default one you can open the theme folder and look for the content-cta.hbs inside the partials directory. If this file exists, you can edit it directly to change the CTA’s text, layout, or styling.

When a theme doesn’t have the partials/content-cta.hbs, Ghost falls back to its built-in template: 👉 Default content-cta.hbs on GitHub

This default template is used automatically, and to override it, you must create partials/content-cta.hbs in your theme.

Editing Ghost’s default content CTA

This built-in template displays a subscription prompt based on post visibility settings, encouraging readers to subscribe or upgrade their membership.

The default CTA uses some member-specific blocks as well as some checks regarding the visibility of the post.

Below is the default content CTA used by Ghost:

{{{html}}}
<aside class="gh-post-upgrade-cta">
  <div class="gh-post-upgrade-cta-content" style="background-color: {{@site.accent_color}}">
    {{#has visibility="paid"}}
      <h2>This {{#is "page"}}page{{else}}post{{/is}} is for paying subscribers only</h2>
    {{/has}}
    {{#has visibility="members"}}
      <h2>This {{#is "page"}}page{{else}}post{{/is}} is for subscribers only</h2>
    {{/has}}
    {{#has visibility="tiers"}}
      <h2>This {{#is "page"}}page{{else}}post{{/is}} is for subscribers on the {{tiers}} only </h2>
    {{/has}}
    {{#if @member}}
      <a class="gh-btn" data-portal="account/plans" href="#/portal/account/plans" style="color:{{@site.accent_color}}">Upgrade your account</a>
    {{else}}
      <a class="gh-btn" data-portal="signup" href="#/portal/signup" style="color:{{@site.accent_color}}">Subscribe now</a>
      <p><small>Already have an account? <a data-portal="signin" href="#/portal/signin">Sign in</a></small></p>
    {{/if}}
  </div>
</aside>

Let's break down the most important parts:

• <aside class="gh-post-upgrade-cta">: The entire CTA is wrapped inside an <aside> element with the class gh-post-upgrade-cta. This makes it easy to style or reposition in your theme’s CSS.
• style="background-color: {{@site.accent_color}}": The CTA automatically uses your site’s accent color, which is set in Ghost Admin → Settings → Brand. This ensures it blends with your theme’s design.
• {{#has visibility="..."}}: Ghost determines who can see the post and customizes the CTA message accordingly:
  • visibility="paid" → Shown for paid-only posts.
  • visibility="members" → Shown for members-only posts.
  • visibility="tiers" → Shown for specific membership tiers.
• {{#if @member}}: Ghost checks if the visitor is a logged-in member:
  • If logged in: Shows an “Upgrade your account” button, linking to the membership portal.
  • If not logged in: Shows a “Subscribe now” button, linking to the signup portal.

Customizing the layout and style of the content CTA

In case you want to customize the layout of the CTA, you have to change the content-cta.hbs accordingly. Add or remove elements or change the order, any kind of change you need can be done here.

Next for changing the style of the CTA, you can use the Code injection to add your custom styles.

Targeting the css classes you can adjust text and background colors, change the font, text size, etc. For example:

1. Changing the background color:

<style>
  .gh-post-upgrade-cta-content {
    background-color: #f0e68c!important;
  }
</style>

2. Changing the title color:

<style>
  .gh-post-upgrade-cta-content h2 {
    color: #000!important;
  }
</style>

3. Changing the button style:

<style>
  .gh-post-upgrade-cta a.gh-btn {
    background: #000!important;
    color: #f0e68c!important;
  }
</style>

Best practices for an effective CTA

✅ Use clear and compelling copy – Ensure your message is direct and action-oriented. Instead of “Subscribe now”, try “Join 10,000+ readers—Subscribe for free!”.

✅ Ensure high visibility – The CTA should be easy to spot. Add sufficient padding, and use contrasting colors to make it stand out.

✅ Personalize based on audience – Use Ghost helpers ({{#if @member}}, {{#has visibility="paid"}}) to display different messages for members, free subscribers, and guests.

✅ Optimize button design – Make the button large enough for easy tapping, use a bold color, and ensure good hover effects to enhance engagement.

✅ Test different versions – A/B test different CTA texts, colors, and placements to see what performs best for your audience.

✅ Use in combination with the public preview card – The content CTA works especially well with the public preview, having a portion of the content publicly available can increase the effectiveness of the CTA

Customizing the content CTA in your Ghost theme allows you to align it with your brand and optimize it for conversions. Whether you modify the text, layout, or styling, a well-designed CTA can significantly improve engagement and encourage more signups or upgrades.