Install on Shopify

Add the SimplyClub drop-in to your Shopify store using the Theme App Extension block.

Install the SimplyClub Drop-In on Shopify

The SimplyClub drop-in is delivered to Shopify stores as a Theme App Extension block (SimplyClub Starter Kit). Once added to your theme, it loads the SimplyClub widget on every page, syncs the cart and customer with SimplyClub, and writes the selected benefit back to the cart so the discount carries through to checkout.

Prerequisites

A Shopify store with the SimplyClub app installed.
A PoiId from your SimplyClub dashboard (Settings → Point of Interest).
Access to the Shopify Theme Editor for the active theme.

1. Add the block to your theme

In Shopify admin, go to Online Store → Themes → Customize.
From the section/block panel, click Add app block.
Pick SimplyClub Starter Kit.
Place the block anywhere — it renders into <body> and positions itself.
Click Save.

2. Configure the block

Open the block and fill in:

Setting	Required	Description
PoiId	Yes	The Point-of-Interest ID from your SimplyClub dashboard. The widget will not load without it.
Environment	No	`Production` (default), `Test`, or `Local`. Use `Test` only when SimplyClub support asks you to.

Save the theme. Refresh any storefront page — the SimplyClub widget should appear.

3. Verify the install

On a storefront page, open the browser console and confirm:

The container <div id="simplyclub-starter-kit-block"> exists in the DOM.
A request to https://simply-drop-ins-2.onrender.com/drop-ins/drop-in-loader/index.mjs succeeded.
window.___sc is defined.

If the widget does not appear, the most common cause is a missing or incorrect PoiId.

What the block does

The block injects a single container plus a few scripts that wire Shopify and the SimplyClub drop-in together. At a high level:

Exposes Shopify state to the drop-in. The cart, shop domain, and logged-in customer are written to window.shopifyCart, window.shopDomain, and window.customer. The drop-in reads these to personalize the experience.
Loads the drop-in. A dynamic ES module import pulls drop-in-loader/index.mjs and calls dropInLoader.setConfig({ poiId, language_code, env }).
Syncs the cart. On load, and whenever Shopify's cart changes, the block fetches /cart.js, normalizes prices (Shopify returns cents), enriches items with compare_at_price and extended attributes, and pushes the result to the drop-in via config.commands.setCart(...).
Persists the selected benefit. When the user picks a benefit, the block stores sc_discount_info and sc_redeem_version in Shopify cart attributes so the discount survives navigation and checkout.
Saves the transaction code. On transactionCodeCreated, the block writes sc_transaction_code to cart attributes. This is the key your server uses later to reconcile the order (see the Order Webhook Integration doc).
Handles login. If the customer is not logged in, the block redirects to /account/login when the drop-in requests it, then reopens the widget after the user returns.

Cart attributes set by the block

The block writes these attributes to the Shopify cart — they appear on the order and are available in webhooks:

Attribute	Set when	Purpose
`sc_transaction_code`	Drop-in fires `transactionCodeCreated`	Links the Shopify order back to the SimplyClub session
`sc_discount_info`	User selects/changes a benefit	Snapshot of the selected benefit
`sc_redeem_version`	User selects/changes a benefit	Version of the redeem payload schema

Behavior notes

Loop-safe cart writes. All cart writes initiated by the block append ?simplyclub=true. The block's PerformanceObserver watches /cart/* calls and only resets the discount when another script mutates the cart — never on its own writes.
Additive adds preserve the benefit. /cart/add.js calls do not reset the selection. This matters when a user abandons checkout, returns, and adds another item — the previously selected benefit stays.
Selection rehydration on return. When the page reloads with an existing sc_discount_info cart attribute, the block does not overwrite it with a freshly-computed example transaction. Otherwise small JSON shape differences would visually "reset" the benefit on return from checkout.
Logout when email is missing. If window.customer.email is empty, the block calls config.api.logout() and clears sc_transaction_code.

Reference: the block source

The full source of the block lives at extensions/simply-club-starter-kit/blocks/simply-club-starter-kit.liquid in the SimplyClub App repo. The schema below is what merchants see in the theme editor:

{% schema %}
{
  "name": "SimplyClub Starter Kit",
  "target": "body",
  "settings": [
    { "type": "text",  "id": "poi_id", "label": "PoiId" },
    {
      "type": "radio",
      "id": "env",
      "label": "Environment",
      "options": [
        { "value": "prod",  "label": "Production" },
        { "value": "test",  "label": "Test" },
        { "value": "local", "label": "Local" }
      ],
      "default": "prod"
    }
  ]
}
{% endschema %}

Troubleshooting

Widget never appears — check that PoiId is set on the block and matches a PoI in your SimplyClub dashboard.
Widget loads but no benefits show — confirm the customer is logged in (window.customer.email is set) and that your PoI has active benefits.
Discount disappears after navigation — verify cart attributes sc_discount_info and sc_redeem_version are present on /cart.js. If a custom theme script writes to the cart without the simplyclub=true flag, the watcher will reset them by design.
Discount disappears on return from checkout — ensure no other script clears sc_discount_info between page loads.