How to change default subscription text?

How do you change the default text on above the subscribe button that appears near the footer and on the sidebar? (I’m on the journal theme v1.0.0).

Currently the default text is ‘Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.’

I want to change this to something less commercial sounding, like ‘Subscribe for updates’ for example.

Firstly, welcome :slightly_smiling_face:

You’ll need to download the theme, unzip the folder, change the text in the default.hbs file.

So in the contents of that file, you’ll be changing this:

<!DOCTYPE html>
<html lang="{{@site.locale}}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{meta_title}}</title>
    <link rel="preload" href="/fonts/inter-var-latin.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    <link rel="stylesheet" href="{{asset "built/screen.css"}}"> {{ghost_head}}
</head>

<body class="{{body_class}} is-head-b--a_n">
    <div class="gh-site">
        <header id="gh-head" class="gh-head gh-outer">
            <div class="gh-head-inner gh-inner">
                <div class="gh-head-brand">
                    <a class="gh-head-logo" href="{{@site.url}}"> {{#if @site.logo}} <img src="{{@site.logo}}" alt="{{@site.title}}"> {{else}} {{@site.title}} {{/if}} </a>
                    <button class="gh-burger"></button>
                </div>
                <nav class="gh-head-menu"> {{navigation}} </nav>
                <div class="gh-head-actions"> {{#unless @member}} <a class="gh-head-btn" href="#/portal/signup"> {{> icons/email}} Subscribe </a> {{else}} <a class="gh-head-btn" href="#/portal/account">Account</a> {{/unless}} </div>
            </div>
        </header> {{{body}}} {{^if @member.paid}} <div class="gh-subscribe">
            <div class="gh-outer">
                <section class="gh-subscribe-inner"> {{^if @member}} <h3 class="gh-subscribe-title">Subscribe to {{@site.title}}</h3>
                    <div class="gh-subscribe-description">Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.</div>
                    <a class="gh-subscribe-input" href="#/portal/signup">
                        <div class="gh-subscribe-input-text"> {{> icons/email}} jamie@example.com </div>
                        <div class="gh-subscribe-input-btn">Subscribe</div>
                    </a> {{else}} <h3 class="gh-subscribe-title">Ready for unlimited access?</h3>
                    <div class="gh-subscribe-description">Upgrade to a paid account to get full access.</div>
                    <a class="gh-subscribe-btn gh-btn gh-primary-btn" href="#/portal/account/plans">Upgrade now</a> {{/if}}
                </section>
            </div>
        </div> {{/if}} <footer class="gh-foot gh-outer">
            <div class="gh-foot-inner gh-inner">
                <div class="gh-copyright"> {{@site.title}} © {{date format="YYYY"}} </div>
                <nav class="gh-foot-menu"> {{navigation type="secondary"}} </nav>
                <div class="gh-powered-by">
                    <a href="https://ghost.org/" target="_blank" rel="noopener">Powered by Ghost</a>
                </div>
            </div>
        </footer>
    </div> {{#is "post, page"}} {{> pswp}} {{/is}} <script src="{{asset "built/main.min.js"}}"></script> {{ghost_foot}}
</body>

</html>

to this:

<!DOCTYPE html>
<html lang="{{@site.locale}}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{meta_title}}</title>
    <link rel="preload" href="/fonts/inter-var-latin.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    <link rel="stylesheet" href="{{asset "built/screen.css"}}"> {{ghost_head}}
</head>

<body class="{{body_class}} is-head-b--a_n">
    <div class="gh-site">
        <header id="gh-head" class="gh-head gh-outer">
            <div class="gh-head-inner gh-inner">
                <div class="gh-head-brand">
                    <a class="gh-head-logo" href="{{@site.url}}"> {{#if @site.logo}} <img src="{{@site.logo}}" alt="{{@site.title}}"> {{else}} {{@site.title}} {{/if}} </a>
                    <button class="gh-burger"></button>
                </div>
                <nav class="gh-head-menu"> {{navigation}} </nav>
                <div class="gh-head-actions"> {{#unless @member}} <a class="gh-head-btn" href="#/portal/signup"> {{> icons/email}} Subscribe </a> {{else}} <a class="gh-head-btn" href="#/portal/account">Account</a> {{/unless}} </div>
            </div>
        </header> {{{body}}} {{^if @member.paid}} <div class="gh-subscribe">
            <div class="gh-outer">
                <section class="gh-subscribe-inner"> {{^if @member}} <h3 class="gh-subscribe-title">Subscribe to {{@site.title}}</h3>
                    <div class="gh-subscribe-description">Subscribe for updates</div>
                    <a class="gh-subscribe-input" href="#/portal/signup">
                        <div class="gh-subscribe-input-text"> {{> icons/email}} jamie@example.com </div>
                        <div class="gh-subscribe-input-btn">Subscribe</div>
                    </a> {{else}} <h3 class="gh-subscribe-title">Ready for unlimited access?</h3>
                    <div class="gh-subscribe-description">Upgrade to a paid account to get full access.</div>
                    <a class="gh-subscribe-btn gh-btn gh-primary-btn" href="#/portal/account/plans">Upgrade now</a> {{/if}}
                </section>
            </div>
        </div> {{/if}} <footer class="gh-foot gh-outer">
            <div class="gh-foot-inner gh-inner">
                <div class="gh-copyright"> {{@site.title}} © {{date format="YYYY"}} </div>
                <nav class="gh-foot-menu"> {{navigation type="secondary"}} </nav>
                <div class="gh-powered-by">
                    <a href="https://ghost.org/" target="_blank" rel="noopener">Powered by Ghost</a>
                </div>
            </div>
        </footer>
    </div> {{#is "post, page"}} {{> pswp}} {{/is}} <script src="{{asset "built/main.min.js"}}"></script> {{ghost_foot}}
</body>

</html>

And then you’ll need to save the file, rezip the folder and upload it as a modified version of the theme via your Ghost admin settings in the Theme section at https://example.com/ghost/#/settings/theme.

There’s another “simpler” way you could do this by connecting via SSH to your server and modifying the file directly, but if you aren’t familiar with that process, then the method I’ve described above will likely be much easier for you. I hope this helps.

Oh, and I haven’t used that Journal theme before but I just downloaded it then and made the changes so I could show you. I’m not sure whether it’s allowed here on the forum or not, but I can provide you with the modified zip file you would just need to upload via the dashboard (I generally wouldn’t advise downloading zip files from strangers on the internet but you can probably see that I’m a regular here on the forum and that might be worth something).

Also, I would recommend learning how to do this (both ways), downloading the theme and changing files manually, using any text editor like Notepad++, Sublime Text, Atom etc. - as well as learning how to connect via SSH and modifying files directly. This will come in handy in future whenever you need to modify the template files themselves. But for simple style changes you’ll usually just be able to put some CSS in the “Code injection” section of your admin settings at https://example.com/ghost/#/settings/code-injection.

Wow, thank you so much for taking the time to explain this as you did. This solves my situation perfectly. Cheers DonaldH.

1 Like

Yes, you’ll just need to modify a similar line in the index.hbs file :slightly_smiling_face:

The template file default.hbs is basically the wrapper for every webpage on the site and index.hbs is the layout for the homepage, that gets wrapped inside default.hbs (as the other pages do).

So you will change index.hbs from

{{!< default}}

<main id="gh-main" class="gh-main gh-outer">
    <div class="gh-inner">
        {{^is "paged"}}
            {{#get "posts" limit="1"}}
                {{#foreach posts}}
                    <article class="gh-latest gh-card {{post_class}}">
                        <a class="gh-card-link" href="{{url}}">
                            <header class="gh-card-header">
                                <div class="gh-article-meta">
                                    <span class="gh-card-date">Latest — <time datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time></span>
                                </div>

                                <h2 class="gh-article-title gh-card-title">{{title}}</h2>
                            </header>

                            <p class="gh-article-excerpt">{{excerpt}}</p>

                            <footer class="gh-card-meta">
                                <span class="gh-card-meta-wrapper">
                                    <span class="gh-card-duration">{{reading_time}}</span>

                                    {{^has visibility="public"}}
                                        {{> icons/star}}
                                    {{/has}}
                                </span>
                            </footer>
                        </a>
                    </article>
                {{/foreach}}
            {{/get}}
        {{/is}}

        <div class="gh-wrapper">
            <section class="gh-section">
                <h2 class="gh-section-title">More issues</h2>

                <div class="gh-feed">
                    {{#foreach posts}}
                        {{^is "paged"}}
                            {{^has index="0"}}
                                {{> loop}}
                            {{/has}}
                        {{else}}
                            {{> loop}}
                        {{/is}}
                    {{/foreach}}
                </div>

                <button class="gh-loadmore gh-btn">Load more issues</button>
            </section>

            <aside class="gh-sidebar">
                <section class="gh-section">
                    <h2 class="gh-section-title">About</h2>

                    <div class="gh-about">
                        {{#if @site.icon}}
                            <img class="gh-about-icon" src="{{@site.icon}}" alt="{{@site.title}}">
                        {{/if}}

                        <section class="gh-about-wrapper">
                            <h3 class="gh-about-title">{{@site.title}}</h3>

                            {{#if @site.description}}
                                <p class="gh-about-description">{{@site.description}}</p>
                            {{/if}}
                        </section>
                    </div>

                    {{^if @member.paid}}
                        <div class="gh-signup">
                            {{^if @member}}
                                <p class="gh-signup-description">Sign up now to get access to the library of members-only issues.</p>

                                <a class="gh-subscribe-input" href="#/portal/signup">
                                    <div class="gh-subscribe-input-text">
                                        {{> icons/email}}
                                        jamie@example.com
                                    </div>
                                    <div class="gh-subscribe-input-btn">Subscribe</div>
                                </a>
                            {{else}}
                                <p class="gh-signup-description">Upgrade to a paid account to get full access.</p>
                                <a class="gh-signup-btn gh-btn gh-primary-btn" href="#/portal/account/plans">Upgrade now</a>
                            {{/if}}
                        </div>
                    {{/if}}
                </section>

                {{#get "posts" filter="featured:true" limit="all" as |featured|}}
                    {{#if featured}}
                        <section class="gh-section">
                            <h3 class="gh-section-title">Featured</h3>

                            <div class="gh-featured gh-feed">
                                {{#foreach featured}}
                                    {{> loop}}
                                {{/foreach}}
                            </div>
                        </section>
                    {{/if}}
                {{/get}}

                {{#get "tags" include="count.posts" limit="all" as |topic|}}
                    <section class="gh-section">
                        <h3 class="gh-section-title">Topics</h3>

                        <div class="gh-topic">
                            {{#foreach topic}}
                                <a class="gh-topic-item" href="{{url}}">
                                    <h3 class="gh-topic-name">{{name}}</h3>
                                    <span class="gh-topic-count">
                                        {{plural count.posts empty="0 issues" singular="% issue" plural="% issues"}}
                                    </span>
                                </a>
                            {{/foreach}}
                        </div>
                    </section>
                {{/get}}
            </aside>
        </div>
    </div>
</main>

to

{{!< default}}

<main id="gh-main" class="gh-main gh-outer">
    <div class="gh-inner">
        {{^is "paged"}}
            {{#get "posts" limit="1"}}
                {{#foreach posts}}
                    <article class="gh-latest gh-card {{post_class}}">
                        <a class="gh-card-link" href="{{url}}">
                            <header class="gh-card-header">
                                <div class="gh-article-meta">
                                    <span class="gh-card-date">Latest — <time datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time></span>
                                </div>

                                <h2 class="gh-article-title gh-card-title">{{title}}</h2>
                            </header>

                            <p class="gh-article-excerpt">{{excerpt}}</p>

                            <footer class="gh-card-meta">
                                <span class="gh-card-meta-wrapper">
                                    <span class="gh-card-duration">{{reading_time}}</span>

                                    {{^has visibility="public"}}
                                        {{> icons/star}}
                                    {{/has}}
                                </span>
                            </footer>
                        </a>
                    </article>
                {{/foreach}}
            {{/get}}
        {{/is}}

        <div class="gh-wrapper">
            <section class="gh-section">
                <h2 class="gh-section-title">More issues</h2>

                <div class="gh-feed">
                    {{#foreach posts}}
                        {{^is "paged"}}
                            {{^has index="0"}}
                                {{> loop}}
                            {{/has}}
                        {{else}}
                            {{> loop}}
                        {{/is}}
                    {{/foreach}}
                </div>

                <button class="gh-loadmore gh-btn">Load more issues</button>
            </section>

            <aside class="gh-sidebar">
                <section class="gh-section">
                    <h2 class="gh-section-title">About</h2>

                    <div class="gh-about">
                        {{#if @site.icon}}
                            <img class="gh-about-icon" src="{{@site.icon}}" alt="{{@site.title}}">
                        {{/if}}

                        <section class="gh-about-wrapper">
                            <h3 class="gh-about-title">{{@site.title}}</h3>

                            {{#if @site.description}}
                                <p class="gh-about-description">{{@site.description}}</p>
                            {{/if}}
                        </section>
                    </div>

                    {{^if @member.paid}}
                        <div class="gh-signup">
                            {{^if @member}}
                                <p class="gh-signup-description">Subscribe for updates</p>

                                <a class="gh-subscribe-input" href="#/portal/signup">
                                    <div class="gh-subscribe-input-text">
                                        {{> icons/email}}
                                        jamie@example.com
                                    </div>
                                    <div class="gh-subscribe-input-btn">Subscribe</div>
                                </a>
                            {{else}}
                                <p class="gh-signup-description">Upgrade to a paid account to get full access.</p>
                                <a class="gh-signup-btn gh-btn gh-primary-btn" href="#/portal/account/plans">Upgrade now</a>
                            {{/if}}
                        </div>
                    {{/if}}
                </section>

                {{#get "posts" filter="featured:true" limit="all" as |featured|}}
                    {{#if featured}}
                        <section class="gh-section">
                            <h3 class="gh-section-title">Featured</h3>

                            <div class="gh-featured gh-feed">
                                {{#foreach featured}}
                                    {{> loop}}
                                {{/foreach}}
                            </div>
                        </section>
                    {{/if}}
                {{/get}}

                {{#get "tags" include="count.posts" limit="all" as |topic|}}
                    <section class="gh-section">
                        <h3 class="gh-section-title">Topics</h3>

                        <div class="gh-topic">
                            {{#foreach topic}}
                                <a class="gh-topic-item" href="{{url}}">
                                    <h3 class="gh-topic-name">{{name}}</h3>
                                    <span class="gh-topic-count">
                                        {{plural count.posts empty="0 issues" singular="% issue" plural="% issues"}}
                                    </span>
                                </a>
                            {{/foreach}}
                        </div>
                    </section>
                {{/get}}
            </aside>
        </div>
    </div>
</main>