How to install Loyoly on your Tapcart mobile app
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 used 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 application (iOS and Android), with no coding required. It's one of the most popular tools used by DTC brands looking to deliver a premium mobile experience to their loyal customers.
In practice, Tapcart allows you to:
Build a mobile app connected in real time to your Shopify catalog (products, prices, stock, orders).
Send targeted push notifications to drive sales and re-engagement.
Fully customize the design of your app (homepage, product pages, cart, navigation).
Integrate third-party tools (loyalty programs, reviews, subscriptions, etc.) through 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 straight to their mobile cart.
💡 The integration is done through a Tapcart custom block added to a custom screen. No development needed: just copy and paste the code provided below.
Prerequisites before installation
Have Tapcart installed and active on your Shopify store (Tapcart is a paid service).
Have Loyoly installed on your Shopify store and your loyalty program configured.
Have access to your Loyoly embedded program URL. If you don't know it, your Loyoly CSM can provide it.
Installation steps
Open your Shopify admin and, in the left sidebar, click on Sales channels, then select Tapcart from the list.
In Tapcart, go to Home → Custom screens, then click + New screen to create a new custom screen (e.g. "Loyalty program" or "My points").
Once the screen is created, 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.
Video walkthrough
Here's the full procedure in motion:
Code to paste into the custom block
Copy and paste the following code into the Dev tab editor of your custom block:
import * as React from "react"
const { useEffect, useState } = React;
export default function Loyoly({ useVariables, useActions }) {
const variables = useVariables();
const customerId = variables?.customer?.id;
const [status, setStatus] = useState("idle");
const url = customerId
? `https://staging-play.loyoly.io/play/toto/69/program/shopify/embedded?customer_id=${customerId}`
: `https://staging-play.loyoly.io/play/toto/69/program/shopify/embedded`;
const { applyDiscount } = useActions();
useEffect(() => {
setStatus("useEffect fired");
try {
const result = applyDiscount({ discountCode: "LBLGJFVETTXL" });
setStatus("applyDiscount called: " + JSON.stringify(result));
} catch (e) {
setStatus("error: " + e.message);
}
}, []);
return (
<div>
{/* Debug banner — remove once working */}
<div style={{ background: "yellow", padding: "8px", fontSize: "12px" }}>
customerId: {customerId || "undefined"} | status: {status}
</div>
<iframe src={url} height={800} width={"100%"} />
</div>
)
}
⚠️ Customize before saving: replace the URL https://staging-play.loyoly.io/play/toto/69/program/shopify/embedded with the embedded URL of your own store. 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, reach out to our support team via chat.