Steps to Customize In-App Experience
Ensure Apploy is installed on your store.
Select an active mobile app plan.
Enable Apploy theme extension on your theme.
How to Detect Mobile App Users?
Use the following JS snippet to identify mobile app users.
const isMobileApp = window.apployAppManager.isMobileApp();
Follow these examples to understand the customization process:
Example 1: Display a Section Only in the Mobile App
Show an exclusive section in the mobile app.
// sections/app-exclusive-promo-banner.liquid
<section class="app-promo-section hidden">// keep it hidden by default
<!-- Contents of the section -->
</section>
<script>
document.addEventListener("DOMContentLoaded",function(){
const isMobileApp = window.apployAppManager.isMobileApp();
// remove the hidden class if the session is in the mobile app
if(isMobileApp){
document.querySelector(".app-promo-section").removeClass("hidden");
}
});
</script>
Example 2: Add a Free Product to the Cart
Add a free product to the cart for mobile app users.
// assets/theme.js
document.addEventListener("cart:loaded",function(cart){
const isMobileApp = window.apployAppManager.isMobileApp();
// remove the hidden class if the session is in the mobile app
if(isMobileApp){
const freeProductVariantid = 12345;
const freeProductExists = cart.line_items.filter((item)=>item.variant.id == freeProductVariantid);
if(!freeProductExists){
let formData = {
'items': [{
'id': freeProductVariantid,
'quantity': 1
}]
};
fetch(window.Shopify.routes.root + 'cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.then(response => {
return response.json();
})
.catch((error) => {
console.error('Error:', error);
});
}
}
});
</script>
Contact us for assistance in setting up a custom experience in your app.