What if I want to do paywalls 'wrong'?

This is Part 2 of 2 of a mini-series on paywalls. Part 1 is "How Ghost gets Paywalls Right". You should probably read it if you want Part 2 to make sense, or perhaps to convince yourself that Part 2 isn't something you want to do.

(This post is a WIP, but I wanted to capture it here since it sounds like some folks want this less secure but more indexable solution.)

You could certainly implement a javascript-based paywall right now in Ghost, no major coding required. If you only need to distinguish between members and non-members, you could even do it with only code injection.

I'd insert HTML cards above and below free and paid content, like this.

<!--Only this part goes in the HTML card:-->
<div class='free-content'>

put your free content here, using the Ghost editor

</div> ; // also goes into an HTML card, to close the div from above.

Note that Ghost will probably 'helpfully' try to close your tags for you. Don't let it.

Then do the same for a 'paid-content' class.

Tell Google about what you're doing by setting up the schema to disclose the paywalling. This is important, because Google really doesn't like any indication that you're serving it different content than other users.

And then you could use some combination of css and javascript to hide the paywalled content and/or replace it with a call-to-action card.

The easy way to detect whether someone is subscribed by checking for a cookie, something similar to example #2 on this page: https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie#examples. Your logged-in users will have a cookie with the name ghost-members-ssr. If you don't find that cookie, remove the '.paid-content' div, or add a class that hides it, or replace it with a CTA. This approach could be done with just code injection.

If you need to distinguish between paying and free members, you'll need to edit the theme, because you need to check for @member.paid. So you could something like this in the theme:

{{^if @member.paid}}
<style>
.paid-content {visibility: none}
</style>
{{/if}}

Or you could put in some Javascript that replaces the paid content with your CTA, or animate in a big CTA that blocks content access after so many second, or a variety of other effective but obnoxious paywall implementations.