Members, on your storefront

Keep loyalty inside your theme. Use the storefront portal, Customer Accounts, or both, with the same member balance and rewards.

Setup without code

1. In Loyalino, open On-site → Member experience. Select your member experience and save an existing Shopify page path, such as /pages/members-club.
2. Add the Member portal app block to that page in the theme editor. The block displays only on the configured path. It does not create or publish a Shopify page.
3. Add Member summary as a card or header dropdown wherever your theme accepts app blocks. For fixed placements, enable the Member touchpoints app embed, choose a supported preset or custom selectors, and enable the desired header/menu switches.
4. Choose Editorial, Classic or Minimal and adjust colors, radius and greeting. Test a draft theme on desktop and mobile before publishing.

NeverMonday's preset replaces its members-club section for authenticated members. Dawn's preset replaces only the page title. Guests keep their original marketing section; missing or ambiguous targets leave the theme untouched. Header/menu support depends on the theme. Automatic header placement is desktop-only (990px and wider); enable the separate mobile-menu card on smaller screens. Explicit app-block/custom-element placements keep developer-controlled responsive styling. Orders, addresses and account settings remain in Shopify.

What members can do

See spendable/pending points, VIP progress, claimed rewards and point activity; redeem fixed or flexible rewards; copy/apply discount codes; share referral links; save a birthday and complete supported earn actions. Newsletter subscription requires explicit consent. Birthday capture does not immediately award points. Orders, verified reviews and other server-observed events cannot be claimed through a button.

Custom Liquid and CSS

Enable the Member touchpoints embed once, then add any of these elements. Identity comes from Shopify's signed app proxy, never a customer ID in cached Liquid.

<loyalino-member-portal></loyalino-member-portal>
<loyalino-member-summary data-variant="card"></loyalino-member-summary>
<loyalino-member-summary data-variant="header"></loyalino-member-summary>

Use data-template-override="classic" (or editorial/minimal) for a specific block. Developers can explicitly use data-display="inline" to render a full portal away from the configured members path. This never bypasses authentication or plan checks.

.my-member-area .llm {
  --llm-background: #f5f5f0 !important;
  --llm-foreground: #202520 !important;
  --llm-accent: #202520 !important;
  --llm-radius: 12px !important;
}
.my-member-area .llm-welcome { text-transform: uppercase; }

There is no shadow DOM. Hooks include .llm-hero, .llm-stats, .llm-card, .llm-summary, .llm-button, .llm-progress and [data-section="wallet"] (also redeem, earn, referral, activity). Retain focus indicators, contrast and hidden-state rules.

JavaScript and custom rendering

// The small loader resolves this after the full runtime is ready.
const members = await window.LoyalinoMembersReady;
const state = await members.getState(); // null on failed authenticated read
// state.settings, state.signedIn, state.feed
await members.refresh();
members.mount(); // discover dynamically inserted elements
document.addEventListener("loyalino:member-updated", ({detail}) => {
  // detail.signedIn, detail.points; never infer authorization from an event
});
document.addEventListener("loyalino:reward-redeemed", ({detail}) => {
  // detail.rewardId; refresh rather than calculating balances yourself
});

For fully custom rendering, use the same-origin /apps/loyalty/member-portal and /apps/loyalty/data?surface=theme_block&member_actions=1&locale=da endpoints. The latter includes customer.completedActionTypes from the full award ledger and returns private member data only for the signed Shopify customer. Social/link actions without configured destinations are hidden in the built-in portal. Never put API tokens in theme code. Discard member state on logout, pagehide and session change.

Redemption is a JSON POST to /apps/loyalty/redeem with {shop, customerId, rewardId, pointsToRedeem?, idempotencyKey}. Only submit after explicit customer confirmation. The customer ID must match the signed session. Reuse an unpredictable idempotency key for retries of the same intent; never automatically retry or assume a failed network reply means no reward was created.

Translations

Built-in interface text is English/Danish. Merchant reward/rule translations use the existing localized feed. Developers may override any interface key (the runtime exposes its keys in the public source) before loading:

window.LoyalinoMembersConfig = {
  translations: { da: { welcome: "VELKOMMEN {{first_name}}", wallet: "Dine fordele" } }
};

All copy is escaped plain text. Greeting variables are {{first_name}}, {{points}} and {{tier}}. Amounts use the store currency; points are not represented as guaranteed cash value. Theme editor uses labelled sample data and performs no member reads or mutations.