> For the complete documentation index, see [llms.txt](https://magecomp.gitbook.io/shopify/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://magecomp.gitbook.io/shopify/apps/rewardo-loyaly-program/referral-programme.md).

# Referral Programme

The **Referral Program** allows you to reward both the **referrer** (existing customer) and the **referee** (new customer) when a successful referral is made. By offering rewards to both parties, you can encourage existing customers to invite friends while attracting new customers to your store.

#### Step #1 Enable the Referral Program

Use the **Enable/Disable** toggle to activate or deactivate the referral program.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FogeXXJiMCGc7BIs9PtPf%2Fimage.png?alt=media&amp;token=184095fe-4053-4101-9194-0870669d8793" alt=""><figcaption></figcaption></figure>

#### Step #2 Configure Referrer Rewards

Define the rewards given to the customer who shares the referral link.

You can configure:

* **Signup Reward Type** – Fixed Amount or Percentage.
* **Signup Reward** – Reward earned when the referred customer signs up.
* **First Order Reward Type** – Fixed Amount or Percentage.
* **First Order Reward** – Reward earned when the referred customer places their first order.

**Example:** Offer a **20% discount** when a friend signs up and an additional **$100 reward** after the friend completes their first purchase.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FxHzF1V0QiQ4veWD3Kdb2%2Fimage.png?alt=media&amp;token=413c00f5-c33c-4920-b82b-9be49ae5daf7" alt=""><figcaption></figcaption></figure>

#### Step #3 Configure Referee Rewards

Define the reward given to the new customer who joins using a referral link.

You can configure:

* **Signup Reward Type** – Fixed Amount or Percentage.
* **Signup Reward** – Reward granted immediately after the new customer creates an account.

**Example:** Offer a **$100 discount** to every new customer who signs up through a referral link.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FyFmyvesBleX3gA3BoCT0%2Fimage.png?alt=media&amp;token=396e2051-09b7-4379-bccc-a030494ce3f0" alt=""><figcaption></figcaption></figure>

#### How the Referral Program Works

1. An existing customer shares their unique referral link.
2. A new customer opens the link and signs up.
3. The **referee** receives the configured signup reward.
4. The **referrer** receives the signup reward (if enabled).
5. When the referee places their **first order**, the referrer receives the configured first-order reward.

**Example:**

* John shares his referral link with Emma.
* Emma signs up and receives a **$100 discount**.
* John earns a **20% discount** for the successful signup.
* After Emma places her first order, John receives an additional **$100 reward**.

This reward structure motivates both customers to participate, helping you grow your customer base and increase repeat purchases.

## Referral Widget Customization

The **Referral Customization** section lets you personalize the customer-facing referral experience to match your store's branding.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FjEbyoVdt3JTfOVdl2LGF%2Fimage.png?alt=media&amp;token=55bfd7ae-7f80-4c9d-ade2-a865740b83a5" alt=""><figcaption></figcaption></figure>

#### Referral Page

The **Referral Page** is a dedicated page where logged-in customers can view their referral rewards, generate their unique referral link, copy it, and share it with friends via email, social media, or messaging apps.

**Example:** A customer visits the Referral Page, copies their referral link, and shares it with friends to earn rewards whenever someone signs up or places their first order.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F5PiHejVRHFE8H3ztK4r9%2Fimage.png?alt=media&amp;token=35fc2721-99e3-436b-92e2-73cd1b80a3e4" alt=""><figcaption></figcaption></figure>

#### Referral Pop-up

The **Referral Pop-up** is displayed when a customer opens a referral link. It introduces the referral offer, explains the available rewards, and encourages the visitor to sign up using the referral.

**Example:** A customer clicks a friend's referral link and sees a popup stating, *"Sign up today and get $100 off your first purchase."*

You can customize the text, colors, fonts, buttons, and layout of both the Referral Page and Referral Pop-up to provide a consistent brand experience.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2Fioki9rl4gJJwK08d7pf2%2Fimage.png?alt=media&amp;token=60ada543-2812-4feb-9bc1-65b4fb815117" alt=""><figcaption></figcaption></figure>

## Loyalty Widget Customization

The **Loyalty Customization** section allows you to customize every loyalty widget shown to customers across your store.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FXJFzwvOh2ij0LWegxNYH%2Fimage.png?alt=media&amp;token=9e780203-9ee1-4771-b2a8-3c457800548c" alt=""><figcaption></figcaption></figure>

### <mark style="color:$primary;">Widget</mark>

Customize the floating loyalty widget that gives customers quick access to their points, rewards, referral program, and loyalty activities from any page.

The **Loyalty Widget Customization** section lets you personalize the loyalty widget to match your store's branding. You can customize its theme, colors, layout, fonts, icons, and content, with changes reflected instantly in the live preview.

#### Step #1 Choose a Theme

Select a predefined theme or create your own using custom colors and backgrounds.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F3xmSs95zsu0mcskYJ5Ax%2Fimage.png?alt=media&amp;token=a1bd935c-8701-4781-9c34-64c55de73dd9" alt=""><figcaption></figcaption></figure>

#### Step #2 Customize Widget Appearance

Configure:

* Widget Background (Image, Solid Color, or Gradient)
* Background Colors
* Title & Subtitle Color
* Balance Card Icons

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FHeuKhImOI6JwWcQBctzP%2Fimage.png?alt=media&amp;token=04e1ec8b-dc19-4c91-80fe-dc9a0ec17b1f" alt=""><figcaption></figcaption></figure>

#### Step #3 Configure Layout

Choose the widget's:

* Type (Compact or Full Height)
* Position (Bottom Left, Bottom Right, or Center)
* Launcher Button Type (Icon or Icon + Label)
* Launcher Icon

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F4oz3C2zaGMiCpnJb2RnE%2Fimage.png?alt=media&amp;token=284386e8-ed2d-4b6d-85b2-db8f905b0066" alt=""><figcaption></figcaption></figure>

#### Step #4 Customize Content

Edit the text displayed in the widget, including:

* Welcome Title & Subtitle (supports {{store\_name}}
* Login/Signup Card
* Rewards Card
* Referral Program Card
* Copy Button Label
* Launcher Button Label

Use {{referralreward}} to automatically display referral rewards.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FvsDmcXKCjE0frhMoxuIh%2Fimage.png?alt=media&amp;token=0378060a-4711-4a98-801c-8665022adda6" alt=""><figcaption></figcaption></figure>

#### Step #5 Customize Font

Choose your store's default font or apply a custom font to the widget.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FcTzmemNEiDsGGxFBp5w9%2Fimage.png?alt=media&amp;token=ce5f8f2f-fca7-4814-bbd0-437eb4b6996e" alt=""><figcaption></figcaption></figure>

#### Step #6 Preview & Save

Review the live preview and click **Save** to apply your changes.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FXl5ukv8kOBmPo6Hndjgx%2Fimage.png?alt=media&amp;token=c0b12f8e-c79c-41fe-bf10-e84fc76ffae1" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Note:** The same customization options are available for the **Loyalty Page**, **Cart Page Redeem Card**, **Sign-up Pop-up**, **First Order Pop-up**, **Newsletter Pop-up**, **Referral Page**, and **Referral Pop-up** to maintain consistent branding across your loyalty program.
{% endhint %}

### <mark style="color:$primary;">Loyalty Page Customization</mark>

The **Loyalty Page Customization** section allows you to customize the layout and visibility of different sections on your loyalty page. You can show or hide sections, rearrange their order using drag-and-drop, and preview the changes in real time.

#### Step #1: Open the Loyalty Page Editor

Navigate to **Customization** → **Loyalty Page** to open the page editor.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FIQV8u1kVDhHsdV3tbZiZ%2Fimage.png?alt=media&amp;token=f90f5ad9-3b65-4869-b0e5-010cdd0c2f7e" alt=""><figcaption></figcaption></figure>

#### Step #2: Manage Page Sections

You can customize the following sections:

* Hero Section
* How It Works Section
* Rewards Section
* Subscribe Newsletter Section
* Referral Section
* Balance Section
* Redeem Rewards Section

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FHnWVVNDDuQCL0SXhS4CM%2Fimage.png?alt=media&amp;token=6969eb16-7a99-4e18-902f-572909ec0087" alt=""><figcaption></figcaption></figure>

#### Step #3: Reorder or Show/Hide Sections

* **Drag and drop** sections to change their display order.
* Click the **Eye** icon to show or hide a section without deleting it.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FwhmTBbUrRO3A5co499PY%2Fimage.png?alt=media&amp;token=c78a7338-2585-4f4c-8fea-5a03b2039c63" alt=""><figcaption></figcaption></figure>

#### Step #4: Preview the Layout

Use the live preview to see how the loyalty page will appear on desktop or mobile before publishing.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FO6woIm14M9xyuhRLArsG%2Fimage.png?alt=media&amp;token=baa9ea91-47d3-44ce-ab72-460a477a7033" alt=""><figcaption></figcaption></figure>

#### Step #5: Save Changes

Once you're satisfied with the layout, click **Save** to apply your changes.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FcWaD5Nhw1tmLmUhLgOTf%2Fimage.png?alt=media&amp;token=032ba2c4-2816-4e3a-890d-e9e2d6b20dd6" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Note:** You can rearrange or hide any section at any time to create a loyalty page that best suits your store and customer experience.
{% endhint %}

### <mark style="color:$primary;">Cart Page Redeem Card</mark>

The **Cart Page Redeem Card Customization** section allows you to personalize the reward redemption card displayed on the Shopify cart page. You can customize its theme, colors, fonts, styling, and text to match your store's branding.

#### Step #1 Choose a Theme

Select one of the available predefined themes:

* Just White
* White Truffle
* Black Truffle
* Cyberpunk
* Funky

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FdAdyIIX1n8j6w3v8lAGI%2Fimage.png?alt=media&amp;token=748d04a2-9efe-40d1-94ed-844079f80da5" alt=""><figcaption></figcaption></figure>

#### Step #2 Customize Theme Colors

Personalize the card's appearance by configuring:

* Background Color
* Border Color
* Text Color
* Icon Color
* Card Inner Box Color
* Link Color
* Description Color

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F1XVBSZ1JB6ni6Cs8B5fr%2Fimage.png?alt=media&amp;token=c9dd8c71-ce48-447e-b2b7-63ed4c91b37f" alt=""><figcaption></figcaption></figure>

#### Step #3 Customize Style

Adjust the overall design of the card by setting:

* Corner Radius
* Border Weight

#### Step #4 Customize Font

Choose to use your store's **Default Font** or apply a **Custom Font**.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FV29z2JyXjC3i3HZbCCFM%2Fimage.png?alt=media&amp;token=e782b256-255d-4c8f-9203-3e3dafa64976" alt=""><figcaption></figcaption></figure>

#### Step #5 Edit Card Content

Customize the text displayed on the redeem card, including:

* **Card Title**
* **Generate Button Text**
* **Discount Input Helper Text**

**Example:** Change the title to **"Available Rewards"**, the button text to **"Redeem Now"**, and the helper text to **"Enter the amount you want to redeem."**

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FWTin2SzDAkgWfgVgedsO%2Fimage.png?alt=media&amp;token=b3e841fb-8b7f-415f-8639-77aa7b5d210a" alt=""><figcaption></figcaption></figure>

#### Step #6 Preview & Save

Review your changes in the live preview and click **Save** to apply them.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FnvzP2BHCjmRVCw1u8iUC%2Fimage.png?alt=media&amp;token=36a51519-b7a6-41d3-8602-75a0377b7695" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Note:** The customized redeem card will appear on your cart page, allowing customers to redeem their available loyalty rewards before checkout.
{% endhint %}

### <mark style="color:$primary;">Sign-up Pop-up Customization</mark>

The **Sign-up Pop-up Customization** section allows you to personalize the popup displayed to visitors, encouraging them to join your loyalty program and create an account. You can customize its theme, colors, layout, behavior, illustration, fonts, and text to match your store's branding.

#### Step #1 Choose a Theme

Select one of the available themes:

* Just White
* Black Traffic
* Cyberpunk
* Funky

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FKe4GcH5jTkKkfJ6JC8cD%2Fimage.png?alt=media&amp;token=4a760921-02cb-4794-9a11-fcc02808c3f6" alt=""><figcaption></figcaption></figure>

#### Step #2 Customize the Pop-up Appearance

Configure the popup's colors to match your brand:

* Background Color
* Title Color
* Subtitle Color
* Button Background
* Button Border
* Button Text Color
* Close Button Color
* Close Button Icon Color

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FpDhlVOHXmJqKQYQIzrIn%2Fimage.png?alt=media&amp;token=9aa4259a-8077-4182-937f-7ec1449c19f4" alt=""><figcaption></figcaption></figure>

#### Step #3 Customize Style & Behavior

Adjust the popup's appearance and display settings:

* Button Corner Radius
* Button Border Weight
* Popup Corner Radius
* Popup Direction (Horizontal or Vertical)
* Popup Behavior (Automatic or Launcher Button)
* Auto-open Delay

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FxrEauTezEzQXBEOTitij%2Fimage.png?alt=media&amp;token=ce6ce5e0-8560-4ef8-992a-a1c299a57f1b" alt=""><figcaption></figcaption></figure>

#### Step #4 Choose an Illustration

Select one of the available illustrations or upload a custom illustration to make the popup more engaging.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F6aQiv4JUv0izWF8AlzuE%2Fimage.png?alt=media&amp;token=4882bde4-b9dd-41ee-adaa-c3b4535cb04c" alt=""><figcaption></figcaption></figure>

#### Step #5 Customize Font & Content

Choose your store's **Default Font** or a **Custom Font**, then edit:

* Pop-up Title
* Subtitle *(supports {{rewardAmount}} to display the configured reward automatically)*
* Join Now Button Text

**Example:** Set the subtitle to **"Sign up today and unlock {{rewardAmount}} cashback on your account."**

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F0YWpT8PVAvVOexEuuidC%2Fimage.png?alt=media&amp;token=68b85c48-9982-4074-a0b2-14eec318086a" alt=""><figcaption></figcaption></figure>

#### Step #6 Preview & Save

Review the live preview and click **Save** to apply your changes.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FCl1WI4UiQXzu8ieZvdxM%2Fimage.png?alt=media&amp;token=923131de-a0de-44b9-8196-a75b7022c4d4" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Note:** The same customization options are available for the **First Order Pop-up**, **Newsletter Pop-up**, and **Referral Pop-up**, allowing you to maintain a consistent design across all promotional pop-ups.
{% endhint %}

### <mark style="color:$primary;">First Order Pop-up Customization</mark>

The **First Order Pop-up Customization** section allows you to personalize the pop-up displayed to encourage customers to place their first order and earn a reward. You can customize its theme, colors, input fields, layout, behavior, and content to match your store's branding.

#### Step #1 Choose a Theme

Select one of the available themes:

* Just White
* Blush Traffic
* Cyberpunk
* Funky

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F1hjP7FyKQd6D9VriHqlM%2Fimage.png?alt=media&amp;token=57b44056-765e-41f3-a2e4-434965578164" alt=""><figcaption></figcaption></figure>

#### Step #2 Customize the Pop-up Appearance

Configure the pop-up colors, including:

* Background
* Title
* Subtitle
* Input Label
* Input Border
* Input Background
* Button Background
* Button Border
* Button Text
* Close Button
* Close Button Icon

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FlozI4TjAerQm5MzKpUYr%2Fimage.png?alt=media&amp;token=16d7e842-2dec-4ce4-b445-6206b67120ca" alt=""><figcaption></figcaption></figure>

#### Step #3 Customize Style & Behavior

Adjust the popup's appearance and display settings:

* Button Corner Radius
* Button Border Weight
* Input Corner Radius
* Input Border Weight
* Popup Corner Radius
* Popup Direction (Horizontal or Vertical)
* Popup Behavior (Automatic or Launcher Button)
* Auto-open Delay

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F5URq2aKFauzheoMWK9n3%2Fimage.png?alt=media&amp;token=e0324a21-693c-451d-b8e9-92a55443f276" alt=""><figcaption></figcaption></figure>

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FhuMuEmnKOEIdy7AcSIir%2Fimage.png?alt=media&amp;token=f0cbd20b-b96d-4f16-b49b-fb2a011dcb23" alt=""><figcaption></figcaption></figure>

#### Step #4 Choose an Illustration

Select one of the available illustrations or upload a custom illustration to display in the popup. This helps make the popup more engaging and aligned with your brand.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2Fz5WI5UKYhGtzAhOO6xja%2Fimage.png?alt=media&amp;token=82185e17-24ee-4c1a-9c19-1118477e5955" alt=""><figcaption></figcaption></figure>

#### Step #5 Customize Font

Choose whether to use your store's **Default Font** or apply a **Custom Font**. By default, the popup inherits the font from your Shopify theme to maintain a consistent look across your store.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2Fi1C4rxWaCkx2XT3Kj2jt%2Fimage.png?alt=media&amp;token=ab68aa0f-229f-4771-a2d2-d19836dff9d3" alt=""><figcaption></figcaption></figure>

Then continue with:

#### Step #6 Customize Content

Edit the popup text, including:

* Title
* Subtitle *(supports {{rewardAmount}} to display the configured reward automatically)*
* Email Input Label
* Phone Number Input Label
* Claim Reward Button Text

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FyknHDoOPl9vOjvo7mn2Q%2Fimage.png?alt=media&amp;token=b8aaef98-13ec-464d-9dc7-748cf34fe9c1" alt=""><figcaption></figcaption></figure>

#### Step #7 Preview & Save

Review the live preview and click **Save** to apply your changes.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FbFO6RKwL6FOJHOzKrv75%2Fimage.png?alt=media&amp;token=88cd8fef-65b7-4584-ae7f-b6d18435d251" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Note:** The same customization options are available for the **Sign-up Pop-up**, **Newsletter Pop-up**, and **Referral Pop-up**, allowing you to maintain a consistent look and feel across all promotional popups.
{% endhint %}

### <mark style="color:$primary;">Newsletter Pop-up Customization</mark>

The **Newsletter Pop-up Customization** section allows you to personalize the popup displayed to encourage customers to subscribe to your newsletter in exchange for loyalty rewards. You can customize its theme, colors, layout, behavior, illustration, fonts, and content to match your store's branding.

#### Step #1 Choose a Theme

Select one of the available themes:

* Just White
* Black Traffic
* Cyberpunk
* Funky

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FMgDFKPUi3g1blTW7pJwB%2Fimage.png?alt=media&amp;token=77988660-bf40-4dfb-9067-c3330f8d4dde" alt=""><figcaption></figcaption></figure>

#### Step #2 Customize the Pop-up Appearance

Configure the popup colors, including:

* Background
* Title
* Subtitle
* Input Label
* Input Border
* Input Background
* Button Background
* Button Border
* Button Text
* Close Button
* Close Button Icon

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FJuwEsgFgbDxRXaDhyWJP%2Fimage.png?alt=media&amp;token=97689f09-106f-4c49-bca4-ecd4ed639ef0" alt=""><figcaption></figcaption></figure>

#### Step #3 Customize Style & Behavior

Adjust the popup's appearance and display settings:

* Button Corner Radius
* Button Border Weight
* Input Corner Radius
* Input Border Weight
* Popup Corner Radius
* Popup Direction (Horizontal or Vertical)
* Popup Position (Left, Middle, or Right)
* Popup Behavior (Automatic, Launcher Button, or Both)
* Auto-open Delay

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2Ft76b37N2Hpk1qRhTagcc%2Fimage.png?alt=media&amp;token=2a48923a-47f4-441c-a641-7f2b2392d3e1" alt=""><figcaption></figcaption></figure>

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FsLS8BG0Ja18v3joglEec%2Fimage.png?alt=media&amp;token=ed0dfc62-0b39-4ec4-8298-fce79e52a5f6" alt=""><figcaption></figcaption></figure>

#### Step #4 Choose an Illustration

Select one of the available illustrations or upload a custom illustration to make the popup more engaging and visually appealing.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FyWy8nfExXCDr3mmo3rgw%2Fimage.png?alt=media&amp;token=81651160-8627-4aa3-b89c-2502a5e6a70e" alt=""><figcaption></figcaption></figure>

#### Step #5 Customize Font

Choose whether to use your store's **Default Font** or apply a **Custom Font**. By default, the popup uses your Shopify theme's font for a consistent look.

#### Step #6 Customize Content

Edit the text displayed in the popup, including:

* Title
* Subtitle
* Email Input Label
* Subscribe Button Text
* Launcher Button Text

**Example:** Set the title to **"Subscribe to our Newsletter"** and the launcher button text to **"Get Reward"** to encourage visitors to subscribe.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FQ680WAqBMv48wXNOD8Ug%2Fimage.png?alt=media&amp;token=85eb8595-717e-49be-a314-5cee8b85d8dd" alt=""><figcaption></figcaption></figure>

#### Step #7 Preview & Save

Review the live preview and click **Save** to apply your changes.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FLO37w5ixyTX6aQo5uvGi%2Fimage.png?alt=media&amp;token=3ccf8f8d-ec4f-4f11-86b9-984d5e1a90f6" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Note:** Your customized newsletter pop-up will appear according to the selected display behavior and encourage visitors to subscribe before earning loyalty rewards.
{% endhint %}

### <mark style="color:$primary;">Reward Notify Banner</mark>

The **Reward Notify Banner** allows the admin to customize a notification banner that informs customers about rewards they have earned and can claim.

#### Steps to configure the Reward Notify Banner

**Step 1: Open Display Customization**

1. Open **Rewardo Loyalty Program** from the Shopify Admin.
2. Go to **Display Customization**.
3. Select **Reward Notify Banner**.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FFbgRkl5EXt8NsZBMym3w%2Fimage.png?alt=media&amp;token=93e6c216-db62-4d84-ba13-8e61c3d97932" alt=""><figcaption></figcaption></figure>

**Step 2: Enable the Banner**

At the top-right of the page, turn on the **Enable** toggle.

When enabled, the Reward Notify Banner can be displayed on the storefront.

> **Important:** The screenshot shows a message stating that the **Place Order loyalty program must be activated first**. Activate the Place Order loyalty program before expecting this banner to appear on the store.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FkjykmHjMLLIXJeFfctZG%2Fimage.png?alt=media&amp;token=4ea8da99-4c82-470f-8ff8-66917918d34d" alt=""><figcaption></figcaption></figure>

**Step 3: Customize the Theme and Style**

Click **Theme and style** to customize the appearance of the notification banner.

The available settings shown in the screenshot include:

* **Default Themes**
  * Just white
  * White Truffle
  * Black Truffle
  * Cyberpunk
  * Funky

Select a predefined theme if you want to quickly apply a ready-made design.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FYdw7uekkWoHg5vMzQOSy%2Fimage.png?alt=media&amp;token=46451f26-0dbd-44ab-bc58-51f01f6fc9fe" alt=""><figcaption></figcaption></figure>

**Step 4: Customize Colors**

Under **Theme**, you can customize the banner's:

* **Background color**
* **Border color**
* **Title color**
* **Subtitle color**
* **Icon color**
* **Icon icon/background-related setting shown in the interface**

This allows the banner to match the store's branding.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FyVBx6Ed3WBNYEFPBgkMs%2Fimage.png?alt=media&amp;token=3124c09c-aa96-4af8-8587-f619febce08e" alt=""><figcaption></figcaption></figure>

**Step 5: Choose the Banner Icon**

Under **Banner Icon**, select an icon that will appear with the reward notification.

The screenshot provides multiple icon options, along with an upload option.

Choose the icon that best matches the store's design.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FneVgvIptp7RlxKPsIuG6%2Fimage.png?alt=media&amp;token=f65f981a-83be-4385-90d3-7fc266874283" alt=""><figcaption></figcaption></figure>

**Step 6: Adjust the Banner Style**

Under **Style**, configure:

* **Corner radius** – controls how rounded the banner corners are.
* **Border weight** – controls the thickness of the banner border.

Adjust these values to achieve the desired appearance.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FKpntor9ft9DQ1rYcKG6B%2Fimage.png?alt=media&amp;token=a21e88ad-26a7-4778-ae1e-890252a2cd4a" alt=""><figcaption></figcaption></figure>

**Step 7: Select the Banner Position**

Under **Position**, choose where the notification should appear:

* **Left**
* **Right**

The interface indicates that the banner appears in a widget corner.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F21MhB58gzo5PANqLEXBt%2Fimage.png?alt=media&amp;token=e799afc6-a165-400d-a873-472d9a0121dc" alt=""><figcaption></figcaption></figure>

**Step 8: Select the Font**

Under **Font**, choose between:

* **Default Font** – uses the default font from the Shopify theme.
* **Customize Font** – allows the admin to customize the font.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FVjk8Lj7BhOvOqZg9a7pM%2Fimage.png?alt=media&amp;token=8aa2b975-6fbe-4d1e-adaa-7b4b859777fc" alt=""><figcaption></figcaption></figure>

**Step 9: Configure Pop-up Behavior**

Under **Pop-up behavior**, configure the delay before the popup automatically opens.

The screenshot shows:

* **Automatic Pop Delay**
* A value in **seconds**

For example, if the delay is set to `5 seconds`, the popup will automatically open after the specified delay.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FlWKRN5JmVkpoO6xzGD5n%2Fimage.png?alt=media&amp;token=d74cc834-941c-4b84-a740-0f708f66a405" alt=""><figcaption></figcaption></figure>

**Step 10: Customize the Banner Content**

Click **Content and translations**.

Here you can customize:

* **Title**
* **Subtitle**

The screenshot uses:

**Title:**\
`Product added to cart`

**Subtitle:**\
`Checkout now and get {{rewardAmount}}`

The `{{rewardAmount}}` value is dynamic and allows the reward amount to be displayed automatically.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FgNsXkgdx8QxjuI8HIreO%2Fimage.png?alt=media&amp;token=584726f7-7857-4ef8-946e-3a0418aa4195" alt=""><figcaption></figcaption></figure>

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FPMOk7RYvPYjNxvMVe0Ey%2Fimage.png?alt=media&amp;token=0e9f2bab-d837-41b1-a777-9536c43ebc43" alt=""><figcaption></figcaption></figure>

**Step 11: Check the Preview**

Use the **Reward notify banner Preview** section to see how the notification will appear.

The preview also provides display options for checking the banner in different storefront views.

Review the banner before saving.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2Fcu3P2jmHMQsbalvJSdpu%2Fimage.png?alt=media&amp;token=0f504238-f441-4b40-ab75-9eb205818d17" alt=""><figcaption></figcaption></figure>

**Step 12: Save the Changes**

After completing the customization, click **Save**.

If you do not want to keep the changes, click **Discard**.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FS6t2jXldiEWgbY0XCwq3%2Fimage.png?alt=media&amp;token=81a8ce9e-c96f-49b1-bda4-110a0f6732c2" alt=""><figcaption></figcaption></figure>

## Product Page Banner

The **Product Page Banner** allows the admin to show customers the reward they can earn by purchasing a product. This helps customers understand the potential reward before completing their purchase.

Rewardo supports purchase rewards as part of its loyalty functionality.

#### Steps to configure the Product Page Banner

**Step 1: Open Display Customization**

1. Open **Rewardo Loyalty Program** from Shopify Admin.
2. Go to **Display Customization**.
3. Select **Product Page Banner**.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FHZsQvYQw1T0QrD8nEt1Z%2Fimage.png?alt=media&amp;token=2c378f8d-f4c0-476b-aa0b-dcc5bf47b445" alt=""><figcaption></figcaption></figure>

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FWNTfI6pf9fa8Hhf2WAEH%2Fimage.png?alt=media&amp;token=0750f00a-2b21-4064-900b-3e5db0cd3242" alt=""><figcaption></figcaption></figure>

**Step 2: Enable the Banner**

Turn on the **Enable** toggle at the top-right.

Once enabled, the Product Page Banner can be displayed on product pages.

The screenshot also shows the same important activation message:

> **First activate the Place Order loyalty program, and then this banner will show on your store.**

Therefore, make sure the **Place Order loyalty program is active** before testing the banner on the storefront.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FhCLMYDjGPMHHyyRhIIOC%2Fimage.png?alt=media&amp;token=73e60ce1-3cff-405e-8677-0cad07432deb" alt=""><figcaption></figcaption></figure>

**Step 3: Customize the Theme and Style**

Click **Theme and style**.

You can select one of the predefined themes:

* Just white
* White Truffle
* Black Truffle
* Cyberpunk
* Funky

Alternatively, customize the appearance manually.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2Fki35Wx1wW1Xo76dFJfXo%2Fimage.png?alt=media&amp;token=c3373bee-c40a-408a-af67-54d23fcefe63" alt=""><figcaption></figcaption></figure>

**Step 4: Customize the Banner Colors**

The screenshot provides options for:

* **Background color**
* **Border color**
* **Text color**
* **Icon color**
* **Icon container**

Use these settings to match the banner with your Shopify store's branding.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FwFiah6RfVvMYTon0retk%2Fimage.png?alt=media&amp;token=50f68eb7-3a3c-4ef8-8fd3-c6e9ade844cf" alt=""><figcaption></figcaption></figure>

**Step 5: Configure the Banner Style**

Under **Style**, configure:

* **Corner radius** – controls the roundness of the banner corners.
* **Border weight** – controls the thickness of the banner border.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FL8fTz4dvzY7dA236PSx0%2Fimage.png?alt=media&amp;token=ed8d34ed-357b-4dc6-a3a5-af4555ef882a" alt=""><figcaption></figcaption></figure>

**Step 6: Choose an Icon**

Under **Choose Icon**, select the icon that should appear on the Product Page Banner.

Several predefined icons are available, so select the one that best fits the store's design.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2Fo7iorJ1ji9dZiqcZPPTT%2Fimage.png?alt=media&amp;token=2ad79ac7-1cea-46b9-8018-49ae20e803b0" alt=""><figcaption></figcaption></figure>

**Step 7: Configure the Font**

Under **Font**, choose:

* **Default Font** – uses the font from the Shopify theme.
* **Customize Font** – allows you to customize the banner font.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FaH5AmuCSDjPoGc7Kmy28%2Fimage.png?alt=media&amp;token=9a778625-a3d2-49cb-aedb-8d5f104721e1" alt=""><figcaption></figcaption></figure>

**Step 8: Customize the Product Banner Content**

Go to **Content and translations**.

The screenshot provides two fields under **Banner Content**:

#### Title

Enter the message that customers should see regarding the reward.

The screenshot shows a dynamic example similar to:

`Get {{reward}} for this purchase for the orders above {{minimumOrderAmount}}`

The available dynamic values shown in the interface can be used so that the banner automatically displays the applicable reward/order information.

#### Description

Enter a short supporting message.

The screenshot example is:

`Cashback is redeemable in the checkout page`

Use this field to explain how or where the customer can use the reward.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FEvZPlvtUU0MM2AhZCTsn%2Fimage.png?alt=media&amp;token=ae125d92-a789-45a4-be62-e440d926b77f" alt=""><figcaption></figcaption></figure>

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FYG7oXV2U6lLDnNCOoJ5T%2Fimage.png?alt=media&amp;token=48423c1d-d4e7-49f6-a52d-64af539fc2ae" alt=""><figcaption></figcaption></figure>

**Step 9: Check the Preview**

The **Product page banner preview** shows how the banner will appear to customers.

The preview example displays a message such as:

> `Get $10 for this purchase for the orders above $0`

with supporting text explaining that the cashback is redeemable at checkout.

The screenshot also indicates that the preview uses an example order value, so the displayed amount in the preview should be treated as an example rather than a customer's actual reward.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F8DvnA6hJWJUfeh2rCGrW%2Fimage.png?alt=media&amp;token=e01e714f-8551-48c6-9656-cec031c6ccaf" alt=""><figcaption></figcaption></figure>

**Step 10: Save the Changes**

After reviewing the banner:

1. Check the title and description.
2. Check the theme and colors.
3. Check the icon and font.
4. Review the preview.
5. Click **Save**.

Click **Discard** if you want to cancel the changes.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FLM28Y1eRVppF3dq3Y8XC%2Fimage.png?alt=media&amp;token=4e828a04-5f8e-4f6e-a105-b70885e130c0" alt=""><figcaption></figcaption></figure>

#### Key difference between the two banners

| Feature                        | Reward Notify Banner                                         | Product Page Banner                                               |
| ------------------------------ | ------------------------------------------------------------ | ----------------------------------------------------------------- |
| Main purpose                   | Notifies customers about rewards they have earned/can claim  | Shows customers what reward they can earn from a product purchase |
| Main location                  | Storefront notification/widget                               | Product page                                                      |
| Content                        | Reward notification title + subtitle                         | Reward message + description                                      |
| Customization                  | Theme, colors, icon, position, font, popup behavior, content | Theme, colors, icon, font, content                                |
| Dependency shown in screenshot | Place Order loyalty program must be activated                | Place Order loyalty program must be activated                     |

So, in simple terms: **Reward Notify Banner communicates the reward notification, while Product Page Banner promotes the reward customers can earn before they purchase.** Both are configured from **Display Customization** in Rewardo.