# Embed program widgets

> Add program widgets to your store with Shopify theme blocks, a new Shopify page, or the Cevoid script for program widgets and one element per widget.

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

Embed a program widget to show your loyalty program on your store. On Shopify, add it in the theme editor, with no code. On other platforms, add the Cevoid script for program widgets and an element wherever a widget goes.

Navigate to [Loyalty → On-site widgets](https://app.cevoid.com/program/widgets) to embed your program widgets. Open a widget and click **Embed** in the top right corner of the widget editor to see your embedding options. **Embed** checks that your plan includes the widget and, on Shopify, that the [Cevoid: Loyalty & Rewards](https://apps.shopify.com/cevoid-engage) app is installed on your store.

## How embedding works

A program widget on your store needs two things:

- **The Cevoid script for program widgets:** Loaded on the page. On Shopify, every block and section of the Loyalty app loads it, so no app embed is needed. On other platforms, see [Add the Cevoid script for program widgets](https://docs.cevoid.com/integrations/ecommerce/general-implementation.md#add-the-cevoid-script-for-program-widgets). Review widgets, galleries, and cards use scripts of their own.
- **A placement:** A Shopify block or section, or an element that carries the widget's ID

On Shopify, each block and section of the Loyalty app also signs members in with their store account, so logged-in customers see their own membership. To connect your store, see [Shopify](https://docs.cevoid.com/integrations/ecommerce/shopify.md). Everything else lives in the widget: saving a widget in Cevoid updates it on your store.

## Embed a widget on Shopify

Add widgets with the theme blocks from the [Cevoid: Loyalty & Rewards](https://apps.shopify.com/cevoid-engage) app, without writing any code. The _Embed widget_ dialog shows the steps for your theme: an Online Store 2.0 theme (_Automatic_) or a vintage theme (_Vintage_).

**Online Store 2.0**

1. Navigate to [Loyalty → On-site widgets](https://app.cevoid.com/program/widgets) and open the widget
2. Click **Embed**. _Embed widget_ opens.
3. Click **Embed to store** under _Embed with Shopify_. The Shopify theme editor opens.
4. Navigate to the page where you want the widget
5. Click **Add section** or **Add block**
6. Select the **Apps** tab
7. Search for `Cevoid` and select the block for the widget
8. Click **Save** in the Shopify theme editor

Each block shows your widget of that type, so it has no settings to fill in. Most blocks have the widget's name in Cevoid:

| Block in Shopify | Widget in Cevoid |
| --- | --- |
| **Full program** | Full landing page |
| **Tiers** | Tier cards |
| **Hero**, **About**, **Account summary**, **My account**, **My rewards**, **Activities**, **Redeemable rewards**, **Tier progress**, **FAQ** | The widget with the same name |

There's no Purchase incentives block. On an Online Store 2.0 theme, the Purchase incentives section shows only inside **Full program**.

**Vintage theme**

A vintage theme has no app blocks, so Cevoid adds a Cevoid section to your live theme for each widget you embed.

1. Navigate to [Loyalty → On-site widgets](https://app.cevoid.com/program/widgets) and open the widget
2. Click **Embed**. _Embed widget_ opens.
3. Click **Embed to store** under _Embed with Shopify_. Cevoid adds the widget's section to your live theme and opens the Shopify editor.
4. Select the page you want to add the widget to
5. Click **Add section** and search for `Cevoid`
6. Select the widget's section, such as _Cevoid Program Hero_
7. Click **Save** in the Shopify editor

The section names are _Cevoid Program Hero_, _Cevoid Program About_, _Cevoid Account Summary_, _Cevoid My Account_, _Cevoid My Rewards_, _Cevoid Program Activities_, _Cevoid Redeemable Rewards_, _Cevoid Program Tiers_, _Cevoid Tier Progress_, _Cevoid FAQ_, _Cevoid Purchase Incentives_, and _Cevoid: Program Landing_ for the Full landing page.

Adding a section needs the app's permission to edit your store's content. Without it, _Insufficient Access Permissions_ opens instead: click **Update access scopes** and approve the change in Shopify.

## Embed the Full landing page on Shopify

The Full landing page can go on a new page that Cevoid creates for you, or on a page you already have. Its embed dialog is _Embed landing page_.

**On a new page:**

1. Navigate to [Loyalty → On-site widgets](https://app.cevoid.com/program/widgets) and open **Full landing page**
2. Click **Embed**. _Embed landing page_ opens.
3. Click **Create new page** under _Embed on a new page_. Cevoid creates and publishes a page named after your program, and opens the Shopify theme editor with the **Full program** block added.
4. Click **Save** in the Shopify theme editor

Cevoid creates this page once per store. A second try fails with "Failed to generate page, could it be that you already have generated this page?"

**On an existing page:** Under _Embed on existing page_, click **Embed to store**, then add the **Full program** block (or, on a vintage theme, the _Cevoid: Program Landing_ section) as in [Embed a widget on Shopify](https://docs.cevoid.com/loyalty/setup/embed-program-widgets#embed-a-widget-on-shopify).

**Create new page**, and **Embed to store** on a vintage theme, need the app's permission to edit your store's content. Without it, _Insufficient Access Permissions_ opens: click **Update access scopes** and approve the change in Shopify.

## Embed with code

> [!NOTE]
> This setup needs access to your site's code, and server-side code if members sign in with your own login. If you don't edit your site yourself, share these steps with your developer.

For non-Shopify platforms or headless setups, embed widgets with code. The _Embed with code_ part of the embed dialog has both snippets, with your widget's ID filled in. The page needs the Cevoid script for program widgets, under _1. Add Cevoid script_: see [Add the Cevoid script for program widgets](https://docs.cevoid.com/integrations/ecommerce/general-implementation.md#add-the-cevoid-script-for-program-widgets).

1. Navigate to [Loyalty → On-site widgets](https://app.cevoid.com/program/widgets) and open the widget
2. Click **Embed**
3. Under _2. Add widget code_, copy the widget code and paste it where you want the widget to appear.
4. Publish the changes to your site

The widget code for a single widget names the widget and its section:

```html
<div class="cevoid-widget" data-id="…" data-section="hero" data-type="engage"></div>
```

The Full landing page has no `data-section`:

```html
<div class="cevoid-widget" data-id="…" data-type="engage"></div>
```

How members sign in depends on your [authentication method](https://docs.cevoid.com/loyalty/setup/general-program-settings.md#available-authentication-methods). Cevoid's email code sign-in needs no extra code. To sign members in with your own login, see [Custom customer authentication](https://docs.cevoid.com/integrations/ecommerce/custom-customer-authentication.md).

## Shopify customer accounts

All widgets work with both Shopify legacy customer accounts and new customer accounts for authentication.

## Check that a widget is live

A program widget shows **Live** on its card when it loaded on your site in the last 10 days, and **Not live** otherwise.

1. Navigate to [Loyalty → On-site widgets](https://app.cevoid.com/program/widgets)
2. Hover over **Live** or **Not live** on the widget's card. The page where the widget last loaded shows, or "Widget has not been loaded yet".
3. Optional: Click the page in the tooltip to open it

## Related articles

- [On-site widgets](https://docs.cevoid.com/loyalty/setup/on-site-widgets.md)
- [General program settings](https://docs.cevoid.com/loyalty/setup/general-program-settings.md)
- [Custom customer authentication](https://docs.cevoid.com/integrations/ecommerce/custom-customer-authentication.md)
- [Shopify](https://docs.cevoid.com/integrations/ecommerce/shopify.md)

---

Canonical: https://docs.cevoid.com/loyalty/setup/embed-program-widgets
