Introduction
With Loyoly extensions, your customers have a personalized space directly in their account. Once logged in, they can view their rewards, track their points balance, and access their referral link. Everything is designed to offer them a simple, clear, and tailored experience.
If you are using "Legacy" customer accounts (email + password), follow this guide .
Available extensions
Three extensions are available to enhance the account space:
Loyoly - Account Loyalty: track points and loyalty level.
Loyoly - Account Rewards: access available rewards.
Loyoly - Account Referral: share your personal referral link.
How to install the extensions?
Before installing Loyoly extensions in new Shopify customer accounts, it is recommended to create a dedicated page under the customer account tab. This allows your users to have a clear overview of their program as soon as they log in: their points, rewards, and referral link.
Step 1: Create a template in Shopify
Go to Online Store → Customize.
Home page → Pages
Create a new template.
Give it a name
Step 2: Integrate your customer account extension
After creating your page template, I recommend returning to the home page.
In Customize, select Home page → Checkout & Customer Account, then Profile.
In the Sections tab,
Click Add app block.
The blocks are automatically positioned.
Step 3: Reference the page
Go to Pages.
Click on the name of the corresponding page.
At the bottom right, associate the template you just created by selecting the page name in Shopify.
Step 4: Add the page to the main menu
To make the page accessible on your site:
Go to Content → Menus → Main menu.
Click Add menu item, then select your page via Profile.
Save your changes.
Customize your extensions
You have the option to customize each extension. Once the extension is integrated, you can click on it to adapt it to the tone and identity of your brand.
The “Redeem” or “See more” links aren’t readable
In the Loyoly - Account Rewards extension, the links (“Redeem” under each reward, “See more” next to the section title) use your Shopify store’s accent color. This color isn’t set in Loyoly. It’s set in Shopify’s checkout and accounts editor. If it’s close to the card background color, the links become unreadable.
To change it:
In your Shopify admin, go to Settings → Checkout.
In the Configurations section, click Edit next to your configuration.
In the editor, click the gear icon to open the Settings sidebar.
In the Accent and buttons section, click the color box next to Accent (not Button). Choose a color that contrasts with the card background, or enter its hex code.
Click Save.
⚠️ Make sure you change the Accent color. The Button color right next to it only changes buttons and has no effect on the “Redeem” and “See more” links.
⚠️ The accent color also applies to links on your checkout and sign-in pages. Check how these pages look after the change.
💡 The change only applies to the configuration you’re editing. If you have several configurations (for example, one per market), repeat the steps for each one.
Remove your extension
If you want to remove your extension, it can be done directly at the bottom of the customization page.
📝 Note: If the extensions do not appear immediately on Shopify, save your changes, then log in to your account on your site.