Add Your Membership to Shopify

Once you have set up your membership program, the next step is to integrate it into your Shopify store by configuring dedicated membership pages. In this guide, we will walk you through the process of adding key membership pages to your store, designing them in the Shopify theme editor, and making them easy for your customers to find in your online store.

Key Membership Pages

When you create a membership program, Single automatically generates a Gated Content page for you on Shopify. This page automatically updates with any changes you make to your membership. It is also where members can view their perks and manage their membership once logged in. 

In addition to this auto-generated page, you'll also need to build out the following:

  • Join Page: This page serves as an introduction to your membership program, providing information and enticing visitors to join.
  • Login Page: This page acts as the gateway to your membership perks. Once members log in on this page, they will be automatically redirected to the gated content page.

Let's get started on making these pages.


Step 1 - Set Up the Join and Login Pages

When setting up new pages on Shopify for your membership program, the process revolves around two main actions: crafting a layout using templates and generating the actual pages that will apply these templates. Here's a step-by-step:

    For templates:

    1. Go to Online Store > Themes  in Shopify.
    2. Pick your theme and click Customize.
    3. In the Template drop-down, pick a template and hit + Create template.
    4. Give your template a name and choose a base one.
    5. Hit Create template.

    For pages:

    1. Go back to Online Store and click Pages.
    2. Make your pages and assign them to the templates you made.

    Tip: For more info on setting up templates and pages refer to these Shopify guides.


    Step 2 - Designing Your Pages

    Now that we have the page templates ready to go, we can design their look of theme in the Shopify theme editor using sections and blocks.

    Join Page

    Image Banner (11)

    • Add an image banner Shopify section with a CTA in the heading.
    • Add a multicolumn Shopify section for membership levels, with a column for each tier. Configure as follows:
      • Write the tier name and price as the column heading
      • List the perks in the column description
      • Write a CTA in the link label like 'Join Now'
      • Look for the membership tier product in Shopify that corresponds to the desired membership level, and use it as the link.
    • Use the collapsible content Shopify section to bring an FAQ or other useful details to the page.

    Login Page

    Image Banner (5)

    • Add customizable login block.
      • In the redirect URL field, search for and select the Gated Content page that Single has automatically created for you.


    Gated Content Page

    Image Banner (8)

    While there is no need to design or edit the Gated Content page template, it's helpful to preview it before going live. The page will update whenever changes are made to the membership, and members can easily edit their subscription using the gear icon on the top right of the landing page.


    Step 3 - Getting the Pages on Your Menu

    Last step! To make it easier for visitors to access your membership-related pages, consider adding a dedicated menu item named after your membership program, with convenient dropdown options for Join and Login.

    For example, if your membership is called "Official Fan Club," your primary navigation would look like this:

    To add a menu to your navigation, follow these steps:

      1. Go to Online Store > Navigation.
      2. Pick the menu you want to change.
      3. Press Add menu item and give it a name.
      4. Fill in the Link field and add tags if needed.
      5. Hit Add, then Save menu.

      Done! Your membership is now live on your store.


      What's Next?

      • Now that your membership has been added to your storefront, take a look at some of our marketing tips for getting the word out.