Referral Widget - Theme Integration
Add a referral sharing widget to your Shopify theme. Customers can generate referral links and send them to friends directly from your storefront.
Note: This is a developer guide. For setting up the referral program itself, see Referral Program Setup.
Overview
The referral widget provides two components:
Sharing Form - Customers enter their email to get a referral link, then share via copy link or email
Friend Popup - When a friend visits via referral link, a popup displays their discount code
Quick Setup
Step 1: Create the Snippet File
In your Shopify theme, create a new file:
snippets/subscribfy-loyalty-referral.liquid
Copy the full code from the Complete Code section below.
Step 2: Add to Theme Layout
Include the snippet in your theme layout file (usually layout/theme.liquid):
{% render 'subscribfy-loyalty-referral' %}
Place this before the closing </body> tag.
Step 3: Add Anchor Element
Add this anchor element wherever you want the referral form to appear:
<div class="anchor__sub-loyalty-ref-sharing-wrapper"></div>
Common locations: dedicated referral page, account page, or footer.
API Endpoints
The widget uses these Subscribfy API endpoints:
Endpoint | Method | Description |
| POST | Generate referral link for customer |
| POST | Send referral email to friend |
| GET | View referral history |
Generate Referral Link
Request:
POST /apps/subscribfy-api/loyalty/referral/generate
Content-Type: application/json
{ "email": "customer@example.com" }
Response:
{ "success": true, "customer_id": "gid://shopify/Customer/123", "url": "https://store.com?ref=ABC123" }
Send Referral Email
Request:
POST /apps/subscribfy-api/loyalty/referral/{customer_gid}/send
Content-Type: application/json
{ "email": "friend@example.com" }
Response:
{ "success": true }
Widget Components
Sharing Form
The sharing form has two states:
State | CSS Class | Description |
Unsigned |
| Customer enters email to generate link |
Logged In |
| Shows referral link with copy/email options |
Friend Popup
When a friend visits with ?sub_ref=CODE in the URL, a popup displays their discount code.
Element | CSS Class | Description |
Wrapper |
| Full-screen overlay |
Content |
| Popup card |
Coupon |
| Discount code display |
Customization
Text Content
Modify these elements in the HTML to change displayed text:
Element | CSS Class | Default Text |
Main title |
| "Give $10, Get $10" |
Subtitle |
| Instructions for sharing |
Button text |
| "Start Referring" |
Popup title |
| "Your friend sent you $10" |
Styling
Key CSS variables and classes to customize:
Property | Class | Default |
Form width |
| 540px (desktop) |
Button color |
| #000000 |
Secondary button |
| #f68256 |
Border radius |
| 8px |
Error color |
| #ee1d52 |
Popup Image
Replace the popup background image by changing:
<img src="#{{ 'your-image.webp' | file_url }}">
Upload your image to Shopify Files and update the filename.
Liquid Variables
The snippet uses these Shopify Liquid variables:
Variable | Description |
| Logged-in customer's email (auto-fills form) |
| Customer ID for API calls |
| Security hash for dashboard access |
How It Works
Sharing Flow
Customer enters email (or auto-filled if logged in)
Widget calls
/referral/generateAPIAPI returns unique referral URL
Customer can copy link or send via email
If sending email, calls
/referral/{id}/sendAPI
Redemption Flow
Friend clicks referral link with
?sub_ref=CODEJavaScript detects URL parameter
Popup displays with discount code
Friend copies code for checkout
Troubleshooting
Widget not showing?
Check that the anchor element exists in your theme. Verify the snippet is rendered in theme.liquid.
"Please create an account" error?
The email address is not associated with a Shopify customer. Customer must have an account first.
Popup not appearing for friends?
Check that the URL contains ?sub_ref=CODE. Verify the snippet is loaded on the landing page.
Referral link not working?
Ensure the Referral rule is active in Subscribfy. Check that Loyalty is enabled for the store.
Complete Code
Copy this entire code block into snippets/subscribfy-loyalty-referral.liquid:
Click to expand full code
Click to expand full code
{%- comment -%} === Step 1: Customer submits their email to generate a referral link === {%- endcomment -%}
<script>
(function () {
document.addEventListener("DOMContentLoaded", function () {
const urlParams = new URLSearchParams(window.location.search);
const sharingWrapper = document.querySelector(".sub-loyalty-ref-sharing-wrapper");
const targetSection = document.querySelector(".anchor__sub-loyalty-ref-sharing-wrapper");
const submitBtn = document.querySelector(".slrs-btn");
const emailInput = document.querySelector(".customer-email");
const errorDisplay = document.querySelector(".slrs-content-unsigned .slrs-form-error");
const copyBtn = document.querySelector(".slrs-content-loggedin .slrs-btn");
const loggedInEmail = sharingWrapper?.dataset.loggedinEmail;
if (sharingWrapper && targetSection) {
sharingWrapper.style.display = "block";
targetSection.parentNode.insertBefore(sharingWrapper, targetSection);
}
function isValidEmail(email) {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}
function toggleContentVisibility(isLoggedIn) {
const unsigned = document.querySelector(".slrs-content-unsigned");
const loggedin = document.querySelector(".slrs-content-loggedin");
if (unsigned) unsigned.style.display = isLoggedIn ? "none" : "block";
if (loggedin) loggedin.style.display = isLoggedIn ? "block" : "none";
}
function handleSubmit() {
const email = emailInput?.value.trim();
if (!isValidEmail(email)) {
if (errorDisplay) {
errorDisplay.textContent = "Le format de l’e-mail n’est pas respecté";
errorDisplay.style.display = "block";
}
return;
}
if (errorDisplay) errorDisplay.style.display = "none";
if (submitBtn) submitBtn.classList.add("slrs-loading");
fetch("/apps/subscribfy-api/loyalty/referral/generate", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ email: email }),
})
.then((response) => response.json().then(data => ({ ok: response.ok, body: data })))
.then(({ ok, body }) => {
if (!ok || !body.success) throw new Error();
const input = document.querySelector(".slrs-content-loggedin .slrs-form-input");
const customerIdInput = document.querySelector(".slrs-customer-id");
if (input) input.setAttribute("value", body.url);
if (customerIdInput) customerIdInput.setAttribute("value", body.customer_id);
toggleContentVisibility(true);
})
.catch(() => {
if (errorDisplay) {
errorDisplay.textContent = "Veuillez créer un compte pour pouvoir parrainer";
errorDisplay.style.display = "block";
}
})
.finally(() => {
if (submitBtn) submitBtn.classList.remove("slrs-loading");
});
}
if (submitBtn) submitBtn.addEventListener("click", handleSubmit);
if (loggedInEmail && emailInput) {
emailInput.value = loggedInEmail;
setTimeout(() => {
if (submitBtn) submitBtn.click();
}, 50);
}
if (copyBtn) {
copyBtn.addEventListener("click", () => {
const input = document.querySelector(".slrs-content-loggedin .slrs-form-input");
if (!input || !input.value) return;
navigator.clipboard.writeText(input.value)
.then(() => {
const span = copyBtn.querySelector("span");
const originalText = span.textContent;
span.textContent = "Copié !";
setTimeout(() => {
span.textContent = originalText;
}, 2000);
})
.catch(console.error);
});
}
const tabs = document.querySelectorAll(".slrs-tab");
const tabContents = document.querySelectorAll(".slrs-row[id]");
tabs.forEach(function (tab) {
tab.addEventListener("click", function () {
tabs.forEach(t => t.classList.remove("active"));
tabContents.forEach(c => c.style.display = "none");
tab.classList.add("active");
const targetId = tab.getAttribute("data-tab");
const content = document.getElementById(targetId);
if (content) content.style.display = "block";
});
});
const emailSubmitBtn = document.querySelector(".slrs-referral-form--submit");
const emailSection = document.querySelector(".slrs-content-loggedin");
const confirmationSection = document.querySelector(".slrs-content-friend-email-submitted");
const friendEmailInput = document.querySelector(".slrs-form-input.friend-email");
const friendErrorDisplay = document.querySelector(".slrs-content-loggedin .slrs-form-error");
if (emailSubmitBtn && friendEmailInput && friendErrorDisplay && emailSection && confirmationSection) {
emailSubmitBtn.addEventListener("click", function () {
const customerIdInput = document.querySelector(".slrs-customer-id");
const customerId = customerIdInput?.value;
const friendEmail = friendEmailInput.value.trim();
if (!isValidEmail(friendEmail)) {
friendErrorDisplay.textContent = "Le format de l’e-mail n’est pas respecté";
friendErrorDisplay.style.display = "block";
return;
}
friendErrorDisplay.style.display = "none";
emailSubmitBtn.classList.add("slrs-loading");
fetch("/apps/subscribfy-api/loyalty/referral/" + customerId + "/send", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ email: friendEmail }),
})
.then((response) => response.json().then(data => ({ ok: response.ok, body: data })))
.then(({ ok, body }) => {
if (!ok || !body.success) throw new Error();
friendEmailInput.value = "";
emailSection.style.display = "none";
confirmationSection.style.display = "block";
})
.catch(() => {
friendErrorDisplay.textContent = "Une erreur est survenue. Veuillez réessayer.";
friendErrorDisplay.style.display = "block";
})
.finally(() => {
emailSubmitBtn.classList.remove("slrs-loading");
});
});
}
const restartBtn = document.querySelector(".slrs-referral-form--restart");
if (restartBtn) {
restartBtn.addEventListener("click", function () {
if (confirmationSection) confirmationSection.style.display = "none";
if (emailSection) emailSection.style.display = "block";
if (friendEmailInput) friendEmailInput.value = "";
tabs.forEach(t => t.classList.remove("active"));
const emailTab = document.querySelector('.slrs-tab[data-tab="email-tab"]');
const emailTabContent = document.getElementById("email-tab");
const linkTabContent = document.getElementById("link-tab");
if (emailTab) emailTab.classList.add("active");
if (emailTabContent) emailTabContent.style.display = "block";
if (linkTabContent) linkTabContent.style.display = "none";
});
}
});
})();
</script>
<style>
.slrs-tabs-header{
cursor: pointer;
display: flex;
justify-content: space-around;
}
.slrs-tabs-header .slrs-tab {
font-size: 16px;
align-items: center;
border-bottom: 1px solid #c4c4c4;
color: var(--7f0f9fb7);
display: flex;
gap: 10px;
height: 50px;
justify-content: center;
width: 100%;
margin-bottom: 20px;
}
.slrs-tabs-header .slrs-tab.active{
border-bottom: 2px solid #000;
}
@media (min-width: 768px) {
.sub-loyalty-ref-sharing-wrapper {
gap: 40px;
padding: 30px;
width: 540px;
}
}
.sub-loyalty-ref-sharing-wrapper {
display: flex;
flex-direction: column;
margin: auto;
border: 1px solid #c4c4c4;
border-radius: 8px;
background: #fff;
line-height: 1.3;
}
.slrs-title{
text-align: center;
font-weight: 700;
font-size: 32px;
margin-bottom: 40px;
}
.slrs-subtitle{
font-size: 16px;
margin-bottom: 40px;
text-align: center;
}
.slrs-form-input{
border: 1px solid #b2b2b2;
box-sizing: border-box;
padding: 10px;
width: 100%;
height: 50px;
padding: 10px 20px;
font-size: 17px;
}
.slrs-form-input:focus {
border-color: #222;
}
.slrs-form-input:focus-visible {
outline: unset;
outline-offset: unset;
box-shadow: unset;
}
.slrs-btn{
background-color: #000;
border-color: #000;
color: #fff;
font-size: 16px;
font-weight: 700;
min-height: 50px;
width: 100%;
border-radius: 8px;
margin-top: 20px;
cursor: pointer;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10px;
}
.slrs-content-loggedin .slrs-btn{
background: #f68256;
border-color: #f68256;
}
.slrs-form-error{
color: #ee1d52;
font-size: 12px;
}
.slrs-link{
color: #000;
text-decoration: underline;
}
.slrs-btn.slrs-loading::after {
content: "";
width: 14px;
height: 14px;
border: 2px solid #fff;
border-top: 2px solid transparent;
border-radius: 50%;
display: inline-block;
animation: spin 0.6s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@media (max-width: 767px) {
.sub-loyalty-ref-sharing-wrapper {
gap: 30px;
padding: 20px;
width: 412px;
max-width: 85%;
}
.slrs-title{
font-size: 24px;
margin-bottom: 20px;
}
.slrs-subtitle {
font-size: 15px;
margin-bottom: 20px;
}
.slrs-form-input,
.slrs-btn{
min-height: 45px;
}
}
</style>
<div class="sub-loyalty-ref-sharing-wrapper" data-loggedin-email="{{ customer.email }}" style="display:none;">
<input class="slrs-customer-id" name="slrs-customer-id" type="hidden" value="{{customer.id}}">
<div class="slrs-container">
<div class="slrs-inner">
<div class="slrs-main-content">
<div class="slrs-content-unsigned">
<div class="slrs-title">
Offrez 10,00 € de réduction à un(e) ami(e) et obtenez 10,00 € de réduction pour vous !
</div>
<div class="slrs-subtitle">Renseignez votre adresse e-mail pour accéder à votre lien de parrainage</div>
<div class="slrs-actions">
<div class="slrs-row">
<input class="slrs-form-input customer-email" type="text" placeholder="Email" value="{{ customer.email }}">
<div class="slrs-form-error "></div>
<button class="slrs-btn" type="submit">
<span>Parrainer dès maintenant</span>
</button>
</div>
</div>
</div>
<div class="slrs-content-loggedin" style="display:none;">
<div class="slrs-title">Offrez 10€, Recevez 10€</div>
<div class="slrs-subtitle">
Partagez votre lien de parrainage ou renseignez l’email de votre amie. <br>
Elle reçoit 10€ pour sa première commande. <br>
Dès qu'elle utilise ses 10€, à votre tour de profiter de la même réduction.
</div>
<div class="slrs-actions">
<div class="slrs-tabs-header">
<div class="slrs-tab " data-tab="link-tab">🔗 Lien</div>
<div class="slrs-tab active" data-tab="email-tab">✉️ E-mail</div>
</div>
<div class="slrs-tabs-content">
<div class="slrs-row" id="link-tab" style="display: none;">
<input class="slrs-form-input" type="text" disabled>
<button class="slrs-btn slr-btn-style2" type="submit">
<span>Copier le lien </span>
<div class="slrs-icon-copy">
<svg width="1em" height="1em" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.6897 7.11117L13.7062 1.35816C13.5094 1.13098 13.2364 1 12.9572 1H7.8823C6.42322 1 5.2354 2.37123 5.2354 4.05558V5.27741H3.6469C2.18783 5.27741 1 6.64864 1 8.33299V19.9444C1 21.6288 2.18783 23 3.6469 23H12.1177C13.5768 23 14.7646 21.6288 14.7646 19.9444V18.7226H16.3531C17.8122 18.7226 19 17.3514 19 15.667V7.97586C19 7.65352 18.8865 7.33834 18.6897 7.11117ZM13.7062 3.08652L17.1926 7.11117H15.2938C14.418 7.11117 13.7053 6.28843 13.7053 5.27741V3.08652H13.7062ZM13.7062 19.9454C13.7062 20.9565 12.9935 21.7792 12.1177 21.7792H3.6469C2.7711 21.7792 2.05841 20.9565 2.05841 19.9454V8.33402C2.05841 7.32299 2.7711 6.50026 3.6469 6.50026H8.4115V9.55584C8.4115 11.2402 9.59933 12.6114 11.0584 12.6114H13.7053V19.9454H13.7062ZM9.4708 9.55584V7.36495L12.9572 11.3896H11.0584C10.1826 11.3896 9.4708 10.5669 9.4708 9.55584ZM17.9407 15.667C17.9407 16.678 17.228 17.5008 16.3522 17.5008H14.7637V12.2533C14.7637 11.932 14.6503 11.6168 14.4535 11.3886L9.4708 5.63556C9.27401 5.40839 9.00098 5.27741 8.72176 5.27741H6.2938V4.05558C6.2938 3.04456 7.0065 2.22182 7.8823 2.22182H12.6469V5.27741C12.6469 6.96177 13.8347 8.33299 15.2938 8.33299H17.9407V15.667V15.667Z" fill="currentColor" stroke="currentColor" stroke-width="1"></path>
</svg>
</div>
</button>
</div>
<div class="slrs-row" id="email-tab">
<input class="slrs-form-input friend-email" type="email" placeholder="E-mail de votre ami">
<div class="slrs-form-error "></div>
<button class="slrs-btn slr-btn-style2 slrs-referral-form--submit" type="submit">
<span>Envoyer le code de parrainage</span>
</button>
</div>
</div>
{% if customer.email %}
<div style="text-align: center;">
<br>
<a
class="slrs-link"
rel="noopener noreferrer"
href="/apps/subscribfy-api/loyalty/store/dashboard?cid={{customer.id}}&hash={{customer.metafields.exison.exison_hash}}"
>
Voir mes parrainages
</a>
<br>
</div>
{% endif %}
</div>
</div>
</div>
<div class="slrs-content-friend-email-submitted" style="display:none;">
<div class="slrs-title">Félicitation !</div>
<div class="slrs-subtitle">
Nous venons d’envoyer un e-mail à votre amie pour l’informer. Elle a 14 jours pour utiliser son code promo et
débloquer le vôtre !
</div>
<div class="slrs-actions" style="text-align: center;">
<button class="slrs-btn slr-btn-style2 slrs-referral-form--restart" type="button">
<span>Parrainer à nouveau</span>
</button>
</div>
</div>
</div>
</div>
</div>
{%- comment -%} === Step 2: Referred friend visits via referral link and sees the offer popup === {%- endcomment -%}
<script>
(function () {
document.addEventListener("DOMContentLoaded", function () {
const urlParams = new URLSearchParams(window.location.search);
const subRef = urlParams.get("sub_ref");
const redeeming_wrapper = document.querySelector(".sub-loyalty-ref-redeeming-wrapper");
const couponWrapper = document.querySelector(".slr-coupon-wrapper");
const couponCode = document.querySelector(".slr-coupon-code");
if (subRef && redeeming_wrapper) {
redeeming_wrapper.style.display = "block";
setTimeout(() => {
redeeming_wrapper.classList.add("slr-is-open");
}, 10);
if (couponCode) {
couponCode.textContent = subRef;
}
}
if (couponWrapper && couponCode) {
couponWrapper.addEventListener("click", function () {
if (couponCode.textContent === "Copied!") {
return; // Don't copy if the text is already "Copied!"
}
const originalText = couponCode.textContent;
navigator.clipboard.writeText(originalText).then(() => {
couponCode.textContent = "Copied!";
setTimeout(() => {
couponCode.textContent = originalText;
}, 2000);
}).catch(err => console.error("Copy failed:", err));
});
}
function closeWrapper() {
if (redeeming_wrapper) {
redeeming_wrapper.classList.remove("slr-is-open");
setTimeout(() => {
redeeming_wrapper.style.display = "none";
}, 300);
}
}
document.body.addEventListener("click", function (e) {
if (e.target.classList.contains("slr-inner") || e.target.closest(".slr-close-small")) {
console.log(e.target.classList.contains("slr-inner") ? "slr-inner" : "clicked slr-close-small");
e.stopPropagation();
closeWrapper();
}
});
});
})();
</script>
<style>
.sub-loyalty-ref-redeeming-wrapper {
-webkit-backface-visibility: hidden;
height: 100%;
left: 0;
outline: none;
position: fixed;
-webkit-tap-highlight-color: transparent;
top: 0;
-ms-touch-action: manipulation;
touch-action: manipulation;
transform: translateZ(0);
width: 100%;
z-index: 999999999;
transition-duration: 0.3s;
opacity: 0;
}
.sub-loyalty-ref-redeeming-wrapper.slr-is-open {
opacity: 1;
}
.slr-overlay {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
background: #2d2a3c80;
opacity: 0;
transition-duration: inherit;
transition-property: opacity;
opacity: .9;
transition-timing-function: cubic-bezier(.22,.61,.36,1);
}
.slr-inner {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
text-align: center;
padding: 6px;
overflow: auto;
}
.slr-main-content{
border-radius: 8px;
background: #F9F9F9;
margin: 0;
max-width: 95vw;
overflow: auto;
-webkit-overflow-scrolling: touch;
display: inline-block;
position: absolute;
left: 50%;
transform: translate(-50%, 10vh);
transition-duration: 0s !important;
display: flex;
flex-direction: row-reverse;
justify-content: space-evenly;
overflow: hidden;
}
.slr-close-small {
width: 25px;
height: 25px;
background: #ffffff80;
border-radius: 20px;
cursor: pointer;
display: flex;
padding: 2px;
position: absolute;
right: 20px;
top: 20px;
z-index: 1;
}
.slr-content,
.slr-image{
height: 100%;
width: 50%;
}
.slr-background-image-container,
.slr-background-image-container img{
max-width: 100%;
max-height: 100%;
}
.slr-content{
padding: 30px;
display: flex;
flex-direction: column;
}
.slr-title {
margin-bottom: 40px;
font-weight: 700;
font-size: 20px;
}
.slr-subtitle {
font-size: 17px;
margin-bottom: 40px;
white-space: pre-wrap;
line-height: 1.3;
}
.slr-coupon-wrapper {
background: #fff;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
font-size: 17px;
min-height: 50px;
margin-bottom: 10px;
cursor: pointer;
text-transform: uppercase;
}
.slr-icon-copy {
position: relative;
top: 2px;
}
.slr-text-secondary {
margin-bottom: 10px;
}
.slr-warning{
margin-top: auto;
color: #b2b2b2;
}
@media (min-width: 768px) {
.slr-main-content {
width: 729px;
height: 364px;
}
.slr-content {
padding: 20px;
}
.slr-title {
font-size: 16px;
margin-bottom: 20px;
}
.slr-subtitle {
font-size: 13px;
margin-bottom: 20px;
}
.slr-coupon-wrapper {
font-size: 13px;
min-height: 40px;
}
.slr-text-secondary,
.slr-warning{
font-size: 12px;
}
}
@media (min-width: 1024px) {
.slr-main-content {
width: 985px;
height: 492px;
}
.slr-content {
padding: 30px;
}
.slr-title {
font-size: 17px;
margin-bottom: 40px;
}
.slr-subtitle {
font-size: 17px;
margin-bottom: 20px;
}
.slr-coupon-wrapper {
font-size: 17px;
min-height: 50px;
}
.slr-text-secondary,
.slr-warning{
font-size: 14px;
}
}
@media (min-width: 1440px) {
.slr-main-content {
width: 1040px;
height: 520px;
}
.slr-title {
font-size: 20px;
}
.slr-subtitle {
margin-bottom: 40px;
}
}
@media (max-width: 767px) {
.slr-main-content {
width: 100vw;
height: 99%;
transform: translate(-50%, 0vh);
flex-direction: column;
}
.slr-content, .slr-image {
width: 100%;
}
.slr-content {
padding: 15px;
}
.slr-title {
font-size: 16px;
margin-bottom: 20px;
}
.slr-subtitle {
font-size: 13px;
margin-bottom: 20px;
}
.slr-coupon-wrapper {
font-size: 13px;
min-height: 40px;
}
.slr-text-secondary,
.slr-warning{
font-size: 12px;
}
}
</style>
<div class="sub-loyalty-ref-redeeming-wrapper" style="display:none;">
<div class="slr-container">
<div class="slr-overlay"> </div>
<div class="slr-inner">
<div class="slr-main-content">
<div class="slr-close-small" title="Close">
<svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24">
<path d="M13 12l5-5-1-1-5 5-5-5-1 1 5 5-5 5 1 1 5-5 5 5 1-1z"></path>
</svg>
</div>
<div class="slr-image">
<div class="slr-background-image-container">
<img alt="Background image" src="{{ 'odass-slr-main-img.webp' | file_url }}">
</div>
</div>
<div class="slr-content">
<div class="slr-title">Votre amie vous a envoyé 10€</div>
<div class="slr-subtitle">
Voici votre Voucher €10.00. Utilisez ce code de réduction lors de votre prochaine commande.<br>
Valable 14j uniquement
</div>
<div class="slr-actions">
<div class="slr-coupon-wrapper">
<div class="slr-coupon-code">---</div>
<div class="slr-icon-copy">
<svg width="1em" height="1em" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.6897 7.11117L13.7062 1.35816C13.5094 1.13098 13.2364 1 12.9572 1H7.8823C6.42322 1 5.2354 2.37123 5.2354 4.05558V5.27741H3.6469C2.18783 5.27741 1 6.64864 1 8.33299V19.9444C1 21.6288 2.18783 23 3.6469 23H12.1177C13.5768 23 14.7646 21.6288 14.7646 19.9444V18.7226H16.3531C17.8122 18.7226 19 17.3514 19 15.667V7.97586C19 7.65352 18.8865 7.33834 18.6897 7.11117ZM13.7062 3.08652L17.1926 7.11117H15.2938C14.418 7.11117 13.7053 6.28843 13.7053 5.27741V3.08652H13.7062ZM13.7062 19.9454C13.7062 20.9565 12.9935 21.7792 12.1177 21.7792H3.6469C2.7711 21.7792 2.05841 20.9565 2.05841 19.9454V8.33402C2.05841 7.32299 2.7711 6.50026 3.6469 6.50026H8.4115V9.55584C8.4115 11.2402 9.59933 12.6114 11.0584 12.6114H13.7053V19.9454H13.7062ZM9.4708 9.55584V7.36495L12.9572 11.3896H11.0584C10.1826 11.3896 9.4708 10.5669 9.4708 9.55584ZM17.9407 15.667C17.9407 16.678 17.228 17.5008 16.3522 17.5008H14.7637V12.2533C14.7637 11.932 14.6503 11.6168 14.4535 11.3886L9.4708 5.63556C9.27401 5.40839 9.00098 5.27741 8.72176 5.27741H6.2938V4.05558C6.2938 3.04456 7.0065 2.22182 7.8823 2.22182H12.6469V5.27741C12.6469 6.96177 13.8347 8.33299 15.2938 8.33299H17.9407V15.667V15.667Z" fill="currentColor" stroke="currentColor" stroke-width="1"></path>
</svg>
</div>
</div>
<div class="slr-text-secondary">Votre code a bien été appliqué à votre panier.</div>
<div class="slr-text-secondary">Valable à partir de €40.00</div>
</div>
<div class="slr-warning">This offer is only valid for new customers</div>
</div>
</div>
</div>
</div>
</div>
Related: Referral Program Setup | Loyalty Program Overview
