LogoRijoy Docs
LogoRijoy Docs
Homepage
Order Rewards Configuration
Referral Reward
Free Shipping CouponPercentage Off CouponAmount Off Coupon
Panel multilingual supportWidget Style Settings
Loyalty Customer Data Import Operation Manual
Earn Points by Purchasing ProductsJudge.me Review to Earn PointsPoints-Multiplier CampaignsPromotional Product CampaignsRegisterCelebrating a BirthdayPlace an order
Klaviyo Integration
Thank You Page: Order Points Display SectionAccount Page: Display Relevant Membership BenefitsProduct Page: Points Display Section
VIP Tier
Email notification configuration
Widget

Widget Style Settings

Author: Rijoy Team
Published: 2026/01/08

Feature Overview

Widget style settings are used to control how the Loyalty Panel (Widget) is displayed on your storefront, including panel visibility, background style, color scheme, and the display style and position of the launcher (Bubble).

Enable the Loyalty Panel on Your Storefront

After completing the following steps, the loyalty panel will be visible on your storefront:

Panel opening settings

  1. In the app, click Widget in the left-side menu
  2. Go to the Style tab
  3. Enable Enable Floating Bubble
  4. Open your Shopify theme editor
  5. In App embeds, find and enable Rijoy Loyalty
  6. Click Save in the top-right corner to apply the changes

Panel Style Settings

Navigation Path

  • Click Widget
  • Go to the Style tab

1. Panel Background

Used to configure the background style of the loyalty panel homepage. Three options are supported:

Panel banner settings

  • Default
    • Use the system default background image
  • Solid Color
    • Use a solid color background
    • Customize the background color
  • Custom Image
    • Upload a custom image as the panel background

2. Colors

Used to customize the overall color scheme of the loyalty panel to match your brand identity.
You can use the color picker or enter an HTML color code directly.

Configurable items:

Panel color settings

  • Primary Color
    • Affects homepage icons, primary buttons, main text, progress bars, etc.
  • Primary Button Text
    • Text color of primary buttons
  • Secondary Color
    • Color of secondary buttons (e.g. Copy, View)
  • Secondary Button Text
    • Text color of secondary buttons
  • Header Title
    • Text color of the homepage welcome title

Click Reset to Default to restore all colors to the system default settings.

Launcher Settings

The launcher (Bubble) is the entry point that allows customers to open the loyalty panel on the storefront.

###1. Navigation Path

  • Click Widget
  • Go to the Bubble tab

Launcher Settings

2. Display Mode

Three display modes are supported:

  • Icon & Text
    • Display both icon and text
  • Icon Only
    • Display icon only
  • Text Only
    • Display text only

3. Bubble Position

Used to control where the launcher appears on the page:

  • Bottom Left
    • Displayed at the bottom-left corner of the page
  • Bottom Right
    • Displayed at the bottom-right corner of the page
  • Horizontal X
    • Input range: 0–100
    • Represents the percentage distance from the left or right edge of the page
  • Vertical Y
    • Input range: 0–100
    • Represents the percentage distance from the top or bottom edge of the page

💡 Notes

  • All style changes will take effect only after clicking Save
  • If the launcher does not appear on the storefront, please make sure:
    • Enable Floating Bubble is enabled
    • Rijoy Loyalty is enabled in the Shopify theme App embeds

Table of Contents

Feature Overview
Enable the Loyalty Panel on Your Storefront
Panel Style Settings
Navigation Path
1. Panel Background
2. Colors
Launcher Settings
2. Display Mode
3. Bubble Position
💡 Notes