The Skio integration is available on Shopify, on the Classic plan and above. Free product (subscriber) rewards need the Plus plan, and Challenges need the Advanced plan. To compare plans, see our pricing page.
In this article:
Overview
Connect Skio to LoyaltyLion and your subscribers can spend their points on the subscriptions they already have, straight from your loyalty page.
How the Skio integration can help you
Skio is a subscription platform for Shopify stores. Using it with LoyaltyLion lets you:
Let customers apply a discount to a subscription they already have, without copying a code
Let customers spend points on a free product added to their next subscription order
Reward customers for staying subscribed, with a subscription Challenge that counts their Skio orders
How to connect Skio
In LoyaltyLion, go to Integrations, then Skio. Keep this page open, because it shows the webhook URL you need next.
In your Skio dashboard, open API & Integrations and add a webhook pointing at the webhook URL from LoyaltyLion.
Copy the webhook token Skio shows for that webhook, and paste it into LoyaltyLion.
In Skio, still in API & Integrations, generate an API key and paste it into LoyaltyLion.
Click Install integration.
Both the webhook token and the API key are required. The API key is what lets your customers apply rewards to their subscriptions, so without it redeeming onto a subscription fails.
You can connect one subscription integration at a time. If Recharge is already connected, disconnect it before you connect Skio.
Rewards that work with Skio
Three kinds of reward work with Skio subscriptions:
Discount rewards. A Discount reward with a Purchase type of Subscription or Both, or an Active subscription discount. See subscription discount rewards for the settings.
Free product (subscriber). A product added to your customer’s next Skio subscription order, available from the Plus plan up. See subscription product rewards.
Subscription Challenges. Skio subscription orders count towards a subscription Challenge’s milestones, with an optional ongoing bonus after the last one.
On Skio, every discount with a Purchase type of Subscription or Both can be applied to an existing subscription. The Allow use on existing subscriptions option only appears for Recharge, so you will not see it with Skio.
Embedding LoyaltyLion components in the Skio Customer Portal
You can embed selected LoyaltyLion embeddable components directly into your Skio Customer Portal using Skio's custom embedded block feature.
Where to find the Custom block in Skio
Go to your Skio account > Storefront > Customer Portal configuration > Branding, where you'll find sections for Custom block and Custom CSS.
How to add a LoyaltyLion component
Below are two pre-made components you can add to your Skio Customer Portal, to show LoyaltyLion information.
Option A: Use this if you have a Refer a Friend rule
Option B: Use this if you do not have a Refer a Friend rule
A) If you have a Refer a Friend rule, use this option:
A) If you have a Refer a Friend rule, use this option:
Paste into Skio → Branding → Custom block.
<div class="ll-portal">
<div class="ll-portal__points-header">
<h2 class="ll-portal__points-balance">
You have <strong class="ll-portal__points-value"><span data-lion-points="approved"></span></strong> points
<span class="ll-portal__points-pending">(<span data-lion-points="pending"></span> pending)</span>
</h2>
</div>
<hr class="ll-portal__divider">
<div class="ll-portal__section">
<h3 class="ll-portal__section-title">Available Rewards</h3>
<p class="ll-portal__section-subtitle">You have rewards available to use on your next order:</p>
<hr class="ll-portal__divider">
<div
data-lion-claimed-rewards-list
data-hide-used="true"
data-hide-void="true"
data-hide-expired="true"></div>
</div>
<div class="ll-portal__section">
<h3 class="ll-portal__section-title">Rewards</h3>
<p class="ll-portal__section-subtitle">Redeem your points for more rewards!</p>
<hr class="ll-portal__divider">
<div data-lion-rewards-list></div>
</div>
<div class="ll-portal__section">
<h3 class="ll-portal__section-title">Refer a Friend</h3>
<p class="ll-portal__section-subtitle">Share the love! Refer a friend and you both get rewarded.</p>
<a href="#" data-lion-refer class="ll-portal__referral-btn">Refer your friends</a>
</div>
</div>
<script>
window.loyaltylion?.ui?.refresh?.();
</script>
<script>
function hideNonDiscountRewards() {
const container = document.querySelector('[data-lion-rewards-list] #loyaltylion .lion-rewards-list');
if (!container) return;
const rewardItems = container.querySelectorAll(':scope > .lion-reward-item');
rewardItems.forEach(function(item) {
if (!item.classList.contains('lion-reward-item--cart-discount-voucher')) {
item.style.display = 'none';
}
});
}
setTimeout(hideNonDiscountRewards, 2000);
const rewardsTarget = document.querySelector('[data-lion-rewards-list]');
if (rewardsTarget) {
const observer = new MutationObserver(hideNonDiscountRewards);
observer.observe(rewardsTarget, { childList: true, subtree: true });
}
</script>
<script>
function injectModalStyles() {
if (document.getElementById('ll-portal-modal-styles')) return;
var target = document.getElementById('loyaltylion');
if (!target) return;
var style = document.createElement('style');
style.id = 'll-portal-modal-styles';
style.textContent = `
.lion-modal {
border-radius: 8px !important;
}
.lion-modal__title {
font-size: var(--text-lg) !important;
font-weight: 600 !important;
color: var(--color-text-heading) !important;
background-color: var(--color-brand-100) !important;
}
.lion-history-info-modal-content__comment {
background-color: var(--color-brand-100) !important;
}
.lion-history-info-modal-content__points,
.lion-history-info-modal-content__date,
.lion-redeem-reward-modal__confirm-summary {
font-size: var(--text-sm) !important;
font-weight: 400 !important;
color: var(--color-text-general) !important;
}
.lion-reward-code__code {
font-size: var(--text-lg) !important;
font-weight: 600 !important;
color: var(--color-text-heading) !important;
background: none !important;
background-color: transparent !important;
border: none !important;
}
.lion-redeem-reward-modal__button--cancel {
background-color: var(--color-brand-200) !important;
color: var(--color-text-heading) !important;
border: none !important;
border-radius: 4px !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
}
.lion-redeem-reward-modal__button--cancel:hover {
background-color: var(--color-brand-300) !important;
color: var(--color-text-heading) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
.lion-redeem-reward-modal__button--confirm {
background-color: var(--color-brand-400) !important;
color: var(--color-text-heading) !important;
border: none !important;
border-radius: 4px !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
}
.lion-redeem-reward-modal__button--confirm:hover {
background-color: var(--color-brand-300) !important;
color: var(--color-text-heading) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
`;
target.appendChild(style);
}
injectModalStyles();
setTimeout(injectModalStyles, 2000);
setTimeout(injectModalStyles, 5000);
</script>
And here is the code you will need to copy into the Custom CSS section:
.ll-portal {
background-color: #FFFFFF;
border: 1px solid #EAEAEA;
border-radius: 8px;
padding: 20px;
margin: 5px;
margin-bottom: 30px;
font-family: inherit;
color: var(--color-text-general);
}
.ll-portal__points-header {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.ll-portal__points-balance {
font-size: var(--text-lg);
font-weight: 500;
color: var(--color-text-heading);
margin: 0;
}
.ll-portal__points-value {
color: var(--color-text-link);
font-weight: 700;
}
.ll-portal__points-pending {
font-size: var(--text-sm);
color: var(--color-text-general);
font-weight: 400;
margin-left: 5px;
}
.ll-portal__divider {
border: none;
height: 1px;
background-color: #EAEAEA;
margin: 15px 0;
}
.ll-portal__section {
margin-bottom: 25px;
}
.ll-portal__section:last-child {
margin-bottom: 0;
}
.ll-portal__section-title {
font-size: var(--text-lg);
font-weight: 600;
color: var(--color-text-heading);
margin: 0;
}
.ll-portal__section-subtitle {
font-size: var(--text-sm);
font-weight: 400;
color: var(--color-text-general);
margin: 4px 0 0 0;
}
.ll-portal .lion-claimed-rewards-list {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
.ll-portal .lion-claimed-reward-item {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
width: 100% !important;
background-color: var(--color-brand-100) !important;
border-radius: 4px !important;
padding: 14px 16px !important;
box-sizing: border-box !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
}
.ll-portal .lion-claimed-reward-item:hover {
background-color: var(--color-brand-300) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
.ll-portal .lion-claimed-reward-item__left {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex: 1 !important;
min-width: 0 !important;
}
.ll-portal .lion-claimed-reward-item__icon {
display: none !important;
}
.ll-portal .lion-claimed-reward-item__title {
font-size: var(--text-lg) !important;
font-weight: 600 !important;
color: var(--color-text-heading) !important;
}
.ll-portal .lion-claimed-reward-item__date {
font-size: var(--text-sm) !important;
color: var(--color-text-general) !important;
margin-left: auto !important;
white-space: nowrap !important;
}
.ll-portal .lion-claimed-reward-item__right {
display: flex !important;
align-items: center !important;
margin-left: 15px !important;
}
.ll-portal .lion-rewards-list {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
.ll-portal .lion-reward-item {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
width: 100% !important;
background-color: var(--color-brand-100) !important;
border: none !important;
border-radius: 4px !important;
padding: 14px 16px 14px 24px !important;
box-shadow: none !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.ll-portal .lion-reward-item__content {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
width: 100% !important;
background: none !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
gap: 0 !important;
border-radius: 0 !important;
line-height: 1 !important;
min-height: 0 !important;
}
.ll-portal .lion-reward-item__icon {
flex: 0 0 auto !important;
margin-right: 12px !important;
}
.ll-portal .lion-reward-item__title {
font-size: var(--text-lg) !important;
font-weight: 600 !important;
color: var(--color-text-heading) !important;
margin: 0 !important;
padding: 0 !important;
flex: 0 1 auto !important;
min-width: 0 !important;
line-height: 1 !important;
margin-right: auto !important;
text-align: left !important;
}
.ll-portal .lion-reward-item__meta {
font-size: var(--text-sm) !important;
color: var(--color-text-general) !important;
white-space: nowrap !important;
flex: 0 0 auto !important;
margin: 0 !important;
line-height: 1 !important;
}
.ll-portal .lion-reward-item__links {
display: none !important;
}
.ll-portal .lion-reward-item__product-image {
display: none !important;
}
.ll-portal .lion-reward-item__actions {
flex: 0 0 auto !important;
width: auto !important;
max-width: 200px !important;
margin: 0 0 0 12px !important;
}
.ll-portal .lion-reward-item__actions .lion-action-button {
width: auto !important;
flex: 0 0 auto !important;
}
.ll-portal .lion-action-button--tile {
transition: all 0.3s ease !important;
border-color: var(--color-text-general) !important;
color: var(--color-text-general) !important;
font-size: var(--text-sm) !important;
}
.ll-portal .lion-action-button--tile:hover {
background-color: var(--color-brand-300) !important;
color: var(--color-text-heading) !important;
border-color: var(--color-brand-300) !important;
}
.ll-portal .lion-action-button--tile.lion-action-button--disabled {
opacity: 0.4 !important;
cursor: not-allowed !important;
border-color: var(--color-text-general) !important;
color: var(--color-text-general) !important;
background-color: transparent !important;
}
.ll-portal .lion-action-button--tile.lion-action-button--disabled:hover {
transform: none !important;
background-color: transparent !important;
border-color: var(--color-text-general) !important;
color: var(--color-text-general) !important;
opacity: 0.4 !important;
}
.ll-portal__referral-btn {
display: inline-block;
background-color: var(--color-brand-100);
color: var(--color-text-heading);
font-size: var(--text-lg);
font-weight: 600;
padding: 12px 24px;
border-radius: 4px;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 4px;
}
.ll-portal__referral-btn:hover {
background-color: var(--color-brand-300);
color: var(--color-text-heading);
text-decoration: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.ll-portal .lion-reward-item:not(.lion-reward-item--cart-discount-voucher) {
display: none !important;
}
@media only screen and (max-width: 600px) {
.ll-portal .lion-reward-item__content {
flex-wrap: wrap !important;
}
.ll-portal .lion-reward-item__title {
flex: 1 1 100% !important;
}
}
B) If you do not have a Refer a Friend rule, use this option:
B) If you do not have a Refer a Friend rule, use this option:
Here is the code you will need to copy into your Custom block section:
Paste into Skio → Branding → Custom block
<div class="ll-portal">
<div class="ll-portal__points-header">
<h2 class="ll-portal__points-balance">
You have <strong class="ll-portal__points-value"><span data-lion-points="approved"></span></strong> points
<span class="ll-portal__points-pending">(<span data-lion-points="pending"></span> pending)</span>
</h2>
</div>
<hr class="ll-portal__divider">
<div class="ll-portal__section">
<h3 class="ll-portal__section-title">Available Rewards</h3>
<p class="ll-portal__section-subtitle">You have rewards available to use on your next order:</p>
<hr class="ll-portal__divider">
<div
data-lion-claimed-rewards-list
data-hide-used="true"
data-hide-void="true"
data-hide-expired="true"></div>
</div>
<div class="ll-portal__section">
<h3 class="ll-portal__section-title">Rewards</h3>
<p class="ll-portal__section-subtitle">Redeem your points for more rewards!</p>
<hr class="ll-portal__divider">
<div data-lion-rewards-list></div>
</div>
</div>
<script>
window.loyaltylion?.ui?.refresh?.();
</script>
<script>
function hideNonDiscountRewards() {
const container = document.querySelector('[data-lion-rewards-list] #loyaltylion .lion-rewards-list');
if (!container) return;
const rewardItems = container.querySelectorAll(':scope > .lion-reward-item');
rewardItems.forEach(function(item) {
if (!item.classList.contains('lion-reward-item--cart-discount-voucher')) {
item.style.display = 'none';
}
});
}
setTimeout(hideNonDiscountRewards, 2000);
const rewardsTarget = document.querySelector('[data-lion-rewards-list]');
if (rewardsTarget) {
const observer = new MutationObserver(hideNonDiscountRewards);
observer.observe(rewardsTarget, { childList: true, subtree: true });
}
</script>
<script>
function injectModalStyles() {
if (document.getElementById('ll-portal-modal-styles')) return;
var target = document.getElementById('loyaltylion');
if (!target) return;
var style = document.createElement('style');
style.id = 'll-portal-modal-styles';
style.textContent = `
.lion-modal {
border-radius: 8px !important;
}
.lion-modal__title {
font-size: var(--text-lg) !important;
font-weight: 600 !important;
color: var(--color-text-heading) !important;
background-color: var(--color-brand-100) !important;
}
.lion-history-info-modal-content__comment {
background-color: var(--color-brand-100) !important;
}
.lion-history-info-modal-content__points,
.lion-history-info-modal-content__date,
.lion-redeem-reward-modal__confirm-summary {
font-size: var(--text-sm) !important;
font-weight: 400 !important;
color: var(--color-text-general) !important;
}
.lion-reward-code__code {
font-size: var(--text-lg) !important;
font-weight: 600 !important;
color: var(--color-text-heading) !important;
background: none !important;
background-color: transparent !important;
border: none !important;
}
.lion-redeem-reward-modal__button--cancel {
background-color: var(--color-brand-200) !important;
color: var(--color-text-heading) !important;
border: none !important;
border-radius: 4px !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
}
.lion-redeem-reward-modal__button--cancel:hover {
background-color: var(--color-brand-300) !important;
color: var(--color-text-heading) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
.lion-redeem-reward-modal__button--confirm {
background-color: var(--color-brand-400) !important;
color: var(--color-text-heading) !important;
border: none !important;
border-radius: 4px !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
}
.lion-redeem-reward-modal__button--confirm:hover {
background-color: var(--color-brand-300) !important;
color: var(--color-text-heading) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
`;
target.appendChild(style);
}
injectModalStyles();
setTimeout(injectModalStyles, 2000);
setTimeout(injectModalStyles, 5000);
</script>
Here is the code you will need to copy into your Custom CSS section:
Paste into Skio → Branding → Custom CSS
.ll-portal {
background-color: #FFFFFF;
border: 1px solid #EAEAEA;
border-radius: 8px;
padding: 20px;
margin: 5px;
margin-bottom: 30px;
font-family: inherit;
color: var(--color-text-general);
}
.ll-portal__points-header {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.ll-portal__points-balance {
font-size: var(--text-lg);
font-weight: 500;
color: var(--color-text-heading);
margin: 0;
}
.ll-portal__points-value {
color: var(--color-text-link);
font-weight: 700;
}
.ll-portal__points-pending {
font-size: var(--text-sm);
color: var(--color-text-general);
font-weight: 400;
margin-left: 5px;
}
.ll-portal__divider {
border: none;
height: 1px;
background-color: #EAEAEA;
margin: 15px 0;
}
.ll-portal__section {
margin-bottom: 25px;
}
.ll-portal__section:last-child {
margin-bottom: 0;
}
.ll-portal__section-title {
font-size: var(--text-lg);
font-weight: 600;
color: var(--color-text-heading);
margin: 0;
}
.ll-portal__section-subtitle {
font-size: var(--text-sm);
font-weight: 400;
color: var(--color-text-general);
margin: 4px 0 0 0;
}
.ll-portal .lion-claimed-rewards-list {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
.ll-portal .lion-claimed-reward-item {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
width: 100% !important;
background-color: var(--color-brand-100) !important;
border-radius: 4px !important;
padding: 14px 16px !important;
box-sizing: border-box !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
}
.ll-portal .lion-claimed-reward-item:hover {
background-color: var(--color-brand-300) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
.ll-portal .lion-claimed-reward-item__left {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex: 1 !important;
min-width: 0 !important;
}
.ll-portal .lion-claimed-reward-item__icon {
display: none !important;
}
.ll-portal .lion-claimed-reward-item__title {
font-size: var(--text-lg) !important;
font-weight: 600 !important;
color: var(--color-text-heading) !important;
}
.ll-portal .lion-claimed-reward-item__date {
font-size: var(--text-sm) !important;
color: var(--color-text-general) !important;
margin-left: auto !important;
white-space: nowrap !important;
}
.ll-portal .lion-claimed-reward-item__right {
display: flex !important;
align-items: center !important;
margin-left: 15px !important;
}
.ll-portal .lion-rewards-list {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
.ll-portal .lion-reward-item {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
width: 100% !important;
background-color: var(--color-brand-100) !important;
border: none !important;
border-radius: 4px !important;
padding: 14px 16px 14px 24px !important;
box-shadow: none !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.ll-portal .lion-reward-item__content {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
width: 100% !important;
background: none !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
gap: 0 !important;
border-radius: 0 !important;
line-height: 1 !important;
min-height: 0 !important;
}
.ll-portal .lion-reward-item__icon {
flex: 0 0 auto !important;
margin-right: 12px !important;
}
.ll-portal .lion-reward-item__title {
font-size: var(--text-lg) !important;
font-weight: 600 !important;
color: var(--color-text-heading) !important;
margin: 0 !important;
padding: 0 !important;
flex: 0 1 auto !important;
min-width: 0 !important;
line-height: 1 !important;
margin-right: auto !important;
text-align: left !important;
}
.ll-portal .lion-reward-item__meta {
font-size: var(--text-sm) !important;
color: var(--color-text-general) !important;
white-space: nowrap !important;
flex: 0 0 auto !important;
margin: 0 !important;
line-height: 1 !important;
}
.ll-portal .lion-reward-item__links {
display: none !important;
}
.ll-portal .lion-reward-item__product-image {
display: none !important;
}
.ll-portal .lion-reward-item__actions {
flex: 0 0 auto !important;
width: auto !important;
max-width: 200px !important;
margin: 0 0 0 12px !important;
}
.ll-portal .lion-reward-item__actions .lion-action-button {
width: auto !important;
flex: 0 0 auto !important;
}
.ll-portal .lion-action-button--tile {
transition: all 0.3s ease !important;
border-color: var(--color-text-general) !important;
color: var(--color-text-general) !important;
font-size: var(--text-sm) !important;
}
.ll-portal .lion-action-button--tile:hover {
background-color: var(--color-brand-300) !important;
color: var(--color-text-heading) !important;
border-color: var(--color-brand-300) !important;
}
.ll-portal .lion-action-button--tile.lion-action-button--disabled {
opacity: 0.4 !important;
cursor: not-allowed !important;
border-color: var(--color-text-general) !important;
color: var(--color-text-general) !important;
background-color: transparent !important;
}
.ll-portal .lion-action-button--tile.lion-action-button--disabled:hover {
transform: none !important;
background-color: transparent !important;
border-color: var(--color-text-general) !important;
color: var(--color-text-general) !important;
opacity: 0.4 !important;
}
.ll-portal .lion-reward-item:not(.lion-reward-item--cart-discount-voucher) {
display: none !important;
}
@media only screen and (max-width: 600px) {
.ll-portal .lion-reward-item__content {
flex-wrap: wrap !important;
}
.ll-portal .lion-reward-item__title {
flex: 1 1 100% !important;
}
}
Both of the above examples are configured to bring in your brand colors, to keep the components in the same styling as the rest of your Skio Customer Portal. You are free to make any edits you wish to the styling through the CSS code whenever you would like.
Here is an example of how the Skio Customer Portal would look:
All components in the LoyaltyLion SDK are supported and can be added if desired. The above is an example of the most popular components for the Skio portal.
Points, referral links and tier progress in these components show only to customers who are logged in and are members of your loyalty program. The rewards lists show to everyone.
How your customers use rewards on a subscription
Your customers claim rewards on your loyalty page, or in the LoyaltyLion components in your Skio Customer Portal. Then:
Subscription discounts. Your customer picks which of their Skio subscriptions to apply it to, and we apply it in Skio. If that does not work, we link them to their Skio Customer Portal, where they can paste the code into the Discounts section.
Free product (subscriber). We add the product to your customer’s next subscription order. No code is needed.
FAQ
Which rewards work with Skio?
Subscription discounts, including on subscriptions your customers already have, Free product (subscriber) rewards, and subscription Challenges.
Do Skio subscription orders earn points without the integration?
Yes. Skio subscription orders are Shopify orders, so they earn points under your purchase rule whether or not Skio is connected.
What happens when a customer cancels their Skio subscription?
Their progress towards an unfinished subscription Challenge milestone is canceled, and points held for a Free product (subscriber) reward that has not been added yet go back to them.