Signup Page Available To Unsigned user

Self Hosted Ghost 3.19.1

Is there a way to let unsigned users see the pricing page on clicking the “subscribe” button instead of first making them sign in, like the rediverge.com blog?

Thanks

THAT FLOW. WOW.

That should be the standard signup workflow. Sign-up button > Price list > Stripe payment wall.

That would simplify so many things like setting accounts on mailgun or other services. As like this, you are not under the risk of getting attacked (flooded with email requests) and get a huge bill associated to 0 revenue.

Yes, Pretty Straight up and done well.

The currently sign in feels unnecessary in the crucial payments process…

Yes, it’s just a theme thing. It’s easy to display pricing on the subscribe form when not signed in as a member. Check the fourth screenshot of my theme here: Substation – A newsletter theme for Ghost

What theme are you using? It should be easy enough to simply copy and paste the HTML code that displays the plan information.

As @dan said, this is a theme thing. I personally just have a page dedicated for the pricing, and there you can decide whether or not you will go for the free or paid plans:

https://ghostportal.co/membership/

Also, it depends on the permission of the post. If a post is free for members only, then it will just ask you to sign up, if its a premium one, then it will show you the pricing tiers.

Is there a change I can make on this page to let non-signed in users access the signup page?

Lyra theme, signup.hbs

{{!< …/default}}

{{> site-header}}
{{#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}}

    {{!-- Not logged in: Sign up --}}
    <form class="signup-form" data-members-form="signup">
        <h1 class="signup-title">Signup to {{@site.title}}</h1>
        <p>{{@site.description}}</p>
        <div class="signup-box">
            <input data-members-email type="email" placeholder="Type your email..." required="true" autocomplete="false" />
            <button class="button primary" type="submit">
                <span class="button-content">Continue</span>
                <span class="button-loader">{{> "icons/loader"}}</span>
            </button>
        </div>
        <p><small>Already have an account? <a href="{{@site.url}}/signin/">Sign in</a></small></p>
        <div class="message-success"><strong>Great!</strong> Check your inbox and click the link to confirm your subscription</div>
        <div class="message-error">Please enter a valid email address!</div>
    </form>

{{/if}}

</div>
{{else}}

    {{!-- Not logged in: Sign up --}}
    <form class="signup-form" data-members-form="signup">
        <h1 class="signup-title">Signup to {{@site.title}}</h1>
        <p>{{@site.description}}</p>
        <div class="signup-box">
            <input data-members-email type="email" placeholder="Type your email..." required="true" autocomplete="false" />
            <button class="button primary" type="submit">
                <span class="button-content">Continue</span>
                <span class="button-loader">{{> "icons/loader"}}</span>
            </button>
        </div>
        <p><small>Already have an account? <a href="{{@site.url}}/signin/">Sign in</a></small></p>
        <div class="message-success"><strong>Great!</strong> Check your inbox and click the link to confirm your subscription</div>
        <div class="message-error">Please enter a valid email address!</div>
    </form>

{{/if}}

Just edit this portion of the code for whatever you want non-signed in users to see when they click sign up.

Hey @zen :wave:
The @price helper should provide you with all you need to modify themes to show pricing plans: Ghost Theme Development: Building custom membership flows

@DavidDarnes You got me wrong

I want unsigned users to directly go to stripe to checkout and enter their email there instead of logging into the ghost time.

See the checkout flow on the rediverge blog.

Sorry I thought you wanted to match the rediverge flow entirely. The same page I linked to shows the checkout buttons, which exactly what the Rediverge blog uses :blush:

1 Like

Thanks David !

1 Like