Theme Customizer

overview the theme customizer is a visual tool that lets you configure the appearance of momentperks offer units, no code required you can manage themes, adjust layout and styles, and preview changes instantly across desktop and mobile use the theme customizer to align momentscience offers with your brand’s visual identity and ui standards what you can do manage multiple themes create, edit, and switch between saved themes configure offer units customize layout, color, typography, and button styles for single and multi offer units preview across platforms see how changes appear on both desktop and mobile apply changes live all updates are reflected in real time as you customize this tool is available directly in the dashboard and is designed for flexibility, giving you full control over offer unit styling without code changes accessing theme customizer to open the theme customizer log in to the momentscience dashboard in the sidebar, click integration select moments you'll be taken to the t heme customizer page alternatively, you can go directly to the theme customizer from here once there, you can begin editing themes or creating new ones for your moments configuration customization options the theme customizer gives you full control over the appearance of your momentperks offer units you can adjust the layout, spacing, colors, typography, and behaviorwithout editing code offer unit borders, backgrounds, tile layout, hover styles header & footer text, disclaimers, branding text & buttons font, size, color, cta styles theme settings position, animation, embedded mode, perkswallet all changes preview in real time and are saved per theme offer unit customization these settings allow you to visually configure offer units within a theme, helping you match your brand's ui while maintaining layout flexibility across devices settings are applied per theme and support both single and multi offer unit types property description applies to background color sets the background color of the entire offer unit container mou, sou corner radius controls the roundness of each corner of the offer unit you can set values per corner (clockwise) mou, sou shadow adds a soft shadow around the offer unit to help it stand out you can define shadow color mou, sou tile radius sets the border radius for tiles in multi offer units mou, border thickness defines the width of the border (in pixels) around the offer unit mou tile gap sets the spacing between individual offer tiles inside a multi offer unit default is 6px mou border color specifies the color of the offer unit’s outer border mou tile background color sets the fill color for each offer tile in a multi offer unit mou tile background hover color sets the background color that appears when a user hovers over a tile mou header and footer customization these settings allow you to configure the header and footer content of your offer units you can personalize messaging, control visual styles, and manage branding visibility, all without editing code macros are supported for dynamic text property description applies to header text displays a main heading text at the top of the offer unit implementing macros are supported for dynamic content learn more about implementing macros docid\ u1m7w0zxfxch7tzk6 gfj mou, sou lead in text adds text above the offer description commonly used for personalized greetings or context learn more about implementing macros docid\ u1m7w0zxfxch7tzk6 gfj mou, sou header background color sets the background color of the header section mou, sou text color defines the color of the main header text mou, sou lead in text color defines the text color for the lead in message mou, sou lead in text alignment controls horizontal alignment of the lead in text (left, center, or right) mou, sou lead in text font size adjusts the font size of the lead in text header text size controls the font size of the main header text mou, sou disclaimer text adds a customizable disclaimer message at the bottom of the offer unit mou, sou show branding toggles the footer branding when enabled, the footer shows “powered by momentscience” mou, sou macros let you dynamically insert contextual information, like customer details or transaction data, into offer units this enhances personalization and improves the relevance and performance of momentscience offers to use a macro, the corresponding parameter must be included in the payload for example, if you use the {{first name}} macro in a header or lead in text, your payload must include a first name value learn more about implementing macros docid\ u1m7w0zxfxch7tzk6 gfj offer text customization use the following properties to adjust the text styling, image display, and button appearance within your offer units these settings allow you to align each component with your brand's visual language property description applies to color sets the color of the offer description text mou, sou font family selects a font from the available list, which includes options from google fonts mou, sou offer text font size sets the font size of the offer description text (in pixels) mou, sou button radius defines the border radius of call to action (cta) buttons mou, sou hide advertiser name when enabled, hides the advertiser name from the offer unit mou show offer image toggle to display or hide the image associated with the offer mou, sou image placement controls whether the offer image appears on the left or right only visible when "show offer image" is enabled sou cta text size sets the font size of the call to action button text mou, sou cta text style choose between regular or bold styling for the cta text mou, sou button (yes please) customize the primary cta button adjust background color, text color, border (stroke), and hover state mou, sou, perkswall button (no thanks) customize the secondary cta button for declining an offer supports full color and border configuration sou button (perkswall cta) configure the cta for perkswall units (e g , “show more offers”) customize background, hover, border, and text color mou, sou theme settings these settings control global behaviors, layout positioning, and advanced interactions for offer units across desktop and mobile use them to define how and where offer units appear, how users interact with them, and whether features like embedded mode or disclaimers are shown property description applies to embedded mode allows the offer unit to render inline within a specified container on the page, instead of appearing as an overlay when embedded mode is enabled, you can customize the following target element selector (default adpx ) specifies the html element where the offer unit should be embedded enter the element’s id (e g , #offer container) show header toggles the visibility of the header section in embedded mode show footer toggles the visibility of the footer section, including disclaimers and branding fill container when enabled, the offer unit will expand to fill the height of the target container show border toggles the border around the embedded offer unit inherits styling from popup border settings mou, sou offer unit delay duration set a delay for the offer unit to appear choose 'none' for instant loading, or select the delay in seconds mou, sou darken background (center) darken the background when the offer unit appears as an overlay centered on the screen mou, sou darken background (non center) darken the background when the offer unit appears as an overlay in corner positions( top left, top right, bottom left, or bottom right) mou, sou fixed progress bar display a fixed progress bar for navigation between next and previous offers sou progress bar type choose the visual style for the progress indicator specifies the visual style of the progress indicator in a single offer unit (sou) you can choose between numbered displays the step number for each offer (e g , ① ② ③) dots displays a simple dot for each offer (e g , ● ● ●) use this to match your desired ux or brand style show close offer unit display or hide the close offer (x) icon at the top right of the offer unit mou, sou open perkswall (on closing offer unit) open the perkswall url when the offer unit is closed mou, sou delay close offer unit delay the display of the close offer unit(x) icon when 'show close offer unit' is enabled mou, sou close offer unit delay time set a delay for the close offer unit(x) icon to appear after the first offer is shown only available if "delay close offer unit " is enabled mou, sou offer unit position desktop set the position of desktop offer unis, defaulting to the center with customizable offset options mou, sou offer unit animation set animation direction for the theme (top to bottom, bottom to top, left to right, or right to left) mou, sou vertical offset desktop set a pixel margin from the top for a centered desktop offer position leaving blank or 0 centers the offer unit mou, sou vertical offset mobile set a pixel margin from the top for a centered mobile offer position leaving blank or 0 centers the offer unit mou, sou button order determine the order of cta buttons (positive or negative cta first) sou show disclaimer display disclaimer text in the offer unit's footer current disclaimer text "external link clicking an offer will take you to the advertiser's website and is subject to the terms linked above " mou, sou show perkswallet cta enable this option to display a perkswallet cta button, allowing users to save selected offers to their perkswallet account for later claiming mou, sou perkswallet cta set the text to appear on the perkswallet cta button by default, this is set to "save for later " mou, sou saved offer text set the text that will be shown when the user clicks on the perkswallet cta button (e g , “offer saved successfully”) mou, sou 📢 if you're running into any issues while going through the integration process, feel free to contact us at help\@m omentscience com