Microsite Architecture in Optimizely Spire

Spire CMS (part of Optimizely Configured Commerce) offers a microsite architecture that makes it easy to run multiple branded mini‑sites (or “micro‑experiences”) under a single platform. Here’s how it works.

Domain‑based microsites

• You can host multiple microsites using unique domains like company.com, microsite2.company.com—each one behaves like its own site.
• Using paths like com/microsite1 is not supported, as it may slow performance and cause user confusion.

Shared content with easy updates

• With Spire, you can create global content widgets—such as headers, footers, or an About Us section—and place them across multiple microsites. Consequently, any updates to a widget automatically apply to all associated microsites, saving time and ensuring consistent messaging.

SEO & language support

• For multilingual sites, you can specify separate homepage URLs, such as company.com/fr_homepage/, so that each language can be crawled and indexed separately by search engines.

Why is This Setup Powerful?

• Branding control: Each microsite can have its own look, logo, messaging, and navigation, yet run on the same CMS platform.
• Content reuse: Manage shared content in one place and push it out everywhere at once.
• SEO optimization: Each microsite domain can be indexed separately for better search visibility and performance.
• Efficiency: One CMS, one infrastructure, fewer surprises when scaling or updating.

Example in Simple Steps

1. You create microsite A (e.g., a.company.com) and microsite B (b. company.com).
2. Both use shared widgets—say, a promotions banner or footer message.
3. Update the banner once—both sites automatically update.
4. Need a French version? Create fr.yoursite.com home page URL and let search engines index it separately.
5. Everything is managed within the same Spire-configured instance, keeping costs and complexity down.

Use Case

To add Store B after already having Store A in the Spire CMS setup

There are three main areas to handle:

The React front-end blueprint, the CMS Admin Console, and some shared code/config tweaks.

1. Front-End: Create or Extend a Blueprint

You don’t need a whole new blueprint unless Store B needs entirely separate logic/design.

• Clone your existing blueprint (e.g., StoreABlueprint) or create a new one:

This makes modules/blueprints/storeB.

• Update settings.js to allow multiple hostnames.

• Add conditional branding (e.g., logo, colors) in the React app:

Build an AI-First Enterprise

From early pilots to enterprise-wide deployment, our award-winning AI consulting and technical services help you build the right foundation, scale responsibly, and deliver meaningful business outcomes.

Learn More

• If Store B needs custom pages/widgets, add them under modules/blueprints/storeB/Pages or Widgets.

• React Spire: Handle Multi-Site Logic

2. Admin Console: Add the Microsite as a New Website Entry

• Log in to the admin console
  • Websites → Add New Website
    • Name: Store B
    • Domain: store-b.example.com
    • Parent site: Select Store A (if sharing content)

• •  Rebuild search and content index, and Clear Cache
    • Go to: Marketing → Indexing
    • Select the new site (Store B) from the site dropdown
    • Click “Rebuild Index” or “Reindex All.”

This will regenerate the search and content index for the new site (Store B).

• Configure CMS Content for the Microsite

1. • Reuse Shared Content

• • • Go to Content Admin → Pages
    • Switch to Store B
    • Use “Add Linked Page” to link global pages from Store A
      (header, footer, About Us, etc.)

• •  Create Microsite-Specific Pages
    • Use the Store B content tree to build pages unique to Store B

3. Shared code/config tweaks

• Shared Components

  • Developers share reusable React components (like banners, headers, product grids, or footers) across all microsites. You only need to build or update them once, and changes apply everywhere unless a site overrides them.

• Global Styles & Themes

  • We can centralize core styles (CSS/SCSS) and layout settings. This ensures a consistent look and feel across microsites, but you can still override styles per site to match unique branding.

• Routing & Navigation Settings

  • Shared routing config helps manage how pages are structured and linked across sites. You can apply global navigation rules while allowing each site to define its own menu or landing pages.

• Content Blocks & Templates

  • Content blocks (text areas, CTAs, image banners, etc.) are defined once and reused. You can adjust them globally or customize per site using the CMS Admin Console.

Conclusion

In Optimizely Spire CMS, a microsite is a small website that’s part of a larger system. You can launch these sites quickly with their own branding and web address, without needing to build new infrastructure. Spire CMS makes it easy to manage many microsites in one place. Although each site can look different, they share the same tools, content, and design blocks. Therefore, when you update something—like a banner or text section—it automatically updates across all sites.

Moreover, assigning a unique domain to each microsite enhances SEO and simplifies support for multilingual content. This setup helps you scale faster, stay consistent, and keep your brand strong everywhere.

References:

https://support.optimizely.com/hc/en-us/articles/4413191631885-Add-linked-pages-to-a-microsite

https://support.optimizely.com/hc/en-us/articles/4563055621133-Reuse-content