Pre-requisites
This advanced tutorial is for Web Developers or users familiar with HTML, CSS, Liquid, and Javascript. We provide this for educational purposes. If you aren't proficient with those programming languages, we'd recommend not trying this and hiring a Web Developer for Advance Custom Changes instead.
Before you change the code, always make a backup of your site.
NOTE: The code editor, code snippets, and custom HTML blocks do not affect native apps. To learn more about native apps customization, please check this help guide.
Access your store, go to Customizations, click on Advanced, and select Code editor.
Click on + New File to start creating a new template.
Then enter the File Name, select the .liquid File Format, and click on Create New Template.
In the newly created template, delete any existing code, paste the code below, and Save Changes.
<style>
.centered {
margin: auto;
text-align: center;
width: 50%;
padding-top: 25%;
}
</style>
<div class="container">
<div class="row">
<div class="centered">
<h1>{{ page.title }}</h1>
{% if user.subscriber? %}
{{ page.content }}
{% else %}
<div class="sub-box">
<p>This content is only available to subscribers</p>
<a href="/join" class="btn btn--primary btn--width"> View subscription plans </a>
</div>
{% endif %}
</div>
</div>
</div>
Last updated on Dec/08/2021
Navigate to the Customization tab again and open Pages to create the page.
Enter the Title, enable the page by clicking on Show On Site, select the Template and click on Create New Page.
NOTE: Optionally, you can edit the SEO Title, Description, and URL on the Advanced tab.
You have now created your private page that is available for subscribers only.
