# On-site widgets

> Display your loyalty program on your website with customizable widget sections.

Breadcrumb: Loyalty › On-site widgets · Updated: 2026-10-17
Docs index: https://docs.cevoid.com/llms.txt

Program widgets display your loyalty program on your website and match your site's design. There are widgets for each part of your program, handling the interactive elements such as displaying member status, listing available rewards, and letting members complete activities.

Navigate to [Loyalty → On-site widgets](https://app.cevoid.com/program/widgets) to manage your widgets.

All program widgets follow your [Loyalty theme](https://docs.cevoid.com/brandkit/design-theme.md). This ensures a consistent look across all widgets. You can fine-tune the layout, write copy, and select color schemes for each widget, but fonts, colors, and styling are controlled by your Loyalty theme.

> [!TIP]
> The copy you write is automatically translated for each of your languages. See [translations](https://docs.cevoid.com/localization/translations.md).

## Available widgets and sections

Each section of your loyalty program is available as a standalone widget you can embed individually. There is also a Full landing page widget that combines all sections into one embed for a complete rewards page.

> [!TIP]
> Give your program a dedicated landing page, with the Full landing page widget or the standalone sections you choose, and link to it at least from your store's footer. For logged-in customers, add selected sections, such as My account and My rewards, to your store's account page.

The widget editor shows a live preview of your changes. Switch between **Desktop**, **Tablet**, and **Mobile** to check the layout, and select a language to preview the copy in it. The **Theme** area edits your Loyalty theme from the same page. Click **Save changes** to save both: the widget on your site updates right away, with no separate publish step.

Sections that require login, such as My account and My rewards, are hidden for visitors who aren't logged in as a member, and preview signed in. For the other sections, such as Hero, Activities, and Tier cards, switch between **Logged out** and **Signed in** in the preview.

Each widget's card shows **Live** or **Not live**, depending on whether it loaded on your site in the last 10 days. See [Check that a widget is live](https://docs.cevoid.com/loyalty/setup/embed-program-widgets.md#check-that-a-widget-is-live).

### Settings every section has

Every section has these settings, except where a row says otherwise. The sections below list only their own:

| Setting | Description |
| --- | --- |
| _Color scheme_ | Select from your theme's color schemes |
| _Title_ | Section heading |
| _Description_ | Optional supporting text below the heading |
| _Text align_ | **Left** or **Center**. Not on Purchase incentives |
| _Show divider_ | **No** or **Yes**. Displays a divider line below the section |
| _Visibility_ | Hero and About only: **Always show**, or **Hidden if signed in** |

About, My rewards, Activities, Redeemable rewards, and Tier cards show items in columns. Under _Columns_, control the layout:

| Setting | Description |
| --- | --- |
| _Desktop_ | Number of columns on desktop, 2 to 4 |
| _Tablet_ | Number of columns on tablet, 2 to 3 |
| _Mobile_ | Number of columns on mobile, 1 to 2 |
| _Boxed layout_ | Display items in bordered boxes. Not on Tier cards |

My rewards, Activities, and Redeemable rewards also share their image settings, under _Columns_:

| Setting | Description |
| --- | --- |
| _Image layout_ | **Full** or **Icon** |
| _Aspect ratio_ | With **Full**: **1:1**, **4:5**, or **16:9** |
| _Image size_ | With **Icon**: the image size, 20 to 100 px |

### Hero

The Hero section is a full-width banner that introduces your program.

The section displays your program title and description over a customizable background image or video, with **Join now** and **Sign in** buttons for visitors who aren't members. When a member is logged in, the buttons are hidden since they're already part of the program.

![Hero section widget editor showing title, description, and background settings with a live preview](https://yhl4bogauvizwf7u.public.blob.vercel-storage.com/media/help-center/loyalty/setup/on-site-widgets/4318ce38a3cf/program-widget-hero.webp)

The examples in this article are from Cevoid's demo store. Customize the look in your [Loyalty theme](https://docs.cevoid.com/brandkit/design-theme.md).

**Own settings:**

| Setting | Description |
| --- | --- |
| _Position_ | Where to position the content on the background |
| _Logo_ | Optional logo image (transparent .png or .svg recommended) |
| _Size_ | Logo size, 32 to 500. Shows once you add a logo |

Under _Background_, customize the banner appearance:

| Setting | Description |
| --- | --- |
| _Overlay_ | Color overlay with opacity (e.g., `#000000`, `10%`) |
| _Desktop_ | Background image or video for desktop (the app recommends 1980×1080 px) |
| _Height_ | Desktop banner height, 50 to 100% |
| _Mobile_ | Background image or video for mobile (the app recommends 1080×1980 px) |
| _Height_ | Mobile banner height, 50 to 100% |

### About

The About section explains how your program works using a multi-column layout. Each column walks visitors through a step of your program, typically covering how to join, earn points, level up through tiers, and redeem rewards.

![About section widget editor showing multi-column layout with how it works steps](https://yhl4bogauvizwf7u.public.blob.vercel-storage.com/media/help-center/loyalty/setup/on-site-widgets/73a3012f9f72/program-widget-about.webp)

**Own settings:**

Under _Content_, add and manage columns:

- Click **Add column** to create a new step
- Click a column to edit its _Image_, _Title_, and _Description_
- Click the trash icon to remove a column. Columns can't be reordered.

| Setting | Description |
| --- | --- |
| _Include join program button_ | Show a join button for visitors who aren't members |

Under _Columns_, besides the column settings:

| Setting | Description |
| --- | --- |
| _Image size_ | **Full-width** or **Fixed size** |
| _Aspect ratio_ | With **Full-width**: **16:9**, **1:1**, or **4:5** |
| _Fixed size_ | With **Fixed size**: the image size, 20 to 100 px |

### Account summary

The Account summary section gives logged-in members a complete overview of their membership in three summary cards. It combines membership status, their rewards, and points history into one compact view.

The first card shows their tier status, including your program name, their current tier, member name, progress bars for each milestone, and join date. The second card displays their available rewards with a list they can browse, plus a button to see all rewards. The third card shows their points balance and recent points history, with buttons to redeem rewards or view full history.

The Account summary section is only visible when a member is logged in.

![Account summary section showing membership status, rewards, and points history in three cards](https://yhl4bogauvizwf7u.public.blob.vercel-storage.com/media/help-center/loyalty/setup/on-site-widgets/51acb54058da/program-widget-account-summary.webp)

### My account

The My account section shows the member's current tier status and progress toward the next tier. It displays the program name, their tier, name, progress bars for each milestone used in your program, and when they joined.

Use it for a focused view of membership status without the rewards and points history included in Account summary.

The My account section is only visible when a member is logged in. From its actions button, members can leave your program with **Opt Out of Program**. See [Remove a member from the program](https://docs.cevoid.com/loyalty/setup/general-program-settings.md#remove-a-member-from-the-program).

![My account section showing tier status and progress bar](https://yhl4bogauvizwf7u.public.blob.vercel-storage.com/media/help-center/loyalty/setup/on-site-widgets/cd517e877c79/program-widget-my-account.webp)

### Tier progress

The Tier progress section shows the member's journey through all tiers in a horizontal progress layout. It displays progress bars for each milestone used in your program, highlights the member's current tier, and shows each tier with its rewards and perks listed below.

Unlike Tier cards, which shows tiers in a grid, Tier progress emphasizes the progression from one tier to the next. When the member has an earning window, the section shows "Qualifying period:" with its dates. A member on an invite-only tier sees it at the end of the row.

The Tier progress section is only visible when a member is logged in.

![Tier progress section showing horizontal progression through tiers with rewards and perks](https://yhl4bogauvizwf7u.public.blob.vercel-storage.com/media/help-center/loyalty/setup/on-site-widgets/1158cc401158/program-widget-tier-progress.webp)

### My rewards

The My rewards section displays all rewards the member has received in a grid layout. Each reward card shows the reward name, icon, and when it was received. Members can click rewards to view details or copy discount codes.

The My rewards section is only visible when a member is logged in.

![My rewards section showing earned rewards in a grid layout](https://yhl4bogauvizwf7u.public.blob.vercel-storage.com/media/help-center/loyalty/setup/on-site-widgets/f724e50aae3d/program-widget-my-rewards.webp)

The section also has the column and image settings.

### Purchase incentives

The Purchase incentives section shows visitors how they can earn points on purchases. It displays your points-per-currency-spent rate prominently, encouraging visitors to sign in and start earning.

Visitors see "You'll earn:" and members "You currently earn:", followed by the rate, such as "1 point per $1 spent". A member whose tier has a tier multiplier also sees it, marked "Tier multiplier applied". With no live points-per-amount incentive, the section shows "No active purchase incentives". Visitors who aren't members get a sign-in or **Join now** button.

![Purchase incentives section showing points earning rate](https://yhl4bogauvizwf7u.public.blob.vercel-storage.com/media/help-center/loyalty/setup/on-site-widgets/b2535eb97581/program-widget-purchase-incentives.webp)

The section pulls information from your [purchase incentives](https://docs.cevoid.com/loyalty/rewards/purchase-incentives.md). It has no _Text align_ setting.

### Activities

The Activities section displays your single-task activities and challenges in a grid. Members can browse available activities, see the points or rewards they'll earn, and click to participate.

Each activity card shows the activity icon, title, and reward. Challenges display additional information such as end dates and descriptions. When members complete activities, those move based on your sorting settings so active opportunities stay prominent.

![Activities section showing available activities and challenges in a grid](https://yhl4bogauvizwf7u.public.blob.vercel-storage.com/media/help-center/loyalty/setup/on-site-widgets/fbfc99e547b7/program-widget-activities.webp)

**Own settings**, besides the column and image settings:

| Setting | Description |
| --- | --- |
| _Sorting_ | **Completed last** (default) or **Completed first** |

Drag activities in the list to set a custom display order.

### Redeemable rewards

The Redeemable rewards section shows your points shop, where members can browse and redeem rewards using their points. Each reward card displays the reward name, icon, and points cost.

![Redeemable rewards section showing available rewards to redeem](https://yhl4bogauvizwf7u.public.blob.vercel-storage.com/media/help-center/loyalty/setup/on-site-widgets/34cf8ec1a9d0/program-widget-redeemable-rewards.webp)

The section displays rewards from your [redeemable rewards](https://docs.cevoid.com/loyalty/rewards/redeemable-rewards.md).

**Own settings**, besides the column and image settings:

| Setting | Description |
| --- | --- |
| _Sorting_ | **Unredeemed first** (default) or **Unredeemed last** |
| _Order_ | **Lowest points first** (default), **Highest points first**, or **Custom** |

When _Order_ is set to **Custom**, drag rewards in the list to set the display order.

### Tier cards

The Tier cards section displays your live tiers in a card layout. Each card shows the tier name, icon, what it takes to reach the tier, entry rewards, and perks. Visitors can see exactly what benefits they'll get at each level.

The requirement lists each milestone the tier uses, such as "Earn 500 points", "Spend $100", or "Make 5 purchases", joined with "or". The entry tier shows "Join the program". When a member is logged in, their tier shows "Your current tier" so they can see where they are and what's next. Invite-only tiers show only to their own members.

![Tier cards section showing all program tiers with their rewards and perks](https://yhl4bogauvizwf7u.public.blob.vercel-storage.com/media/help-center/loyalty/setup/on-site-widgets/16c8c217559c/program-widget-tier-cards.webp)

**Own settings**, besides the column settings:

| Setting | Description |
| --- | --- |
| _Hide entry tier_ | **No** or **Yes**. Leaves the entry tier out of the cards |
| _Icon size_ | Size of tier icons, 20 to 100 px |

### FAQ

The FAQ section lets you answer common questions about your program. Add questions and answers to help visitors and members understand how earning, redeeming, tiers, and other aspects of your program work.

You can add as many questions as needed and reorder them by dragging.

![FAQ section showing expandable questions and answers](https://yhl4bogauvizwf7u.public.blob.vercel-storage.com/media/help-center/loyalty/setup/on-site-widgets/0077ff904cfe/program-widget-faq.webp)

Under _Content_, click **Add question** to create FAQ items. Each item has a _Question_ and an _Answer_ field.

## Full landing page

The Full landing page widget combines multiple sections into a single embeddable widget, giving you a complete loyalty program page with one embed code.

Navigate to [Loyalty → On-site widgets](https://app.cevoid.com/program/widgets) and select **Full landing page**.

![Full landing page widget editor showing section management](https://yhl4bogauvizwf7u.public.blob.vercel-storage.com/media/help-center/loyalty/setup/on-site-widgets/2e2d40502656/program-widget-full-landing-page.webp)

The Full landing page includes all available sections: Hero, About, Account summary, My account, My rewards, Tier progress, Purchase incentives, Activities, Redeemable rewards, Tier cards, and FAQ. You control which sections appear and in what order.

### Manage sections

Under _Sections_, you can:

- Show or hide each section with the eye icon next to it
- Reorder sections by dragging them up or down
- Edit a section's settings by clicking its name

Sections marked with a question mark icon (?) only appear when the member is logged in. Logged-out visitors won't see these sections.

Click **Save changes** to save the page.

### Account summary toggle

The **Account summary** toggle at the bottom of the section list changes how member information is displayed. It's on by default:

- **On:** Merges My account and My rewards into a single Account summary section with three summary cards. Account summary shows in the list with a _Merged_ badge, and My account and My rewards are hidden from it.
- **Off:** Shows My account and My rewards as separate sections, and hides Account summary

## Embed widgets

Click **Embed** in the top right corner of any widget editor to add the widget to your site, with a Shopify theme block or with code. See [Embed program widgets](https://docs.cevoid.com/loyalty/setup/embed-program-widgets.md).

## Logged-in non-members

Based on your [opt-in settings](https://docs.cevoid.com/loyalty/setup/general-program-settings.md#available-opt-in-rules), customers might be logged in to your store but not yet part of your program. When this happens, program widget sections show a Join button where the sign-in elements would normally appear. Opening an activity shows a message that they need to join before completing it, along with a Join button.

Clicking the Join button opts them into the program. If you've added a program opt-in consent policy in your [legal settings](https://docs.cevoid.com/legal/legal-policies.md), that information and any consent requirements are included in the join flow.

With the **Invite only** opt-in rule, there's no Join button. Under some opt-in rules, customers logged in to your Shopify store are joined automatically, with no Join button: see [How customers opt in through program widgets](https://docs.cevoid.com/loyalty/setup/general-program-settings.md#how-customers-opt-in-through-program-widgets).

## Related articles

- [Embed program widgets](https://docs.cevoid.com/loyalty/setup/embed-program-widgets.md)
- [Loyalty theme](https://docs.cevoid.com/brandkit/design-theme.md)
- [Challenges](https://docs.cevoid.com/loyalty/activities/challenges.md)
- [Tiers](https://docs.cevoid.com/loyalty/tiers.md)
- [Redeemable rewards](https://docs.cevoid.com/loyalty/rewards/redeemable-rewards.md)

---

Canonical: https://docs.cevoid.com/loyalty/setup/on-site-widgets