Add Smartrr to its own page

In Shopify, go to the “Pages” menu to create a page. Let’s call this page Subscriptions:

Create page template to render the ‘smartrr-account’ snippet

Navigate to the theme’s code editor. In there, we want to create a new file under the “templates” folder, called “page.subscription-management.liquid”:

When the page is created, copy the below code and add it to the “page.subscription-management.liquid” template that you created above:

<div>
    <h2 style="text-align: center; display: none">{{ page.title }}</h2>
    {{ page.content }}
    {% if customer %}
      {% render 'smartrr-account' %}
    {% else %}
      <script>
      window.location.replace("/customer_authentication/login?return_to=/pages/subscriptions");
      </script>
    {% endif %}
</div>

This template will render the Smartrr account portal for your customers. If they are not signed in, they will see Shopify’s default login portal to login with their one-time code. Once they have logged in, they will be redirected automatically to the Smartrr account portal.

Link template to page

Go back to the page that we created here, and set the template that was created in the theme’s code editor:

Make sure to set the page’s visibility as “Visible”. Without doing this, the page won’t be available on the Menu page.

Add navigation to the account page’s menu list

The page should be visible and not hidden. Make sure the page is visible before proceeding.

In the Shopify admin, navigate to Content >> Menus: