> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nudj.cx/llms.txt
> Use this file to discover all available pages before exploring further.

# Storefront Widget Catalog

> The Nudj Shopify theme app extension — what each widget block does, where it goes on the storefront, and how it is configured.

Nudj ships a Shopify **theme app extension** (`apps/shopify/extensions/widget`). Merchants open the theme editor and drop Nudj widget blocks into their storefront. Each block renders a themed Nudj widget backed by the Nudj user app, wired to the `community.theme` configured in the Shopify embedded admin (PR #1646).

This page is the reference catalog — one entry per block.

## Shared theming

<CardGroup cols={2}>
  <Card title="Per-community theming" icon="palette">
    PR #1646 wired the Shopify widgets to `community.theme`. The merchant edits theme variables once in the embedded admin; every widget picks them up.
  </Card>

  <Card title="Theme presets" icon="swatchbook">
    PR #1886 added ready-to-use theme presets merchants can apply with one click, with unified config save back to `community.theme`.
  </Card>
</CardGroup>

Widget preview URLs resolve via:

* PR #1637 — use the first custom domain for the widget app URL.
* PR #1896 — CSP + env override for non-production previews.
* PR #1899 — prefer `customDomains` over the generic `userDomain` for in-admin previews.

Widget schema names are Shopify-limited to 25 characters — PR #2431 shortened any exceeding schema names. Widget settings export ordering was aligned in PR #1845 so theme editor panels render fields consistently.

## Loyalty widget (FAB)

**Files**: `extensions/widget/blocks/loyalty-fab.liquid` · **PRs**: #1634, #1635, #2256, #2045

A floating action button fixed to the viewport corner. Opens the full loyalty experience (points, challenges, rewards) in an in-storefront panel.

* PR #1634 — initial scaffold.
* PR #1635 — per-storefront configurability (admin can theme + toggle).
* PR #2256 — improved error states, sizing, and link behaviour.
* PR #2045 — fixed an issue where the FAB was stuck at `opacity: 0`.

## Simplified widget variant

**PRs**: #1659, #1674

A lighter variant of the loyalty widget for minimal storefronts. PR #1674 added achievements to this variant.

## Loyalty account widget

**Files**: `extensions/widget/blocks/loyalty-account.liquid` · **PR**: #2224

A block merchants place on storefront customer account pages (gamification stats, points balance, tier). Pairs with the [customer accounts](/enterprise/shopify/customer-accounts) integration.

## Ways to Earn widget

**Files**: `extensions/widget/blocks/ways-to-earn.liquid` · **PRs**: #2238, #2257

Renders a catalog of active challenges/actions on any page. PR #2238 shipped the block, PR #2257 revamped it with consistent theming.

## Refer-a-Friend widget

**Files**: `extensions/widget/blocks/referral-widget.liquid` · **PR**: #2253

Referral CTA widget. Generates the referral link, shows referral status, integrates with the [Shopify referral program](/enterprise/shopify/referral-program).

## Standalone referral widget

**PR**: #2240

The consolidated referral landing URL work also shipped a **standalone** referral widget — usable outside of the main loyalty FAB for merchants who want referral prominence on specific pages.

## Points-at-checkout widget

**Files**: `extensions/widget/blocks/points-at-checkout.liquid`, `points-at-checkout-drawer.liquid` · **PR**: #2387

Surfaces points earned/available during the checkout flow. Uses Shopify checkout extensions under the hood (separate `apps/shopify/extensions/checkout-points` extension).

## Points-for-spend nudge widgets

**Files**: `extensions/widget/blocks/product-points-nudge.liquid` · **Base**: PR #1738 · **Placements**: PRs #2190 (FAB variant), #2163 (product page variant)

Shows the points a shopper will earn on the current product/cart, with conversion mechanics tied to [points-for-spend](https://docs.shopify.com/discount-functions) via the configured multiplier. PR #1738 shipped the base implementation, PRs #2190 and #2163 added the FAB and product-page placements.

## Global widget toggle

**PRs**: #2002, #2004

Merchants can disable the whole widget surface from the embedded admin's **On-site content** page (PR #2002), wired through to a programme-disable button (PR #2004).

## Widget settings scrolling + schema + export ordering

* PR #1652 — widget settings form now scrolls on overflow.
* PR #1845 — widget settings exports reordered for consistent theme editor field order.
* PR #2431 — schema names shortened to stay under Shopify's 25-character limit.

## CSP allowances

The Nudj user app sets a CSP `frame-ancestors` directive; PR #1638 added Shopify storefront domains so the widgets render without being blocked by the browser.

## Preview URL selection

When the merchant previews a widget from the embedded admin:

* PR #1637 picks the first domain for the widget's app URL.
* PR #1896 provides a CSP + env override for non-production deployments.
* PR #1899 prefers `customDomains` over the generic `userDomain` for accurate branded previews.

## Next steps

<CardGroup cols={2}>
  <Card title="Rewards" icon="gift" href="/enterprise/shopify/rewards">
    Shopify-backed reward types that the loyalty widget exposes.
  </Card>

  <Card title="Referral program" icon="users" href="/enterprise/shopify/referral-program">
    Refer-a-Friend widget + landing URL configuration.
  </Card>
</CardGroup>

> Last reviewed: 2026-04 · Related PRs: #1634, #1635, #1637, #1638, #1646, #1652, #1659, #1674, #1738, #1845, #1886, #1896, #1899, #1974, #1981, #2002, #2004, #2045, #2163, #2190, #2224, #2238, #2240, #2253, #2256, #2257, #2387, #2431