You can modify:

Storefront design
Promotions
Discounts
Cart behavior
UI elements

This allows you to create mobile app exclusive experiences without affecting your website visitors.

Prerequisites

Before customizing the app experience:

Install Apploy on your Shopify store.
Select an active mobile app plan.
Enable the Apploy Theme Extension.

Detecting Apploy Mobile App Users

You can detect whether a visitor is using the Apploy mobile app using either JavaScript or Shopify Liquid.

Method 1 — JavaScript Detection

Use this when writing JavaScript or theme scripts.

const isMobileApp = window.apployAppManager?.isMobileApp();

Example:

if (window.apployAppManager?.isMobileApp()) {
  console.log("User is using the Apploy mobile app");
}

Method 2 — Shopify Liquid Detection

If you want to conditionally render sections or elements in your theme, use the _SalesChannel cart attribute.

{% if cart.attributes['_SalesChannel'] == 'Apploy' %}
  <!-- App-only content -->
{% endif %}

This method works best for:

Showing sections only in the app
Loading mobile-app-only scripts
Showing exclusive banners

Example 1 — Show a Section Only in the Mobile App

Create a promotional section visible only inside the mobile app.

{% if cart.attributes['_SalesChannel'] == 'Apploy' %}
<section class="app-exclusive-banner">
  <h2>Mobile App Exclusive Offer</h2>
  <p>Use the app to get free shipping today.</p>
</section>
{% endif %}

This ensures the section is not rendered on the website.

Example 2 — Load a Script Only for Mobile App Users

This allows you to load JavaScript only when the page is opened in the app.

{% if cart.attributes['_SalesChannel'] == 'Apploy' %}
<script src="{{ 'apploy-mobile.js' | asset_url }}"></script>
{% endif %}

Example use cases:

App-only tracking
App-only cart logic
App-only UI changes

Example 3 — Show an App-Exclusive Banner

{% if cart.attributes['_SalesChannel'] == 'Apploy' %}
<div class="app-banner">
  <p>🎉 App Exclusive: Get 10% Off Today!</p>
</div>
{% endif %}

Example 4 — Add a Free Product for App Users

You can automatically add a free product to the cart for app users.

document.addEventListener("cart:loaded", function (cart) {

  if (!window.apployAppManager?.isMobileApp()) return;

  const freeVariantId = 123456789;

  const exists = cart.items.some(
    item => item.variant_id === freeVariantId
  );

  if (!exists) {

    fetch("/cart/add.js", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        items: [{
          id: freeVariantId,
          quantity: 1
        }]
      })
    });

  }

});

Use cases:

Free samples
App welcome gifts
Loyalty rewards

Example 5 — Show an App-Only Discount Message

{% if cart.attributes['_SalesChannel'] == 'Apploy' %}
<div class="app-discount-banner">
  <p>📱 App Users: Use code <strong>APP10</strong> for 10% off.</p>
</div>
{% endif %}

Example 6 — Change Layout for Mobile App Users

You can hide or modify elements for app users.

{% if cart.attributes['_SalesChannel'] != 'Apploy' %}
  {% render 'desktop-navigation' %}
{% endif %}

Example: hide certain menus inside the mobile app.

Example 7 — Track App User Events

Send analytics events to the mobile app.

if (window.apployAppManager?.isMobileApp()) {

  window.apployBridge.sendData({
    type: "event",
    eventData: {
      name: "PromotionViewed",
      type: "activity",
      data: {
        attributes: {
          promotion: "app-exclusive-banner"
        }
      }
    }
  });

}