The Skio integration is available for all Shopify and Shopify Plus customers on Advanced or Plus Plans
Overview
Connect your LoyaltyLion and Skio accounts to ensure that your customers can make use of your LoyaltyLion across both one-time, and subscription purchases.
Why Skio?
Skio is the subscription provider that prioritizes the customer experience. By improving the subscriber journey, customers actually enjoy being subscribed and stick with you longer. From passwordless access to having the fastest portal in the game, Skio sets you up with the tools to create beautiful subscriber experiences.
The benefits of integrating with Skio
Reward your best customers (your subscribers!) with LoyaltyLion points that can be redeemed against future subscription orders.
Loyalty points and automated sales now work hand-in-hand to deliver an experience designed to incentivize building long-term relationships with your customers.
Sell subscriptions without ripping your hair out.
How does the Skio integration work?
The integration with Skio makes use of the subscription discounts found in LoyaltyLion. This way, you can create vouchers for initial subscriptions, active subscriptions, and also discount codes that affect multiple subscription orders.
This allows all of your customers to take advantage of your loyalty program, wherever they are in your subscription stages.
How to create discount rewards that work with Skio
Log in to your LoyaltyLion account.
Click the Manage tab.
Click on Rewards on the left-hand side.
Click on New Reward, and then Discount.
Under Purchase type, you can set the discount to work on One-Off Purchases, Subscription Purchases, or Both. To allow the discount to work on Skio subscriptions, choose either Subscription or Both.
Under Recurring subscription payments, check the 'Apply discount to future subscription payments' box if you want the reward to apply to more than one subscription order. (If this box is unchecked, the reward will apply to the next subscription payment only, so you can skip to step 7.)
Limit discount to a set number of payments - Enter the number of payments this reward can be applied to (e.g. $5 off 3 subscription payments).
Discount all future payments - Select this option if you want the reward to be applied to all payments in a subscription.
Complete all the other fields for the reward - for more guidance, see our Discount reward guide.
Click on Create Reward.
Subscription codes created from this Discount Reward can then be used against subscriptions created by 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 Skio custom embedded block feature. This allows you to surface loyalty information within the subscription experience.
Where to Find the Custom Block in Skio
Log in to your Skio account.
Navigate to Storefront.
Select Customer Portal. This will open the Customer Portal configuration page.
Under Branding, you will see sections for:
Custom block - where you can paste LoyaltyLion embed code.
Custom CSS - to style the components so they match your brand.
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 colours, 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.
🗣️ For Skio custom blocks to render LoyaltyLion components, your shoppers need to be logged into their account.
How to use LoyaltyLion discounts in Skio
A customer can claim their LoyaltyLion reward either on the main Rewards page, or within the LoyaltyLion components embedded in the Skio Customer Portal.
Once the reward has been claimed, the customer can copy their discount code.
In the Skio Customer Portal, they scroll to the Discounts section > paste the code into the discount box > click Apply.
FAQ's
Q: Which rewards are supported in Skio?
Currently, subscription discount rewards from LoyaltyLion can be applied in Skio.