How to add an offer banner

How to add an offer banner

Offers are often shared as a link in an email call to action, during a podcast, or via social media. But what if you want to display a special offer as a banner on your site, so all visitors can access it? Our tutorial gives you everything you need to add a beautiful offer banner to your site.


Offers in Ghost provide a full-featured system to encourage new member signups with special discounts.

Creating offers and discounts
The offers system in Ghost allows you to convert more paid customers by offering shareable discounts to your audience. Creating an offerThe offers page appears in Ghost Admin when you have an active Stripe connection in place. Offers can be created for any plan or tier, using a percentage or

This tutorial will walk you through the process of adding a stunning offer banner to your site's theme.

We’ll use the Ghost theme, Headline, as our starting point. However, all the steps below will work for most themes.

Here's a preview of what we're going to create.

Website with banner offer at the top

Add the banner to your theme

From a local copy of the Headline theme, open default.hbs in your code editor. Add the following code block after the opening <body> tag.

<a class="gh-banner" href="https://YOUR-OFFER-URL" style="background-image: url({{asset "images/banner-background.jpg"}})">
    <div class="gh-banner-inner">
        <div class="gh-banner-left">
            <p class="gh-banner-headline">Support independent media</p>
            <p class="gh-banner-cta">Limited-time offer for new subscribers</p>
        </div>
        <div class="gh-banner-right">
            <p class="gh-banner-button">Learn more</p>
        </div>
    </div>
</a>

This code block contains the blueprint for your offer. Here's a reference of what it will look like on the page.

Banner announcing a limited time offer

Looks pretty good, right? To make the banner your own, replace https://YOUR-OFFER-URL with your own offer URL from Ghost Admin and update the banner copy to suit your publication's identity.

Add the background image

The last edit to make is to add the background image. Add the image to the theme's assets/images folder. Update the code snippet so that banner-background.jpg matches your image's filename.

banner-background.jpg

Creating a banner background image that works on a variety of screen sizes can be a challenge. For reference, our banner background image is 1257 by 90 px.

You can omit the background image altogether by removing style="background-image: url({{asset "images/banner-background.jpg"}})" from the code snippet above. The banner will fall back to the background color defined in the next section.

That's all the changes that need to be made to the theme 💪 Zip up the theme folder and upload it to your Ghost site.

Style the banner via Code Injection

To style the banner, add the following style tag to Code Injection → Site Header. After adding in the styles, click Save.

<style>
.gh-banner {
  display: block;
  height: 90px;
  padding: 0 var(--gap);
  line-height: 1.3;
  background-color: #eeeff1; /* Banner background color */
  background-repeat: no-repeat;
  background-position: center;
}

.gh-banner-inner {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
}

.gh-banner-right {
  flex-shrink: 0;
}

.gh-banner-headline {
  font-size: 120%;
  font-weight: 700;
}

.gh-banner-button {
  padding: 0.35em 0.65em;
  font-weight: 700;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: 3px;
  transition: background-color 0.3s;
}

.gh-banner:hover .gh-banner-button {
  background-color: var(--ghost-accent-color);
}

@media (max-width: 500px) {
  .gh-banner {
    font-size: 1.4rem;
  }

  .gh-banner-inner {
    flex-direction: column;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .gh-banner {
    position: relative;
    color: #fff;
  }

  .gh-banner::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: rgba(0 0 0 / 50%);
  }

  .gh-banner-inner {
    position: relative;
    z-index: 1;
  }
}

/* Override Headline theme defaults */
.gh-banner:hover {
  opacity: 1 !important;
}

.gh-head-menu::before {
  top: 170px;
}

.gh-head-menu::after {
  top: 226px;
}
</style>

Now, an offer banner appears on every page of your site ✨

Banner on post page

Summary

Offers are an effective tool to grow your paid membership by providing visitors an extra incentive to sign up. In this tutorial, you learned how to customize your theme to add an offer banner. Truth be told, the hardest part of all is likely coming up with the banner design and copy. We often talk about these kinds of things in the Ghost Forum, so come on over to share your creativity and find some inspiration 🌈

On this page Introduction

How was the tutorial?

Be the first to know.

Join the Ghost developer community — sign up to get early access to the latest features, developer tools, and tutorials.

No spam. Once a month. Unsubscribe any time.