Lyra: Show pricing plans and paywall to suscribe

Developer help
1

Hello,

I’m using Lyra, and I would like to have only paid suscriptions. To do this, the most direct way would be to configure Ghost to show at /signup/ the pricing plans always and forward to the paywall, instead of requesting a mail.

I have pretty basic knowledge around coding. (I could maintain the change once I know what I need to change). Is there any way to do this? Could anyone help me here?

The idea is to have on Lyra the same suscription flow that exists on https://rediverge.com

2

Ok, so in fact i got this working.

The file to be modified is /var/www/ghost/content/themes/Lyra/members/signup.hbs (Watch out if your theme has been uploaded from the web, as the directory under “themes” can be using another name).

Then you need to paste the code on the {{else if @member}} section below the {{else}} section too.
The result is this:

(Be advised that the code could change when updating the theme, so check that the behavior has not changed).

{{!< ../default}}
   <header class="site-header">
{{> site-header}}
</header>
<main id="site-main" class="site-main site-signup outer">
<div class="inner">

{{#if @member.paid}}

    {{!-- Logged in, paying member: Redirect home --}}
    <script>window.location = '{{@site.url}}';</script>

{{else if @member}}

    {{!-- Logged in, not paying: Check out --}}
    <div class="checkout-form">
        <h1 class="checkout-title">Choose your subscription</h1>
        <p>Unlock full access to {{@site.title}} and see the entire library of members-only content & updates</p>
        <div class="checkout-box">
            <div class="checkout-plan">
                <header class="checkout-plan-header">
                    <h3>Monthly</h3>
                    <span>{{@price.currency_symbol}}</span><strong>{{@price.monthly}}</strong> / month
                </header>
                <div class="checkout-plan-content">
                    <ul>
                        <li>Full access to all private posts</li>
                        <li>Regular updates with new content</li>
                        <li>Support independent publishing</li>
                        <li>Simple, secure card payment</li>
                    </ul>
                    <a class="button primary fit" href="javascript:" data-members-plan="Monthly">Choose this plan</a>
                </div>
            </div>
            <div class="checkout-plan">
                <header class="checkout-plan-header">
                    <h3>Yearly</h3>
                    <span>{{@price.currency_symbol}}</span><strong>{{@price.yearly}}</strong> / year
                </header>
                <div class="checkout-plan-content">
                    <ul>
                        <li>Full access to all private posts</li>
                        <li>Regular updates with new content</li>
                        <li>Support independent publishing</li>
                        <li>Simple, secure card payment</li>
                        <li>One easy payment instead of 12!</li>
                    </ul>
                    <a class="button primary fit" href="javascript:" data-members-plan="Yearly">Choose this plan</a>
                </div>
            </div>
        </div>
    </div>

{{else}}

        <div class="checkout-form">
        <h1 class="checkout-title">Choose your subscription</h1>
        <p>Unlock full access to {{@site.title}} and see the entire library of members-only content & updates</p>
        <div class="checkout-box">
            <div class="checkout-plan">
                <header class="checkout-plan-header">
                    <h3>Monthly</h3>
                    <span>{{@price.currency_symbol}}</span><strong>{{@price.monthly}}</strong> / month
                </header>
                <div class="checkout-plan-content">
                    <ul>
                        <li>Full access to all private posts</li>
                        <li>Regular updates with new content</li>
                        <li>Support independent publishing</li>
                        <li>Simple, secure card payment</li>
                    </ul>
                    <a class="button primary fit" href="javascript:" data-members-plan="Monthly">Choose this plan</a>
                </div>
            </div>
            <div class="checkout-plan">
                <header class="checkout-plan-header">
                    <h3>Yearly</h3>
                    <span>{{@price.currency_symbol}}</span><strong>{{@price.yearly}}</strong> / year
                </header>
                <div class="checkout-plan-content">
                    <ul>
                        <li>Full access to all private posts</li>
                        <li>Regular updates with new content</li>
                        <li>Support independent publishing</li>
                        <li>Simple, secure card payment</li>
                        <li>One easy payment instead of 12!</li>
                    </ul>
                    <a class="button primary fit" href="javascript:" data-members-plan="Yearly">Choose this plan</a>
                </div>
            </div>
        </div>
    </div>


{{/if}}

</div>
</main>
3

Hi @Luis,

the only important part is:

<input type="button" id="submit" class="button primary fit" href="javascript:"

 data-members-plan="Monthly" value="Choose this Plan">

You can insert it anywhere on your page, like a dedicated Pricing Page or something.

... data-members-plan="Yearly" ...

will continue to checkout with the yearly subscription plan

2 Likes