All Collections
Build My Storefront
Advanced Site Customization
Create a Subscriber-Only Page with the Code Editor
Create a Subscriber-Only Page with the Code Editor

Create a custom page that will only display its content to active subscribers

Art C avatar
Written by Art C
Updated over a week ago

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.

Did this answer your question?