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

# Floating Rewards

> A floating rewards button on every storefront page that opens a loyalty panel with points, ways to earn and redeem, VIP tiers, rewards, referrals and membership.

<Note>
  **Where to find this:** Shopify admin → Apps → Yuko Loyalty → Loyalty → Widgets → Floating Rewards
</Note>

## Introduction

Floating Rewards is a button that floats in a bottom corner of every storefront page. Tapping it opens a loyalty panel where customers can see their balance, browse ways to earn and redeem, track VIP progress, apply rewards they've earned, share their referral link and manage a paid membership, without leaving the page they're on.

It's marked **Recommended** on the Widgets list because it's the quickest way to make your program visible everywhere.

## What problem this solves

Customers shouldn't have to hunt for a loyalty page to find out what they can earn or redeem. A floating button keeps the whole program one tap away on every page.

## Where it appears

* Every storefront page, rendered through the **Yuko App** theme app embed. There's no block to place.
* In the bottom-left or bottom-right corner, set separately for desktop and mobile. The default is **left**.
* It doesn't appear in Shopify Checkout. Use [Checkout Earn](/onsite-widgets/checkout-earn) and [Checkout Redeem](/onsite-widgets/checkout-redeem) there.

## When to use

* You want loyalty visible on every page with no theme editing.
* You want one panel that covers points, VIP, rewards, referrals and membership.
* You want to link to a specific part of the panel from your menu, emails or ads.

## Overview

* Ten editor tabs: **Customization**, **Home page**, **Floating Rewards button**, **Birthday**, **VIP**, **Your Rewards**, **Activity log**, **Ways to earn**, **Ways to redeem** and **Membership Detail**.
* Most text tabs have two audiences: **Anonymous** (visitors without an account) and **With account** (logged-in members).
* Home page sections can be dragged into a new order.
* A **Deep link** opens the panel straight to a chosen section.
* Each language has its own copy of the text. Use the **Editing language** picker at the top of the editor.
* The widget renders inside a shadow DOM, so your theme's CSS doesn't leak into the panel and the panel's CSS doesn't leak into your theme. Use the **Custom CSS** section to style it.

## Before you start

<Check>Yuko is installed on your Shopify store.</Check>
<Check>The program this widget belongs to is set up and enabled.</Check>
<Check>The widget is switched on with the toggle on its card in Yuko's **Widgets** page (for loyalty widgets, **Shopify admin → Apps → Yuko Loyalty → Loyalty → Widgets**).</Check>
<Check>For storefront widgets, your active theme is an Online Store 2.0 theme that supports app embeds and app blocks.</Check>

<Check>The **Yuko App** embed is turned on in your published theme. See [Theme App Embed](/installation-and-setup/theme-app-embed).</Check>

## Setup guide

<Steps>
  <Step title="Open the widget">
    Go to **Apps → Yuko Loyalty → Loyalty → Widgets** and click **Customize** on **Floating Rewards**. The editor opens on the **Home page** tab, with a live preview you can switch between mobile and desktop.
  </Step>

  <Step title="Set the look in Customization">
    Work through the **Customization** accordions: Colors, Shapes, Placement, Visibility, Banner images, Custom CSS and Deep link. See [Customization](#customization) below.
  </Step>

  <Step title="Configure the button">
    On the **Floating Rewards button** tab, pick a mode, text and icon for desktop and for mobile.
  </Step>

  <Step title="Build the home page">
    On the **Home page** tab, edit each section for **Anonymous** and **With account** visitors, and drag sections into the order you want.
  </Step>

  <Step title="Edit the inner pages">
    Update the text on the Birthday, VIP, Your Rewards, Activity log, Ways to earn, Ways to redeem and Membership Detail tabs.
  </Step>

  <Step title="Save and turn it on">
    Click **Save**, then switch the widget on with the toggle. The button appears on your storefront through the Yuko App embed.
  </Step>
</Steps>

## Customization

### Colors

| Setting | What it controls |
| - | - |
| **Primary color** | Button backgrounds, headers, icons and borders. |
| **Secondary color** | Card and surface backgrounds across the widget. |
| **Body text color** | General text for labels, descriptions and content. |
| **Body description color** | Default text colour for elements without their own colour. |

To set these colours across every widget at once, use [Branding & Locale](/onsite-widgets/branding-and-locale).

### Shapes

Each element can be **Square**, **Shaved**, **Rounded** or **Circular**:

* **Panel:** Container, Cards, Buttons and Inputs. Each defaults to **Rounded**.
* **Floating Rewards:** Container, which is the button itself. It defaults to **Circular**.

### Placement

Set on separate **Desktop** and **Mobile** tabs:

* **Placement:** **Left** (default) or **Right**.
* **Side spacing:** 0–100 px. The default is 20 px on desktop and 16 px on mobile.
* **Bottom spacing:** 0–100 px. The default is 20 px on desktop and 16 px on mobile.

Placement moves both the button and the panel.

### Visibility

* **Where to display the Floating Rewards:** **Desktop and mobile** (default), **Desktop**, **Mobile** or **None**.
* **Hide on homepage:** hides the button on your home page.
* **Hide Floating Rewards in URLs that contain:** click **Add new condition**, enter text such as `/blog` and click **Add**. The button is hidden on any URL that contains that text. Add as many conditions as you need.

### Banner images

* **Banner image:** optional. It appears in the panel header.
* **Brand icon:** optional. A small icon shown near the banner area.

Images must be JPG, PNG, GIF or WEBP and smaller than 1 MB.

### Custom CSS

Add CSS to fine-tune the panel and button. Because the widget renders in a shadow DOM, write your CSS here rather than in your theme stylesheet.

### Deep link

Open the panel directly on one section from a menu link, button, email or ad:

1. Under **Choose which part of the panel you want to open**, pick **Ways to earn** (default), **Ways to redeem**, **Points**, **VIP**, **Your rewards** or **Activity**.
2. Copy the link from **Your link**. It looks like `#yuko-ways-to-earn`.
3. Paste it into your navigation as a menu item link. To link from an email or another website, add it to the end of your store URL, for example `https://yourstore.com/#yuko-ways-to-redeem`.

| Section | Link |
| - | - |
| Ways to earn | `#yuko-ways-to-earn` |
| Ways to redeem | `#yuko-ways-to-redeem` |
| Points | `#yuko-points` |
| VIP | `#yuko-vip` |
| Your rewards | `#yuko-your-rewards` |
| Activity | `#yuko-activity` |

## Floating Rewards button

Set on separate **Desktop** and **Mobile** tabs:

* **Mode:** **Icon with text**, **Text only** or **Icon only**.
* **Text:** the button label, shown in the two modes that include text. The default is *Rewards*.
* **Icon:** **Default** or **Upload your own icon**.

## Home page

The home page is what customers see when they open the panel. Switch between **Anonymous** and **With account** to edit each version. **Header** (and **Account creation** for visitors) stays at the top. Drag the other sections to reorder them.

| Section | Audience | Settings |
| - | - | - |
| **Header** | Both | **Caption** and **Title**. Visitor defaults: *Welcome to* / `[store_name]`. Member defaults: *Welcome back!* / *You have `[point_balance]` `[points_label]`*. |
| **Account creation** | Anonymous | **Title**, **Description**, **Join now button (Lists)**, **Create account** and **Sign in**. In **Sign in**, `[signin:Sign in]` becomes a sign-in link, and the text after the colon is the link text. |
| **Featured booster** | Both | **Show a featured booster card on the home page**, **Booster campaign to feature** and **Booster text**. The reward summary comes from the selected [booster campaign](/loyalty/booster-campaigns/overview). Off by default. |
| **Your rewards** | With account | **Your rewards** and **Your rewards description**. |
| **Points** | Both | **Title**, **Description**, **Ways to earn label** and **Ways to redeem label**, each with an icon (**Default** or **Upload your own icon**). |
| **VIP** | Both | **Title**, **Description**, **Starting tier label** (default *Free Entry*), **Tier reach text**, **Next tier text**, **Earn points to reach text** and **Maximum tier reached text**. |
| **Membership** | Both | **Title**, **Description**, **Monthly label**, **Yearly label**, **Button text** and **Renewal label** (`[renewal_date]`). |
| **Referral** | Both | **Title**, **Description**, **Referrer reward label**, **Friend reward label**, **Get referral link button text**, **Enable social share icons** and **Social share label**. Visitors see **Visitor button text** in place of the referral tools, which prompts them to sign in or create an account. |
| **Activity** | With account | **Your activity title**. |

## Inner page tabs

| Tab | Settings |
| - | - |
| **Birthday** | **Title**, **Description**, **Day label**, **Month label**, **Year label** and **Save date button**. |
| **VIP** | **VIP tiers header**, **Starting tier label**, **Tier reach text**, **Next tier text**, **Earn points to reach text**, **Maximum tier reached text**, **Benefits title** and **Points multiplier benefit text**. |
| **Your Rewards** | **Page title**, **Apply discount button text**, **Expiration date text** and **No rewards available text**. |
| **Activity log** | **Page title**, **Balance notice text**, **No activity found text**, **Page info text**, **Previous button text** and **Next button text**. |
| **Ways to earn** | **Page title**, **Ways to earn — order** (**Booster campaigns first** or **Standard campaigns first**), **No campaigns available text**, and the **Like**, **Follow**, **Share** and **Edit date** button text. |
| **Ways to redeem** | **Page title**, **Redeem button text** and **No rewards available text**. |
| **Membership Detail** | **Page title**, **Plans section label**, **Benefits label**, **Monthly label**, **Yearly label**, **Renewal label**, **Become a member button text**, **Upgrade button text**, **Downgrade button text**, **Cancel membership button text** and **Action in progress text**. |

Text fields accept placeholders:

Placeholders are written in square brackets, for example `[points_label]`. Each text field's help text in the widget editor lists the placeholders that field supports.

**Available in every storefront widget text**

| Placeholder | Replaced with |
| - | - |
| `[points_label]` | Your points label from **Loyalty → Settings** (singular or plural, e.g. *point* / *points*). |
| `[point_balance]` | The customer's current points balance. |
| `[points_cash_value]` | What the customer's balance is worth in your store currency, based on your points-to-cash conversion rate. |
| `[store_name]` | Your store name. |

**Widget-specific placeholders**

| Placeholder | Replaced with | Used in |
| - | - | - |
| `[points_value]` | Points the customer can earn on this product, cart or order. | Product page, Cart earn, Checkout earn, Order status earn |
| `[first_name]` | The customer's first name (logged-in customers only). | Cart redeem greeting, Loyalty Nudges |
| `[customer_name]` | The customer's full name (logged-in customers only). | Loyalty Nudges |
| `[points_needed]` | How many more points the customer needs for a reward. | Insufficient-points text (Cart redeem, Loyalty Nudges) |
| `[expiration_date]` | The expiry date of an earned reward. Hidden automatically when the reward doesn't expire. `[discount_expiry_date]` works the same way. | Reward expiry text (Cart redeem, Loyalty Nudges, Floating Rewards) |
| `[points_to_redeem]` | The number of points the customer chose to redeem. | Checkout redeem summary |
| `[discount_value]` | The discount those points unlock. | Checkout redeem summary |
| `[tier_name]` | A VIP tier name. | VIP tier text (Floating Rewards) |
| `[next_tier]` | The name of the customer's next VIP tier. | VIP progress text |
| `[tier_entry_amount]` | The threshold needed to enter a tier. | Cart redeem tier entry text |
| `[tier_reach_level]` | The threshold needed to reach a tier. | Floating Rewards VIP text |
| `[multiplier_value]` | The points multiplier for a VIP tier (e.g. *2*). Shown only when the multiplier is greater than 1. | Points multiplier benefit text |
| `[renewal_date]` | The date a paid membership renews. | Floating Rewards membership text |

## How it works

1. The **Yuko App** embed loads the Floating Rewards script on every storefront page.
2. The button mounts in the corner and at the spacing you set, unless a Visibility rule hides it on that device or URL.
3. Visitors see the **Anonymous** home page, with prompts to create an account or sign in. Logged-in customers see the **With account** version, with their balance, rewards and activity.
4. A URL ending in a `#yuko-<section>` deep link opens the panel straight to that section.
5. Customers can apply earned rewards, redeem points, set their birthday and share their referral link from inside the panel.

### Custom login trigger

By default, a logged-out customer who taps a sign-in link in the panel goes to the Shopify account login page. If your store uses its own login (a popup or a third-party login app), set a **Custom login trigger** in [Loyalty → Settings](/loyalty/program-settings):

* **Use a CSS element:** Yuko clicks an existing element on the page, such as your theme's login button. Enter its **Login element selector**, for example `#login-button` or `a[href='/account']`.
* **Use a link:** Yuko sends the customer to the **Login link** you enter.

The same setting applies to Loyalty Nudges and the Cart redeem widget.

### Limitations

* The button sits in a bottom corner. Mid-page positions aren't supported.
* It doesn't render in Shopify Checkout.
* The **Yuko App** embed must be on. See [Theme App Embed](/installation-and-setup/theme-app-embed).

## Examples

* **Menu link to rewards:** add a "Rewards" item to your main menu that links to `#yuko-ways-to-redeem`, so the panel opens on what customers can spend their points on.
* **Booster spotlight:** turn on **Featured booster** during a double-points weekend so every panel opens with that offer at the top of the home page.
* **Clear of your chat app:** place Floating Rewards on the left and keep your support chat on the right, or raise **Bottom spacing** so the two don't overlap.

## Best practices

<Tip>**Stay clear of chat widgets.** Use the opposite corner, or raise **Bottom spacing**, so Floating Rewards doesn't sit on top of your support chat.</Tip>
<Tip>**Add a deep link to your navigation.** A menu item that opens the panel is easier to find than the floating button alone.</Tip>
<Tip>**Use Icon only on mobile.** On small screens a compact button covers less of your product content.</Tip>
<Tip>**Write both audiences.** Visitors and members see different home pages, so check both in the preview.</Tip>

## FAQs

<AccordionGroup>
  <Accordion title="Can I hide the button on specific pages?">
    Yes. In **Customization → Visibility**, tick **Hide on homepage** or add URL conditions under **Hide Floating Rewards in URLs that contain**. To hide it on one device type, set **Where to display the Floating Rewards** to **Desktop** or **Mobile**.
  </Accordion>

  <Accordion title="Can I open the panel from my own button or menu?">
    Yes. Copy the link from **Customization → Deep link** (for example `#yuko-vip`) and use it as the link on any menu item or button.
  </Accordion>

  <Accordion title="Why doesn't my theme CSS affect the panel?">
    Floating Rewards renders inside a shadow DOM to keep its styles separate from your theme. Add styling in **Customization → Custom CSS** instead.
  </Accordion>

  <Accordion title="Customers are sent to the Shopify login page, but my store uses a different login">
    Set a **Custom login trigger** in [Loyalty → Settings](/loyalty/program-settings) so Yuko starts your store's own login flow.
  </Accordion>

  <Accordion title="How do I translate the panel?">
    Use the **Editing language** picker at the top of the editor. Each of your store's published languages keeps its own copy of the text. Campaign and reward names are translated in [Translations](/account/translations).
  </Accordion>

  <Accordion title="Does it appear at checkout?">
    No. Use [Checkout Earn](/onsite-widgets/checkout-earn) and [Checkout Redeem](/onsite-widgets/checkout-redeem) in Shopify Checkout.
  </Accordion>
</AccordionGroup>

## Related

<CardGroup cols={3}>
  <Card title="Floating Rewards" icon="circle-arrow-up" href="/onsite-widgets/floating-launcher">
    Floating button and loyalty panel on every page.
  </Card>

  <Card title="Rewards Landing Page" icon="window-maximize" href="/onsite-widgets/rewards-landing-page">
    A dedicated loyalty page built from seven theme blocks.
  </Card>

  <Card title="Loyalty Nudges" icon="bell" href="/onsite-widgets/loyalty-nudges">
    Pinned strip and drawer on every page, ideal for boosters.
  </Card>

  <Card title="Product Page Earn" icon="bag-shopping" href="/onsite-widgets/product-page-earn">
    Show points to earn on product pages.
  </Card>

  <Card title="Cart Earn" icon="cart-plus" href="/onsite-widgets/cart-earn">
    Show points to earn on the cart.
  </Card>

  <Card title="Cart Redeem" icon="gift" href="/onsite-widgets/cart-redeem">
    Let customers redeem points and apply rewards in the cart.
  </Card>

  <Card title="Checkout Earn" icon="cash-register" href="/onsite-widgets/checkout-earn">
    Show points to earn in Shopify Checkout (Shopify Plus).
  </Card>

  <Card title="Checkout Redeem" icon="ticket" href="/onsite-widgets/checkout-redeem">
    Redeem points and apply rewards in Shopify Checkout (Shopify Plus).
  </Card>

  <Card title="Order Status Earn" icon="circle-check" href="/onsite-widgets/order-status-earn">
    Show points earned on the order status page in customer accounts.
  </Card>

  <Card title="Order List Balance" icon="receipt" href="/onsite-widgets/order-list-balance">
    Show the points balance on the Orders page in customer accounts.
  </Card>

  <Card title="Customer Profile Balance" icon="id-badge" href="/onsite-widgets/customer-profile-balance">
    Show loyalty details on the Profile page in customer accounts.
  </Card>

  <Card title="Customer Account Page" icon="user" href="/onsite-widgets/customer-account-page">
    A full loyalty page inside Shopify customer accounts.
  </Card>

  <Card title="Branding & Locale" icon="palette" href="/onsite-widgets/branding-and-locale">
    Colour palettes for all widgets, and per-language widget text.
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="Theme App Embed" icon="plug" href="/installation-and-setup/theme-app-embed">
    The Yuko App embed that powers Floating Rewards, Loyalty Nudges and the theme blocks.
  </Card>

  <Card title="Checkout UI Extension" icon="cart-shopping" href="/installation-and-setup/checkout-ui-extension">
    Add the earn and redeem blocks to Shopify Checkout (Shopify Plus).
  </Card>

  <Card title="Customer Account Extension" icon="user" href="/installation-and-setup/customer-account-extension">
    Add the loyalty blocks and full loyalty page to Shopify customer accounts.
  </Card>

  <Card title="Verify Your Setup" icon="circle-check" href="/installation-and-setup/verify-setup">
    Confirm widgets render correctly on the live storefront.
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="Book a Free Setup Call" icon="phone" href="https://cal.com/rameshelamathi/yuko-demo">
    Talk to our team for personalised setup help.

    **Time:** 30 minutes
  </Card>

  <Card title="Contact Support" icon="life-ring" href="https://yuko.so/support/">
    Visit our support hub for help articles, live chat and ticket submission.
  </Card>

  <Card title="Browse the Guides" icon="book" href="/getting-started/welcome">
    Documentation across loyalty, referrals, memberships and more.
  </Card>

  <Card title="Install Yuko" icon="shop" href="https://apps.shopify.com/yuko">
    Add Yuko to your Shopify store from the Shopify App Store.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.