Overview

Dynamic themes provide a flexible solution for designing and managing templates across multiple brands by leveraging a unified core structure. This approach can be applied to the following content item types:

• e-Detailers
• Emails
• Sites

Using dynamic themes, developers can create a single core template for a content item that supports multiple brands. With such a core template uploaded to eWizard, users can quickly generate brand-specific content items based on it. After clicking ADD NEW, they will see only the unified core template. Upon selecting a brand for a new content item, the system automatically applies the corresponding theme.

This streamlined approach reduces redundancy in template creation and simplifies maintenance, as all brand themes are associated with a single master template.

Using dynamic themes in eWizard.js simplifies template development, allowing consolidation of multiple brand requirements into a single, manageable template. With this approach, you have:

• Streamlined development workflows since repetitive tasks are reduced
• Consistency across templates, ensuring cohesive branding
• Ease of maintenance, as updates can be applied to a single core template instead of multiple brand-specific templates

By adopting the dynamic theme approach and following the above guidelines, developers can optimize their template creation process, improve scalability, and ensure faster time-to-market for branded content.

Theme architecture

A theme in an eWizard.js template consists of the following common components:

• ./common/styles/theme.scss contains global brand CSS styles
• ./themes/ includes folders for brand themes available in the template and themes.json
  • ./themes/themes.json specifies the themes available in the core template and their settings for eWizard Library's Add new popup
  • Brand theme folders include core files—index.js, theme stylesheet, variable list, and theme configuration—and the media folder with applicable assets.

Additionally, e-Detailers feature the main SCSS theme file, ./themes/themes.scss. It defines the default styling variables that control the visual appearance of the application across various components.