How to Add an Offer Banner in Ghost
Posted on January 20th, 2025
Offers are often shared through links in emails, talked about in podcasts, or posted on social media. If you want to show a special offer directly on your website, using a banner is a good idea. A nice offer banner catches people’s eyes and prompts them to take action. It can keep visitors engaged and help increase sales by making your promotions easy to see.
In this tutorial, we’ll show you how to create an attractive offer banner for your site. You’ll learn how to customize it to fit your brand and make it stand out, helping you get the most from your special offers.
Offers in Ghost give you a complete system to help attract new members by providing special discounts.
Add the Banner to Your Theme
Open the default.hbs
file from your local copy of the Headline theme in your code editor. Then, add the following code right 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 has the plan for your offer. Here’s an example of how it will appear on the page.
It looks great, doesn’t it? To personalize the banner, change https://YOUR-OFFER-URL
to your own offer link from Ghost Admin and update the text to match your publication’s style.
Add the Background Image
The final step is to add the background image. Place your image in the theme’s assets/images
folder. Then, update the code so that banner-background.jpg
matches the name of your image.
Creating a banner background that looks good on different screen sizes can be tricky. For your reference, our banner background image is 1257 by 90 pixels.
If you prefer not to use a background image, you can remove style="background-image: url({{asset "images/banner-background.jpg"}})"
from the code above. The banner will then use the background color set in the next section.
That’s all the changes needed for 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 this style tag to Code Injection → Site Header. Once you’ve added the styles, remember to 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; } } .is-head-open .gh-banner { display: none; } /* Override Headline theme defaults */ .gh-banner:hover { opacity: 1 !important; } .gh-head-menu::before { top: 170px !important; } .gh-head-menu::after { top: 226px !important; } </style>
Now, an offer banner will show up on every page of your site.
Conclusion
Offers are an effective way to grow your paid membership by providing visitors with a reason to sign up. In this tutorial, you learned how to personalize your theme to include an offer banner, which can significantly boost user engagement. One of the hardest parts is often coming up with the right design and wording for your banner. If you’re looking for ideas or want to share your own designs, the Ghost Forum is a fantastic place to connect with others. Join the discussion to get inspiration and tips from fellow users who are also creating banners. By sharing ideas and working together, you can create an attractive offer that appeals to your audience and encourages sign-ups!