Creating an Introduction Page to Your Membership Program

You may put a lot of effort into designing an enticing and sophisticated customer loyalty or membership programs. Then you need a great introduction page to showcase it, from your store's membership levels, points acquisition and usage, to products on member prices and more. This helps your customers quickly understand the benefits of becoming a member, enhancing their willingness to join. 

After setting the page up, you can copy the link to use it as a member recruitment page within your store.

Creating a Landing Page for Your Program

1. From your SHOPLINE admin panel, click Apps from the left pane.
2. Find and click the Member System app to open it if you have installed it. Click the Go to App Store button to go to SHOPLINE App Store if you haven’t.
   
   
   
3. In the Member System app, go to Display > Membership site from the left pane.
4. Click the Set now button in the upper right corner. The system automatically redirects you to the Store Design module of the Online Store channel and opens a custom page editor in a new tab of your browser for you to design your program landing page.
   
   
   
5. A default template is provided for you to edit. You can customize components like membership levels, points acquisition and usage, member pricing, and referral awards. Each component corresponds to a module in the Member System app. The configurations of the modules are retrieved and applied to the components.
6. Once you finish your editing, click Save in the upper right corner, and you can then click the View you store button to see how the page looks.
   
   
   
7. You can also go back to the Member System app > Membership site and click the Copy link button in the upper right corner. Use this link to display the page in your store for membership recruitment.
   
   
   

Editing the Image Component

By default, the template provides an image component with example title and subtitle for the banner and referrals sections. Modify the image, title, subtitle, button text, and jump link based on your needs for the store.

• Images: Customize images for PC and mobile devices, and set up how the image adapts. You can decide if you want to display the image after the member is logged in. The Shown to members after logging in toggle is turned off by default, and your customers will only see the Member assets component (see next section) after logging in.
• Titles: Provide the title and subtitle copies for the component.
• Buttons: Each image component displays up to 2 buttons. Configure button text, text color, background color, jump link, and button corner radius. Turn off the toggle if you don't want to display buttons.

Editing the Member Assets Component

When your members log in, the Member assets component displays to them their membership level (or their paid membership), points, and other available benefits. You can decide the items to be displayed.

• The Display member information after logging in toggle is turned on by default, and your customers are required to log in to view their  member assets overview, otherwise, the overview is hidden. If you turn it off, this component will be displayed regardless of whether the customer is logged in or not. If the customer is not logged in, the assets overview of a non-member is displayed instead.
• You can also customize the title, background image, displayed assets, background color, redirect buttons and text, redirect links, and other information.

Editing the Membership Level Component

In the Membership level component, the membership program you configure in the Member System app, including levels or paid membership, thresholds, and benefits, are retrieved and displayed in the component.

• The system retrieves your configured membership rules and showcases the content. If no rules are configured in the Member System app, the editor displays placeholders as examples, which won’t be displayed on the storefront.
  
  
  
• If you run a program of member levels, this component displays the thresholds for each level. If you run a program of paid membership,  this component displays the subscription pricing and cycles for paid membership.
• This component always displays the membership program, not the member’s level or paid membership, even If they are already logged in.
• You can configure the button, including the jump page, button text, color, and corner radius. You can also set the background color and text color of the member level cards.

Editing the Points Components

The template provides two types of components that are related to member points: Acquisition method of points and Using method of points. The points acquisition and usage rules you configure in the Member System app are retrieved and displayed in the respective component. You can edit the content and style of the components and items within it.

• The Component style design section: This is where you design the overall style of the component.  You can configure the compnent’s title, font size, and background images on PC and mobile devices.
• The Button rule design section: Configure the button text, color, and corner radius here.
• The Point rule design section:
  • The system retrieves your configured points acquisition and usage rules and showcases the content. If you didn’t enable or configure the Points module in the Member System app, the editor displays placeholders as examples, which won’t be displayed on the storefront.
  • Turn on the toggle of rules listed under the Display point rule section based on your needs. Each rule becomes a card that occupies a slot in the component. The preview pane in the middle displays the effect according to your display style configuration. For the Redeem product rule, if you modify the product's name or image in the Member System app, there may be a delay in reflecting the latest edit in the component.
  • Customize the card style, including the text and background colors, and the card content and images in the Custom content section if you don’t want to follow the default settings (the system generates the card content automatically based on your configurations). You can also decide how many cards you want to display in the component by setting up the numbers of columns and rows. 
  • You can choose to display the cards as images, icons, or texts using the display style dropdown menu. The Once placed an order rule of the Acquisition method of points component (corresponds to Successful orders in the Member System app), and the Cash back rule of the Using method of points component are displayed as images by default. The other rules are displayed as icons by default.
    

    Note: Be aware that the settings and customization you made apply to all the cards in the component. If you want to apply a different style for some rules, click Add content in the left pane to create another component for these rules.

• If the customer is logged in, their member level and corresponding points acquisition and usage rules are displayed instead.

Editing the Member Price Component

The products on member prices and their prices you configure in the Member System app are retrieved and displayed in the Member price component.

• The system automatically retrieves and displays the names, images, selling prices, and member prices of products.
• For products with multiple variants, if you set different member prices for the variants, the variant with the lowest member price is displayed.
• If a product on member price is deactivated, the rules are invalid, or the Member price module is not enabled in the Member system app, it won’t be displayed on the storefront.
• You can customize the title, subtitle, background image and color on PC/mobile devices, and text color. You can also decide how many products you want to display in the component on PC and mobile devices by setting up the numbers of columns and rows. If the number of your products on member prices exceeds the capacity, a View all button is displayed, leading to the product list page to view all items.

Editing the Member Recommendation Component

The Member recommendation component will display the referral program and the rewards you configured in the Member System app, along with the referral link and the distribution channels.

• By default, the editor has already provided an Image component, which only displays the store link for referral. When you add this component and turn on the Shown to members after logging in toggle, it will display the referrer’s rewards, invitee's rewards, and the referrer's exclusive link and sharing channels for logged-in members.
• The title is created based on the rules you set in the Referral management module of the Member System app. Ensure that you have configured the rules and the module is enabled. If you wish to customize the title, you can modify the text in the Title section.