- DarkLight
Using the Customer Account Extension on Shopify’s Orders Page
- DarkLight
Available for
Shopify and Shopify Plus merchants using Shopify’s Customer Accounts.
Goals and Outcomes
With Shopify’s introduction of passwordless Customer Accounts, we’ve been committed to supporting brands making the switch. To facilitate the shopper experience, we’ve developed a customer account extension that integrates loyalty information directly into the Orders page. When customers log in, they can instantly see their loyalty details, making it easier to engage with your rewards program and maximize its impact.
In this article, you’ll learn how to set up and use the new customer account extension for Shopify.
New Customer Account Extension Overview
How It Works
The extension supports both program opt-in strategies - All Customers and Only Members Who Signed Up - and can display the following loyalty details:
Customer name
Available points
Current VIP tier
When a customer logs in and is directed to the Orders page, they can immediately see their points balance and/or VIP tier status. Depending on your opt-in strategy, they may need to take an extra step to join your loyalty program. The extension allows you to customize their experience at each stage.
How to Set Up the Extension
To add the account extension to your Orders page in Shopify, follow these steps:
Go to your Shopify admin.
Navigate to Online Store > Themes > Customize.
From the Home page dropdown, select Checkout and customer accounts.
From the Checkout dropdown at the top, select Orders.
Go to Apps in the upper left corner, and click to add Yotpo Loyalty & Rewards’ Customer account page. This will add the app block to your store.
Customize the App block settings for the different customer logged-in states.
Note
You only need to add the app block to your Shopify theme once. If you click to add it again, it will duplicate the settings, and you’ll have to delete the duplicate manually.
Opt-In States Configuration
You can customize the experience for three different customer states:
State 1: Logged-in and a loyalty member — Logged-in customers who are an active member of your loyalty program.
State 2: Opt-in is set to “All Customers” — Logged-in customers who are eligible for your program, but haven’t received their New member reward yet. Only applicable if your program eligibility is set to “All Customers.” This is a unique state that allows you to target customers who haven’t made their first purchase yet and encourage them to start shopping.
State 3: Opt-in is set to “Only Members Who Signed Up” — Logged-in customers who opted to join your loyalty program, but haven’t completed the full signup or made a purchase. Only applicable if your program eligibility is set to “Only Members Who Signed Up.”
Tip
For ease of use, you can copy and paste the suggested text under each setting.
State 1: Logged-in and a Loyalty Member
What to customize:
Welcome message — This is the message customers will see at the top of the Orders page containing their current points balance.
Example: “Hey John, you have 100 points!”
Subtitle text (optional) — Optional free text that will appear under the welcome message. For example, if your program includes VIP tiers, you can add the customer’s current tier here.
Example: “You’re currently in the Silver tier.”
Button text — Add your CTA here.
Example: “See Rewards”
Button URL — Direct customers to your Rewards Page or another section of your store.
For customers in State 1, the log-in process will look like this:
State 2: Opt-in is set to “All Customers”
What to customize:
Welcome message — This is the welcome message customers will see at the top of the Orders page. It should encourage them to complete their first purchase to earn the New member reward.
Example: “Earn your new member reward on your first purchase!”
Button text — Add your CTA here.
Example: “Shop now”
Button URL — Direct customers to your product catalog or another relevant page.
For customers in State 2, the log-in process will look like this:
State 3: Opt-in is set to “Only Members Who Signed Up”
What to customize:
Opt-in message — This is the welcome message customers will see at the top of the Orders page. It should encourage them to complete the loyalty program signup so they can start earning rewards.
Example: “You’re a step away from rewards! Join our program to earn points and rewards every time you shop.”
Disclaimer text — Add the disclaimer customers must agree to upon completing their loyalty program signup. To add important links, such as to your privacy policy page, write the term in square brackets, followed by the respective URL in regular brackets.
Example: “I agree to the program’s (http://example.net/terms)[terms] and (http://example.net/privacy-policy)[privacy policy].”
Disclaimer checkbox — Choose whether to include a checkbox in the disclaimer. Select True to require customers to check the box before completing signup, or False to remove the checkbox.
Button text — Add your CTA here.
Example: “Complete program signup”
Success message — What customers will see upon successful program signup.
Example: “Welcome to our Rewards Club!”
Important
It's crucial to align the disclaimer behavior across all active widgets and extensions to prevent data discrepancies. Ensure that your opt-in messaging is consistent across the Rewards Page, core widgets, and account extension. For example, if you include a disclaimer checkbox in your Rewards Page settings, it must also be added in the extension settings.
For customers in State 3, the log-in process will look like this:
Additional Customization
Orders Page Navigation Menu
To make it easier for customers to access your rewards, you can also add your Rewards Page to the Orders page navigation menu:
Go to your Shopify admin.
In the left sidebar, click Content > Menus.
Click Customer account main menu and add a new menu item linking to your Rewards Page.
This ensures customers can easily navigate to their loyalty details directly from the Orders page.
Online Store Customer Login Redirects
You can redirect customers to any relevant page after login:
Redirect to customer accounts: Send customers to the login screen, then to their order history after login. It’s also possible to take them directly to their account page.
Redirect back to the storefront: Return customers to the page they were on before logging in.
Redirect to a specific page: Send customers to a specific page, such as the Contact us or Rewards pages, after login.
Learn more about how to manage login redirects in Shopify’s guide.
Next Steps
Once you've completed the account extension setup, preview the experience using customer profiles in different opt-in states to ensure consistency in your messaging.