Multi-layout templates with dynamic themes

Let's consider two examples: a product launch site campaign and a regional email campaign for seasonal allergy medication.

Product launch site campaign

This example demonstrates a multi-layout template for launching a new medication GlucoBalance with different versions for healthcare providers and patients.

Directory structure

glucobalance-launch/
├─.ewizard/
│  └─settings.json
├─common/
│  ├─assets/
│  │  ├─images/
│  │  │  ├─product-photo.png
│  │  │  ├─clinical-graph.svg
│  │  │  └─patient-lifestyle.jpg
│  │  └─fonts/
│  └─blocks-library/
│     ├─blocks.json
│     ├─blocks-themes.json
│     ├─header-block/
│     ├─hero-block/
│     ├─features-block/
│     ├─dosing-block/
│     └─footer-block/
├─layouts/
│  ├─hcp/
│  │  ├─.ewizard/
│  │  ├─common/
│  │  │  └─blocks-library/
│  │  │     ├─blocks.json
│  │  │     └─blocks-themes.json
│  │  ├─themes/
│  │  │  ├─medical-blue/
│  │  │  │  ├─blocks-icons/
│  │  │  │  ├─scss/
│  │  │  │  │  ├─_variables.scss
│  │  │  │  │  └─main.scss
│  │  │  │  └─assets/
│  │  │  └─themes.json
│  │  ├─App.vue
│  │  └─settings.json
│  └─patient/
│     ├─.ewizard/
│     ├─common/
│     │  └─blocks-library/
│     │     ├─blocks.json
│     │     └─blocks-themes.json
│     ├─themes/
│     │  ├─friendly-teal/
│     │  │  ├─blocks-icons/
│     │  │  ├─scss/
│     │  │  │  ├─_variables.scss
│     │  │  │  └─main.scss
│     │  │  └─assets/
│     │  └─themes.json
│     ├─App.vue
│     └─settings.json
├─themes/
│  ├─medical-blue/
│  ├─friendly-teal/
│  └─themes.json
├─App.vue
├─package.json
└─settings.json

Configuration files

Master template settings:

// settings.json (root)
{
  "name": "GlucoBalance Launch Campaign",
  "version": "1.0.0",
  "theme": {
    "current": "medical-blue"
  },
  "path": {
    "layouts": "layouts"
  }
}

• Layout configuration

// layouts/hcp/settings.json
{
  "name": "GlucoBalance HCP Materials",
  "theme": {
    "current": "medical-blue"
  }
}

• Available blocks

// layouts/hcp/common/blocks-library/blocks.json
{
  "components": [
    { "id": "header-block" },
    { "id": "hero-block" },
    { "id": "clinical-evidence-block" },
    { "id": "dosing-block" },
    { "id": "safety-block" },
    { "id": "footer-block" }
  ]
}

• Theme structure

// layouts/hcp/common/blocks-library/blocks-themes.json
{
  "themes": {
    "medical-blue": {
      "blocks": [
        {
          "id": "header-block",
          "name": "Header with HCP Portal",
          "icon": {
            "icon": "themes/medical-blue/blocks-icons/header-block/icon.png"
          }
        },
        {
          "id": "hero-block",
          "name": "Clinical Overview",
          "icon": {
            "icon": "themes/medical-blue/blocks-icons/hero-block/icon.png"
          }
        },
        {
          "id": "clinical-evidence-block",
          "name": "Clinical Evidence",
          "icon": {
            "icon": "themes/medical-blue/blocks-icons/clinical-evidence-block/icon.png"
          }
        },
        {
          "id": "dosing-block",
          "name": "Dosing Guide",
          "icon": {
            "icon": "themes/medical-blue/blocks-icons/dosing-block/icon.png"
          }
        },
        {
          "id": "safety-block",
          "name": "Safety Information",
          "icon": {
            "icon": "themes/medical-blue/blocks-icons/safety-block/icon.png"
          }
        },
        {
          "id": "footer-block",
          "name": "Medical References Footer",
          "icon": {
            "icon": "themes/medical-blue/blocks-icons/footer-block/icon.png"
          }
        }
      ]
    }
  }
}

• Theme dependencies

// layouts/hcp/themes/themes.json
{
  "themes": [
    {
      "id": "medical-blue",
      "name": "Medical Professional",
      "dependencies": {
        "brand": ["medipharm"]
      }
    }
  ]
}

• Layout configuration

// layouts/patient/settings.json
{
  "name": "GlucoBalance Patient Materials",
  "theme": {
    "current": "friendly-teal"
  }
}

• Available blocks

// layouts/patient/common/blocks-library/blocks.json
{
  "components": [
    { "id": "header-block" },
    { "id": "hero-block" },
    { "id": "patient-benefits-block" },
    { "id": "how-to-use-block" },
    { "id": "lifestyle-tips-block" },
    { "id": "footer-block" }
  ]
}

• Theme structure

// layouts/patient/common/blocks-library/blocks-themes.json
{
  "themes": {
    "friendly-teal": {
      "blocks": [
        {
          "id": "header-block",
          "name": "Patient-Friendly Header",
          "icon": {
            "icon": "themes/friendly-teal/blocks-icons/header-block/icon.png"
          }
        },
        {
          "id": "hero-block",
          "name": "Patient Introduction",
          "icon": {
            "icon": "themes/friendly-teal/blocks-icons/hero-block/icon.png"
          }
        },
        {
          "id": "patient-benefits-block",
          "name": "Benefits For You",
          "icon": {
            "icon": "themes/friendly-teal/blocks-icons/patient-benefits-block/icon.png"
          }
        },
        {
          "id": "how-to-use-block",
          "name": "How To Use GlucoBalance",
          "icon": {
            "icon": "themes/friendly-teal/blocks-icons/how-to-use-block/icon.png"
          }
        },
        {
          "id": "lifestyle-tips-block",
          "name": "Healthy Living Tips",
          "icon": {
            "icon": "themes/friendly-teal/blocks-icons/lifestyle-tips-block/icon.png"
          }
        },
        {
          "id": "footer-block",
          "name": "Support Footer",
          "icon": {
            "icon": "themes/friendly-teal/blocks-icons/footer-block/icon.png"
          }
        }
      ]
    }
  }
}

• Theme dependencies

// layouts/patient/themes/themes.json
{
  "themes": [
    {
      "id": "friendly-teal",
      "name": "Patient Friendly",
      "dependencies": {
        "brand": ["medipharm"]
      }
    }
  ]
}

Build the project

wiz dev --layout hcp # Build the HCP site
wiz dev --layout patient # Build the patient site
wiz archive --layout hcp patient # Package both layouts for eWizard Library

Regional email campaign for seasonal allergy medication

This example demonstrates a multi-layout email template for the AllerClear seasonal allergy medication with variations for different regions and seasons.

Directory structure

allerclear-email-campaign/
├─.ewizard/
│  └─settings.json
├─common/
│  ├─assets/
│  │  ├─images/
│  │  │  ├─product-bottle.png
│  │  │  ├─spring-pollen.jpg
│  │  │  ├─fall-pollen.jpg
│  │  │  └─logo.svg
│  │  └─fonts/
│  └─blocks-library/
│     ├─blocks.json
│     ├─blocks-themes.json
│     ├─email-header/
│     ├─hero-banner/
│     ├─product-info/
│     ├─testimonial/
│     ├─dosage-info/
│     ├─cta-button/
│     └─email-footer/
├─layouts/
│  ├─spring-northeast/
│  │  ├─common/
│  │  │  └─blocks-library/
│  │  │     ├─blocks.json
│  │  │     └─blocks-themes.json
│  │  ├─themes/
│  │  │  ├─spring-theme/
│  │  │  │  ├─blocks-icons/
│  │  │  │  ├─scss/
│  │  │  │  └─assets/
│  │  │  └─themes.json
│  │  ├─App.vue
│  │  └─settings.json
│  ├─spring-southwest/
│  │  ├─common/
│  │  │  └─blocks-library/
│  │  │     ├─blocks.json
│  │  │     └─blocks-themes.json
│  │  ├─themes/
│  │  │  ├─spring-theme/
│  │  │  └─themes.json
│  │  ├─App.vue
│  │  └─settings.json
│  ├─fall-northeast/
│  │  ├─common/
│  │  │  └─blocks-library/
│  │  │     ├─blocks.json
│  │  │     └─blocks-themes.json
│  │  ├─themes/
│  │  │  ├─fall-theme/
│  │  │  └─themes.json
│  │  ├─App.vue
│  │  └─settings.json
│  └─fall-southwest/
│     ├─common/
│     │  └─blocks-library/
│     │     ├─blocks.json
│     │     └─blocks-themes.json
│     ├─themes/
│     │  ├─fall-theme/
│     │  └─themes.json
│     ├─App.vue
│     └─settings.json
├─themes/
│  ├─spring-theme/
│  ├─fall-theme/
│  └─themes.json
├─App.vue
├─package.json
└─settings.json

Configuration files

Master template settings:

// settings.json (root)
{
  "name": "AllerClear Seasonal Email Campaign",
  "version": "1.0.0",
  "theme": {
    "current": "spring-theme"
  },
  "path": {
    "layouts": "layouts"
  }
}

• Layout configuration

// layouts/spring-northeast/settings.json
{
  "name": "AllerClear Northeast Spring Campaign",
  "theme": {
    "current": "spring-theme"
  }
}

• Available blocks

// layouts/spring-northeast/common/blocks-library/blocks.json
{
  "components": [
    { "id": "email-header" },
    { "id": "hero-banner" },
    { "id": "northeast-allergens-block" },
    { "id": "product-info" },
    { "id": "dosage-info" },
    { "id": "cta-button" },
    { "id": "email-footer" }
  ]
}

• Theme structure

// layouts/spring-northeast/common/blocks-library/blocks-themes.json
{
  "themes": {
    "spring-theme": {
      "blocks": [
        {
          "id": "email-header",
          "name": "AllerClear Header",
          "icon": {
            "icon": "themes/spring-theme/blocks-icons/email-header/icon.png"
          }
        },
        {
          "id": "hero-banner",
          "name": "Spring NE Hero",
          "icon": {
            "icon": "themes/spring-theme/blocks-icons/hero-banner/icon.png"
          }
        },
        {
          "id": "northeast-allergens-block",
          "name": "Northeast Allergens",
          "icon": {
            "icon": "themes/spring-theme/blocks-icons/northeast-allergens-block/icon.png"
          }
        },
        {
          "id": "product-info",
          "name": "Product Benefits",
          "icon": {
            "icon": "themes/spring-theme/blocks-icons/product-info/icon.png"
          }
        },
        {
          "id": "dosage-info",
          "name": "Dosage Information",
          "icon": {
            "icon": "themes/spring-theme/blocks-icons/dosage-info/icon.png"
          }
        },
        {
          "id": "cta-button",
          "name": "Spring Offer Button",
          "icon": {
            "icon": "themes/spring-theme/blocks-icons/cta-button/icon.png"
          }
        },
        {
          "id": "email-footer",
          "name": "Northeast Pharmacy Footer",
          "icon": {
            "icon": "themes/spring-theme/blocks-icons/email-footer/icon.png"
          }
        }
      ]
    }
  }
}

• Theme dependencies

// layouts/spring-northeast/themes/themes.json
{
  "themes": [
    {
      "id": "spring-theme",
      "name": "Spring Allergy Season",
      "dependencies": {
        "brand": ["novapharm"]
      }
    }
  ]
}

• Layout configuration

// layouts/fall-southwest/settings.json
{
  "name": "AllerClear Southwest Fall Campaign",
  "theme": {
    "current": "fall-theme"
  }
}

• Available blocks

// layouts/fall-southwest/common/blocks-library/blocks.json
{
  "components": [
    { "id": "email-header" },
    { "id": "hero-banner" },
    { "id": "southwest-allergens-block" },
    { "id": "product-info" },
    { "id": "testimonial" },
    { "id": "cta-button" },
    { "id": "email-footer" }
  ]
}

• Theme structure

// layouts/fall-southwest/common/blocks-library/blocks-themes.json
{
  "themes": {
    "fall-theme": {
      "blocks": [
        {
          "id": "email-header",
          "name": "AllerClear Header",
          "icon": {
            "icon": "themes/fall-theme/blocks-icons/email-header/icon.png"
          }
        },
        {
          "id": "hero-banner",
          "name": "Fall SW Hero",
          "icon": {
            "icon": "themes/fall-theme/blocks-icons/hero-banner/icon.png"
          }
        },
        {
          "id": "southwest-allergens-block",
          "name": "Southwest Allergens",
          "icon": {
            "icon": "themes/fall-theme/blocks-icons/southwest-allergens-block/icon.png"
          }
        },
        {
          "id": "product-info",
          "name": "Product Benefits",
          "icon": {
            "icon": "themes/fall-theme/blocks-icons/product-info/icon.png"
          }
        },
        {
          "id": "testimonial",
          "name": "Customer Testimonial",
          "icon": {
            "icon": "themes/fall-theme/blocks-icons/testimonial/icon.png"
          }
        },
        {
          "id": "cta-button",
          "name": "Fall Offer Button",
          "icon": {
            "icon": "themes/fall-theme/blocks-icons/cta-button/icon.png"
          }
        },
        {
          "id": "email-footer",
          "name": "Southwest Pharmacy Footer",
          "icon": {
            "icon": "themes/fall-theme/blocks-icons/email-footer/icon.png"
          }
        }
      ]
    }
  }
}

• Theme dependencies

// layouts/fall-southwest/themes/themes.json
{
  "themes": [
    {
      "id": "fall-theme",
      "name": "Fall Allergy Season",
      "dependencies": {
        "brand": ["novapharm"]
      }
    }
  ]
}

Build project

wiz dev --layout spring-northeast # Build the spring northwest theme
wiz dev --layout spring-southwest # Build the spring southwest theme
wiz dev --layout fall-northeast # Build the fall northeast theme
wiz dev --layout fall-southwest # Build the fall southwest theme
wiz archive --layout spring-northeast fall-northeast spring-southwest fall southwest # Package layouts for eWizard Library