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

# Rewards Landing Page

> A dedicated loyalty page on your storefront, built from seven Yuko theme blocks, that explains how to join, earn, redeem, reach VIP tiers and become a member.

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

## Introduction

The Rewards Landing Page is the public home of your loyalty program. Yuko creates a Shopify page for it, and you build the page from seven **Yuko** theme blocks: Hero Banner, How It Works, Ways to Earn, Ways to Redeem, VIP Tiers, Membership and FAQ.

You write the text in Yuko and style each block in the Shopify theme editor. The widget is marked **Recommended** on the Widgets list.

## What problem this solves

Emails, ads, social posts and footer links need somewhere to send people. The landing page explains the program in one place, before customers reach the cart.

## Where it appears

* A Shopify page titled **Loyalty Program** at `/pages/loyalty-info-page`, created by Yuko.
* Any other page or template where you add the Yuko landing page blocks in the theme editor.

## When to use

* You link to your loyalty program from emails, ads or your site footer.
* You want one page that covers joining, earning, redeeming, VIP tiers, membership and FAQs.

## Overview

* **Seven theme blocks**, each with its own colours, sizes and **Custom CSS** in the theme editor.
* **Separate hero text** for visitors (**Anonymous**) and logged-in customers (**When customer is authenticated**).
* **Automatic content:** earn rules, rewards, VIP tiers and membership plans come from your live Yuko setup.
* **FAQ editor:** add, remove and reorder questions and answers.
* **Add Block** buttons that open the theme editor with the right block ready to add.
* **Per-language text:** use the **Editing language** picker.

## 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

### 1. Create the page

<Steps>
  <Step title="Open the widget">
    Go to **Apps → Yuko Loyalty → Loyalty → Widgets** and click **Customize** on **Rewards Landing Page**.
  </Step>

  <Step title="Create the landing page">
    The first time you open the widget, Yuko asks **Are you sure you want to create a landing page?** Click **Create**. Yuko creates a published Shopify page titled **Loyalty Program** with the handle `loyalty-info-page`. If a page with that handle already exists, Yuko uses it.
  </Step>
</Steps>

<Tip>
  If you delete the page in Shopify, click **Check landing page** next to the widget's status badge. Yuko confirms whether the page is still there, and offers to create it again the next time you open the widget.
</Tip>

### 2. Write the content in Yuko

Each section below matches one theme block. Expand a section to edit its text.

| Section | What you set |
| - | - |
| **Hero Section** | **Anonymous**: title (default *Join Our Rewards Program*), description, join button (*Join Now*) and sign-in button (*Sign In*). **When customer is authenticated**: title (*Welcome Back!*), description, and two buttons (*Earn `[points_label]`* and *Redeem Rewards*). |
| **How It Works** | Section title (default *How It Works*) and the title and description for three steps (*Sign up*, *Earn*, *Redeem*). |
| **Ways to Earn Points** | Title (default *Ways to Earn `[points_label]`*), description and **Ways to earn — order** (**Booster campaigns first** by default, or **Standard campaigns first**). |
| **Ways to Redeem Points** | Title (default *Ways to Redeem `[points_label]`*) and description. |
| **VIP Tiers** | Title, description, **Current tier badge text** (default *Current tier*) and **Points multiplier benefit text** (`[multiplier_value]x multiplier`, shown when the multiplier is greater than 1). |
| **Paid membership block** | **Title** (default *Become a member & save*), **Benefits title** (*Benefits:*), **Join button** (*Join the club*), and under **Pricing labels**, **Monthly interval label** (*month*) and **Yearly interval label** (*year*). |
| **FAQ Section** | **Section Title** (default *Frequently Asked Questions*), **Section Description**, and **FAQ Items**, each with a **Question** and **Answer**. Add items with **Add FAQ Item**, drag to reorder and remove with the delete button. At least one item is required. |
| **General Settings** | **Logged-in User Redirect URL**: where logged-in customers go when they click a campaign or reward card. Leave it empty to use the default customer account page. |

Click **Save**, then switch the widget on.

### 3. Add the blocks to the page

<Steps>
  <Step title="Click Add Block">
    Each section in the editor has an **Add Block** button. It opens the Shopify theme editor on `/pages/loyalty-info-page` with that Yuko block ready to add.
  </Step>

  <Step title="Place and style the block">
    Drop the block into a section, then adjust its settings in the theme editor sidebar (see below).
  </Step>

  <Step title="Repeat and save">
    Add the remaining blocks in the order you want them on the page and click **Save** in the theme editor.
  </Step>
</Steps>

<Info>
  The page uses your theme's page template. If other pages share that template, the blocks appear on them too. To avoid this, create a dedicated page template in your theme, assign it to the **Loyalty Program** page in **Online Store → Pages**, and add the blocks there.
</Info>

## Theme block settings

Every block has a **Custom CSS** field. Colours and sizes are set per block in the theme editor.

| Block | Theme editor settings |
| - | - |
| **Yuko: Hero Banner** | **Background & Colors**: Background Color, Background Image (Desktop), Background Image (Mobile), Background Image Brightness, Card Background, Card Heading and Card Text. **Layout**: Card Position (Left/Center/Right), Card Vertical Position (Top/Center/Bottom), Text Alignment, Card Spacing and Button Alignment. **Buttons**: primary and secondary button background and text colours. **Desktop** and **Mobile**: Section Height, Section Padding, Heading Size and Text Size, plus a mobile **Card Position** (**Below Hero Banner** or **Over Hero Banner**). |
| **Yuko: How It Works** | **Colors**: Background, Heading and Text. **Steps**: **Steps Type** (**Numbers** or **Images**), Step 1–3 Image, Number, Step Heading and Step Text colours, Number Size, Step Heading Size, Step Text Size and Step Image Height. |
| **Yuko: Ways to Earn** | **Campaign Ordering** (**Ordering Ascending**, **Ordering Descending** or **Recent First**). Background colour and image, Heading and Text colours. **Campaign Cards**: Card Background, Card Border and Card Spacing. **Campaign Text** and **Campaign Icons**: colours and sizes. **Join Button**: background and text colours. |
| **Yuko: Ways to Redeem** | **Reward Ordering** (**Ordering Ascending**, **Ordering Descending** or **Recent First**), plus the same colour, card, text, icon and **Join Button** settings as Ways to Earn. |
| **Yuko: VIP Tiers** | Background colour and image, Heading and Text. **Tier Cards**: Card Background (Regular Tiers). **Current Tier**: Card Background, Border Color, Badge Background and Badge Text Color. **Tier Text**: tier name and description colours and sizes. **Benefits**: Benefit Text Color and Size, Tick Icon Size and Benefit Item Gap. |
| **Yuko: Membership** | Section Background. **Card Styles**: Image, Image Background, Card background color, Section Radius, Title Text Color and Body Text Color. **Button Styles**: Button Color, Button Border Color, Button Text Color and Button Radius. |
| **Yuko: FAQ** | Background Color, Heading Color, Question Color, Answer Color and Border Color. |

## How it works

1. Yuko creates the **Loyalty Program** page at `/pages/loyalty-info-page`.
2. You add Yuko blocks to the page in the theme editor. The **Yuko App** embed loads the scripts that fill them.
3. The blocks pull your live earn rules, rewards, VIP tiers and membership plans from Yuko, so the page stays up to date.
4. Visitors see the **Anonymous** hero with join and sign-in buttons. Logged-in customers see the authenticated hero.
5. When a logged-in customer clicks a campaign or reward card, they go to the **Logged-in User Redirect URL**, or to the customer account page if it's empty.

## Examples

* **Email destination:** link your welcome email's "See how it works" button to `/pages/loyalty-info-page`.
* **Footer link:** add a "Rewards" link in your footer menu that points to the landing page.
* **Short page:** use only Hero Banner, Ways to Earn and Ways to Redeem for a quick overview.

## Best practices

<Tip>**Lead with the hero.** Put the Hero Banner first so visitors see the join button straight away.</Tip>
<Tip>**Answer real questions.** Replace the default FAQ items with the questions your support team actually gets.</Tip>
<Tip>**Check both hero versions.** Preview the page logged out and logged in.</Tip>
<Tip>**Link to it everywhere.** Add it to your footer, welcome email and [Floating Rewards](/onsite-widgets/floating-launcher) content.</Tip>

## FAQs

<AccordionGroup>
  <Accordion title="Can I use a different URL?">
    Yuko creates the page at `/pages/loyalty-info-page`. You can also add the Yuko landing page blocks to any other page or template in the theme editor.
  </Accordion>

  <Accordion title="I deleted the page. How do I get it back?">
    Click **Check landing page** to confirm it's missing, then reopen the widget. Yuko offers to create the page again.
  </Accordion>

  <Accordion title="Can I add custom styling?">
    Yes. Every block has colour and size settings plus a **Custom CSS** field in the theme editor.
  </Accordion>

  <Accordion title="Why is my Membership block empty?">
    The Membership block shows your paid membership plans. Set up a plan in [Memberships](/memberships/plans) first.
  </Accordion>

  <Accordion title="Can I translate the page?">
    Yes. Use the **Editing language** picker at the top of the widget editor to write the text for each of your store's published languages. Campaign and reward names are translated in [Translations](/account/translations).
  </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.