> ## 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.

# Add Nudj to Your Storefront

> Use the Shopify theme editor to add Nudj loyalty widgets to your storefront — a loyalty button, a Ways to Earn list, a Refer-a-Friend block, and more. No code required.

Nudj adds to your storefront through Shopify's **theme editor**, the same place you arrange your homepage and product sections. You drop in Nudj widget blocks where you want them, and they're styled to match your brand automatically — no code, no theme files to edit.

## Style your widgets first

Before adding widgets, pick how they look. In the Nudj app's settings you can apply a **theme preset** with one click, or fine-tune the colours and styling. Every widget reads from this shared theme, so you set your branding once and all the widgets follow.

<Tip>
  Set your theme in the Nudj app first, then add the widgets. The blocks you place will already match your brand, so there's nothing to restyle block by block.
</Tip>

## Add a widget with the theme editor

<Steps>
  <Step title="Open the theme editor">
    In your Shopify admin, go to **Online Store → Themes**, then select **Customize** on your live theme.
  </Step>

  <Step title="Add a Nudj block">
    Choose where you want the widget, select **Add block** (or **Add section**), and pick the Nudj block you want from the list.
  </Step>

  <Step title="Position and configure it">
    Drag it into place and adjust any block settings shown in the panel. Field names are kept short so they fit the theme editor's settings panel.
  </Step>

  <Step title="Save">
    Select **Save**. The widget is now live on your storefront.
  </Step>
</Steps>

## The widgets

<CardGroup cols={2}>
  <Card title="Loyalty button (FAB)" icon="circle-dot">
    A floating button anchored to the corner of the screen. Tapping it opens the full loyalty experience — points, challenges, and rewards — in a panel over your storefront.
  </Card>

  <Card title="Simplified loyalty widget" icon="square">
    A lighter version of the loyalty widget for minimal storefronts, including achievements.
  </Card>

  <Card title="Ways to Earn" icon="list-check">
    A list of the active ways shoppers can earn — your achievements and actions — that you can place on any page.
  </Card>

  <Card title="Loyalty account widget" icon="user">
    A block for customer account pages showing the shopper's points balance, tier, and gamification stats.
  </Card>
</CardGroup>

### Refer-a-Friend

The **Refer-a-Friend** block renders a shopper's personal referral link and a call to action, so they can invite friends straight from your storefront. There's also a **standalone referral widget** if you want referrals to stand out on a specific page. Both work with the referral programme you configure in [Set up your loyalty programme](/shopify/loyalty-program#referrals).

## Remove a widget

To take a widget off your storefront, open the theme editor, select the Nudj block, and **remove** (or hide) it — the same place you added it. The change applies as soon as you save. Repeat for any other blocks you want to take down.

## Next step

<a href="/shopify/checkout-and-accounts" className="not-prose group flex items-center gap-4 rounded-xl border border-gray-200 px-5 py-4 no-underline transition-colors hover:bg-gray-50 dark:border-white/10 dark:hover:bg-white/5">
  <Icon icon="bag-shopping" />

  <span className="flex grow flex-col">
    <span className="font-semibold text-gray-900 dark:text-white">Next: Checkout & customer accounts</span>
    <span className="text-sm text-gray-500 dark:text-gray-400">Let shoppers redeem points at checkout and add a loyalty block to customer accounts.</span>
  </span>

  <Icon icon="arrow-right" className="shrink-0 transition-transform group-hover:translate-x-1" />
</a>

> Last reviewed: 2026-06