Introduction
Want to give your customers the full Loyoly experience directly inside your Tapcart mobile app? This guide covers everything: what Tapcart is, what it's for, and how to integrate your Loyoly loyalty program into your mobile app in just a few minutes.
What is Tapcart?
Tapcart is a Shopify app that lets merchants turn their online store into a native mobile app (iOS and Android), with no coding required. It's one of the most popular tools among DTC brands looking to offer a premium mobile experience to their loyal customers.
In practice, Tapcart lets you:
Build a mobile app connected in real time to your Shopify catalog (products, prices, stock, orders).
Send targeted push notifications to boost sales and re-engagement.
Fully customize the design of your app (homepage, product screens, cart, navigation).
Integrate third-party tools (loyalty programs, reviews, subscriptions, etc.) via custom blocks.
Why integrate Loyoly with Tapcart?
Your most loyal customers are often the ones using your mobile app. Integrating Loyoly with Tapcart lets them:
Check their points balance and VIP tier directly in the app.
Complete missions and unlock rewards without leaving the app.
Apply their Loyoly discount codes directly to their mobile cart.
💡 The integration relies on two steps: (1) connect Tapcart to Loyoly via the App ID and API Key to sync your loyalty settings, then (2) add the Loyoly custom block to a custom screen. No development required.
Prerequisites before installation
Have Tapcart installed and active on your Shopify store (Tapcart is a paid service).
Have Loyoly installed on your Shopify store with your loyalty program configured.
Have your Loyoly embedded program URL. If you don't know it, your Loyoly CSM can provide it.
Step 1 — Connect Tapcart to Loyoly (App ID + API Key)
This step lets you push your loyalty settings from Loyoly to Tapcart.
In your Shopify admin, open Sales channels → Tapcart (Mobile App).
Go to Settings → App settings.
Copy your App ID, then head to your Tapcart back office to retrieve your API Key.
Enter both credentials on the Loyoly side (in the Tapcart integration settings). This syncs your loyalty settings to the Tapcart app.
Step 2 — Add the Loyoly custom block
Open Tapcart again, then go to Home → Custom screens and click + New screen to create a custom screen (for example "Loyalty program" or "My points").
Open the My Blocks tab: you'll find blocks ready to be dropped onto a page, which display the loyalty experience in the app. Just click a block and drag it onto the page as shown in the demo below.
⚠️ Syncing between Loyoly and Tapcart isn't working? You can add the block manually by following the steps below.
Open Tapcart, then go to Home → Custom screens and click + New screen to create a custom screen (for example "Loyalty program" or "My points").
Open the My Blocks tab and click Create custom block.
In the custom block, select the Dev tab on the right: this is where you'll paste the code.
Copy the code below, paste it into the Dev tab editor, then replace the default URL with your store's embedded URL.
Save the block, add it to your custom screen, then publish the new version of your Tapcart app.
Code to copy and paste:
import * as React from "react"
const { useEffect, useState } = React;
export default function Loyoly({ useVariables, useActions }) {
const variables = useVariables();
const customerId = variables?.customer?.id;
const url = customerId
? `https://play.loyoly.io/play/YOUR-STORE/program/shopify/embedded?customer_id=${customerId}`
: `https://play.loyoly.io/play/YOUR-STORE/program/shopify/embedded`;
return (
<div>
<iframe src={url} height={800} width={"100%"} />
</div>
)
}
⚠️ Customize before saving: replace YOUR-STORE in the URL with your own store's embedded URL. If you don't know where to find it, your Loyoly CSM can share it with you.
If you run into any issue during installation, or if the Loyoly program doesn't display correctly in your Tapcart app, contact our support team via chat.