Skip to main content
Where to find this: Shopify admin → Apps → Yuko Loyalty → Loyalty → Widgets → Floating Rewards

​
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 and 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

Yuko is installed on your Shopify store.
The program this widget belongs to is set up and enabled.
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).
For storefront widgets, your active theme is an Online Store 2.0 theme that supports app embeds and app blocks.
The Yuko App embed is turned on in your published theme. See Theme App Embed.

​
Setup guide

1

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

Set the look in Customization

Work through the Customization accordions: Colors, Shapes, Placement, Visibility, Banner images, Custom CSS and Deep link. See Customization below.
3

Configure the button

On the Floating Rewards button tab, pick a mode, text and icon for desktop and for mobile.
4

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

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

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.

​
Customization

​
Colors

To set these colours across every widget at once, use Branding & 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 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. 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.

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

​
Inner page tabs

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 Widget-specific placeholders

​
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:
  • 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.

​
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

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.
Add a deep link to your navigation. A menu item that opens the panel is easier to find than the floating button alone.
Use Icon only on mobile. On small screens a compact button covers less of your product content.
Write both audiences. Visitors and members see different home pages, so check both in the preview.

​
FAQs

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.
Yes. Copy the link from Customization → Deep link (for example #yuko-vip) and use it as the link on any menu item or button.
Floating Rewards renders inside a shadow DOM to keep its styles separate from your theme. Add styling in Customization → Custom CSS instead.
Set a Custom login trigger in Loyalty → Settings so Yuko starts your store’s own login flow.
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.
No. Use Checkout Earn and Checkout Redeem in Shopify Checkout.

Floating Rewards

Floating button and loyalty panel on every page.

Rewards Landing Page

A dedicated loyalty page built from seven theme blocks.

Loyalty Nudges

Pinned strip and drawer on every page, ideal for boosters.

Product Page Earn

Show points to earn on product pages.

Cart Earn

Show points to earn on the cart.

Cart Redeem

Let customers redeem points and apply rewards in the cart.

Checkout Earn

Show points to earn in Shopify Checkout (Shopify Plus).

Checkout Redeem

Redeem points and apply rewards in Shopify Checkout (Shopify Plus).

Order Status Earn

Show points earned on the order status page in customer accounts.

Order List Balance

Show the points balance on the Orders page in customer accounts.

Customer Profile Balance

Show loyalty details on the Profile page in customer accounts.

Customer Account Page

A full loyalty page inside Shopify customer accounts.

Branding & Locale

Colour palettes for all widgets, and per-language widget text.

Theme App Embed

The Yuko App embed that powers Floating Rewards, Loyalty Nudges and the theme blocks.

Checkout UI Extension

Add the earn and redeem blocks to Shopify Checkout (Shopify Plus).

Customer Account Extension

Add the loyalty blocks and full loyalty page to Shopify customer accounts.

Verify Your Setup

Confirm widgets render correctly on the live storefront.

Book a Free Setup Call

Talk to our team for personalised setup help.Time: 30 minutes

Contact Support

Visit our support hub for help articles, live chat and ticket submission.

Browse the Guides

Documentation across loyalty, referrals, memberships and more.

Install Yuko

Add Yuko to your Shopify store from the Shopify App Store.