---
title: Managing Multiple Themes
slug: managing-multiple-themes
icon: 🧵
docTags: 
createdAt: 2025-07-31T23:04:34.020Z
---

:::hint{type="info"}
**Who is this for:** Partners who manage multiple visual configurations for different surfaces, audiences, or placements within their MomentPerks integration.

**Outcome:** Create, retrieve, and dynamically apply multiple named themes to offer units via the SDK or API using each theme's unique `theme_id`.
:::

# Overview

The Theme Customizer allows you to create, update, and manage multiple visual themes for your offer units. Each theme defines layout, fonts, colors, and spacing to help align offers with your product's design system.

Every theme is assigned a unique `theme_id`(also called a *slug*), which you can pass through the SDK or API to apply it dynamically at runtime.

## Retrieving Your Theme ID

Each custom theme has a unique `theme_id`, which you’ll need to apply the theme in SDK or API integrations.

Follow the steps below to locate and copy the `theme_id`for any created theme:

1. Navigate to your[ Integration page ](https://app.momentscience.com/account/integration/customize#customize)in the MomentScience dashboard.
2. In the Theme Customizer section, open the Theme dropdown to view all available themes.
3. Click the name of the theme you want to use. This will load the selected theme's settings.
4. Click the copy icon next to the theme name. This copies the \`theme\_id to your clipboard.

:::Iframe{code="<div style=&#x22;position: relative; box-sizing: content-box; max-height: 80vh; max-height: 80svh; width: 100%; aspect-ratio: 2.208588957055215; padding: 40px 0 40px 0;&#x22;><iframe src=&#x22;https://play.momentscience.com/embed/cmds1f1x44x3b9f96a1pwoz3i?embed_v=2&utm_source=embed&#x22; loading=&#x22;lazy&#x22; title=&#x22;Retrieving Your Theme ID&#x22; allow=&#x22;clipboard-write&#x22; frameborder=&#x22;0&#x22; webkitallowfullscreen=&#x22;true&#x22; mozallowfullscreen=&#x22;true&#x22; allowfullscreen style=&#x22;position: absolute; top: 0; left: 0; width: 100%; height: 100%;&#x22;></iframe></div>"}

:::

## Default theme

When your account is created, you start with a built-in **Standard Theme**.

- This theme is applied by default when no other theme is specified.
- The Standard Theme cannot be edited directly.
- To customize it, click "Save As" button to create a new editable version.

## Creating a new theme

You can create any number of themes based on your design needs. New themes are saved independently and can be reused or updated at any time.

1. Open the **Theme Customizer** from the dashboard.
2. Adjust the settings, colors, fonts, layout, spacing, and other styles.
3. Scroll to the bottom of the page and click **Save As**.
4. Enter a **unique, descriptive name** for the theme.
5. Click **Save**, then confirm the creation in the dialog.

:::hint{type="info"}
Use short and descriptive names (e.g. `dark-checkout`, `summer-sale`, `mobile-compact`) to help organize themes across use cases.
:::

## Editing an existing theme

To update an existing theme:

1. Select the theme from the **Theme** dropdown.
2. Make changes using the visual editor.
3. Click **Save**.
4. Confirm the update in the confirmation dialog.

Changes apply immediately on the next render.

:::hint{type="warning"}
You cannot edit the Standard Theme. The Save button will be disabled. To customize it, use Save As to create a new theme first.
:::

## Switching between themes

To switch or preview a different theme:

1. Click the **Theme** dropdown in the Theme Customizer.
2. Select a theme from the list.
3. The interface will update to reflect the selected theme’s configuration.

## Deleting a theme

You can delete any custom theme. The Standard Theme cannot be deleted.

1. Open the **Theme** dropdown.
2. Click the **🗑️ Delete** icon next to the theme you want to remove.
3. Confirm deletion in the popup dialog.

:::hint{type="success"}
If a deleted theme is referenced in an active integration, the SDK will fall back to the Standard Theme automatically.
:::

## Using a Theme in Your Integration

To render offer units using a specific theme, pass its theme\_id in your SDK or API integration payload.

### Using JS SDK

If you're using the JS SDK (MomentPerks), set the `theme_id` in the `window.AdpxUser` object before initializing the SDK:

```javascript
window.AdpxUser = {
  // Customer-specific properties
  theme_id: "your_theme_id"
};
```

The `theme_id`will instruct the SDK to render the offer unit using the corresponding theme.

### Using MomentPerks API

If you're using the Moments API, pass the `theme_id` in the request payload. This ensures the styles and configuration associated with the selected theme are returned in the response.

:::CodeblockTabs
Example request payload (simplified)

```javascript
{
  "user_id": "12345",
  "theme_id": "dark-checkout",
  ...
}

```
:::

***

📢 Contact us at [help@momentscience.com](mailto\:help@momentscience.com) if you encounter any issues during integration or theme setup.