> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.wikiguide.link/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # How to Set Up Store Front Widgets A **step-by-step** guide to enabling and customizing Loyalty Palm's storefront widgets — including the **loyalty launcher, rewards panel, referral popup, and nudges.** ### Step 1: Go to Store Front Widgets In the Loyalty Palm sidebar, click **Store Front Widgets**. You'll land on the **Widgets** tab by default. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/9/5/5/a9552c769f21a000/image_8ev9qc.png) ### Step 2: Customize the Launcher The **Launcher** is the floating rewards button shown on your storefront. Click **Customize** to define its content and appearance. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/9/5/5/a9552c769f21a000/image_j84xwj.png) ### Step 3: Style the Launcher Choose a **Style preset** (e.g., Clean) and **Launcher style** (e.g., Icon with text). You'll see a live preview on the **right showing exactly** how it will appear on your storefront. Click **Save** once you're happy with it. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/9/5/5/a9552c769f21a000/image_lw8jrb.png) ### Step 4: Add to Theme Once you're happy with the customization, click **Add To Theme** to actually enable the Launcher widget on your live storefront. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/9/5/5/a9552c769f21a000/image_1ke14l1.png) ### Step 5: Widget Activated ✅ You're taken to the Shopify theme editor where the **Rewards widget** toggle is now on. You can see the "Join rewards" launcher live on your storefront preview. Click **Save** to confirm the changes. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/9/5/5/a9552c769f21a000/image_vu81i3.png) ### Step 6: Customize the Panel The Launcher is now **Live**. Next, click **Customize** on the **Panel** widget to refine the content of your reward panel — the same one automatically got activated alongside the Launcher and is also **Live**. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/9/5/5/a9552c769f21a000/image_1d2n9um.png) ### Step 7: Customize the Reward Panel Here you can edit every part of the panel — **Header**, **Customer state** (Guest/Logged-in/VIP), **Tabs**, **Earn tab**, **Member card**, **Redeem tab**, **Footer**, and **Brand** colors — with a live preview on the right. Click **Save** once you're done. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/9/5/5/a9552c769f21a000/image_r1547.png) **Add to theme if the status of widget is not active.** ### Step 8: Set Up the Referral Popup Under **Referrals**, click **Customize** on the **Referral Popup** to design the welcome gift shown to guests visiting via a referral link. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/9/5/5/a9552c769f21a000/image_124jf1l.png) ### Step 9: Design the Referral Popup Switch between the **Referral popup** and **Success screen** tabs to configure each. Set the **Status** to Enabled, pick a **Design Preset**, choose your **Icon** and **Layout** style — the live preview updates on the right. Click **Save** when done. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/9/5/5/a9552c769f21a000/image_yu7xgp.png) ### Step 10: Add the Referral Popup Click **Add To Theme** to enable the Referral Popup on your storefront. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/9/5/5/a9552c769f21a000/image_13yeen9.png) ### Step 11: Save the Embed The **Referral popup** app embed toggle is now on. Click **Save** to confirm it's active on your theme. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/9/5/5/a9552c769f21a000/image_a2wjs2.png) ### Step 12: Set Up Nudges The Referral Popup is now **Live**. Next, click **Customize** under **Nudges** to configure on-site reminders that boost program engagement. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/9/5/5/a9552c769f21a000/image_cmj1da.png) ### Step 13: Configure Nudges 1. Turn **On-site nudges** on 2. **Design** tab – choose which moments trigger a nudge (Reward available, Next reward progress, VIP tier progress, Guest join reminder) 3. **Content** tab – edit the nudge text 4. **Behavior** tab – control timing and frequency 5. **Customize** everything according to your likings. 6. Click **Save** The **Storefront preview** on the right shows exactly how the nudge will appear to shoppers. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/9/5/5/a9552c769f21a000/image_gnmovw.png) **After saving this Click on Add To Themes** ![](https://storage.crisp.chat/users/helpdesk/website/-/a/9/5/5/a9552c769f21a000/image_148fnk1.png) ### Step 14: Activate Loyalty Nudges The **Loyalty nudges** app embed is now toggled on, and you'll see the confirmation "Loyalty nudges activated." Click **Save** to finalize it on your theme. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/9/5/5/a9552c769f21a000/image_1i8wocg.png) ### Step 15: Add Header Balance Block Nudges are now **Live**. Next, under **Header**, click **Add To Theme** on the **Header Balance block** to display the logged-in customer's points balance directly in your store header. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/9/5/5/a9552c769f21a000/image_j52cfl.png) ### After clicking on the Add to Theme of Header 1. In the theme editor sidebar, select the **Header rewards balance** block under Header. 2. This adds the **Rewards / Join rewards** widget to your store header. 3. Use the panel on the right to customize: Title label, Icon image, Guest label, Accent color, and Highlight color. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/9/5/5/a9552c769f21a000/image_1dp82qm.png) **As you can see its live in the store.** ![](https://storage.crisp.chat/users/helpdesk/website/-/a/9/5/5/a9552c769f21a000/image_1paqm4r.png) ***Thank you.***