Managing Multiple Themes

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 navigate to your integration page https //app momentscience com/account/integration/customize#customize in the momentscience dashboard in the theme customizer section, open the theme dropdown to view all available themes click the name of the theme you want to use this will load the selected theme's settings click the copy icon next to the theme name this copies the `theme id to your clipboard 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 open the theme customizer from the dashboard adjust the settings, colors, fonts, layout, spacing, and other styles scroll to the bottom of the page and click save as enter a unique, descriptive name for the theme click save , then confirm the creation in the dialog 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 select the theme from the theme dropdown make changes using the visual editor click save confirm the update in the confirmation dialog changes apply immediately on the next render 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 click the theme dropdown in the theme customizer select a theme from the list 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 open the theme dropdown click the 🗑️ delete icon next to the theme you want to remove confirm deletion in the popup dialog 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 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 example request payload (simplified) { "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