Optimizely has always been synonymous with experimentation. Its platform empowers organizations to test, learn, and optimize digital experiences with precision. Now, with the integration of agentic and generative AI, Optimizely is taking that mission further — helping teams not only run smarter experiments but also act on insights faster and more confidently. 

Forrester’s report, The Impact of AI on Digital Experience Platforms, discusses how vendors like Optimizely are embedding AI to support content creation, campaign testing, and practitioner enablement. Optimizely’s approach stands out for its focus on agility and continuous improvement. 

Agentic AI Turns Data Into Decisions

Optimizely’s Opal provides a unified view of customer interactions, enabling marketers to make informed decisions based on real-time data. Agentic AI capabilities are layered into this experience, offering recommendations, automating workflows, and guiding practitioners through complex optimization paths. 

Perficient Optimizely Director David Lewis explains how Perficient is helping clients unlock the full potential of these tools.  

Lewis said, “We’re seeing Optimizely’s AI capabilities accelerate how teams work—whether it’s Opal generating brand-consistent content in CMP, summarizing experiment results in Web Experimentation, or surfacing personalization ideas directly in Feature Experimentation. The real advantage is that these tools are connected to the workflows practitioners already use every day, so optimization happens naturally and at scale.” 

Accelerating Content and Campaign Innovation With GenAI

Optimizely’s GenAI features are designed to support rapid iteration. From generating brand-consistent content to summarizing customer behavior and simulating campaign outcomes, GenAI is helping teams move faster without compromising quality. 

Lewis shares how Perficient is guiding clients through this transformation. 

“We’re seeing GenAI help Optimizely users move faster, whether it’s writing audience-specific content or simulating campaign outcomes. The key is integrating these tools into workflows that already drive business value,” he said.  

Perficient Named 2025 Gold Globee® Winner for Best Artificial Intelligence Service Provider | Learn More 

Building a Smarter, Safer AI Strategy

Successful AI adoption requires strong data foundations, human oversight, and change management. That’s why we work with clients to ensure these elements are in place, especially when integrating AI into experimentation and optimization workflows. 

We’re honored to have contributed to the research in an interview for Forrester’s report , The Impact of AI on Digital Experience Platforms. We believe it reflects our deep expertise in helping enterprise clients implement and optimize DXPs like Optimizely. Whether it’s orchestrating personalized journeys or deploying intelligent agents, we’re helping brands embrace AI responsibly and effectively. 

If you’re exploring how to bring Optimizely’s AI into your DXP strategy, we invite you to connect with us and keep the conversation going. 

Access the report here (available to Forrester subscribers or for purchase).  

Learn more about our Optimizely expertise here.  

Contact us to learn more.

In this article, we will cover all the remaining actions available in Mission Control.

Base Code Deploy

The Optimizely team continuously improves the platform by introducing new features and releasing updated versions. To take advantage of these enhancements and bug fixes, projects must be upgraded to the latest version. After upgrading the project, it needs to be deployed to the appropriate environment. This deployment is carried out using the “Base Code Deploy” option in Mission Control.

How to deploy the Base Code

• Log in to Mission Control.

• Navigate to the Customers tab.

• Select the appropriate Customer.

  

• Choose the Environment where you want to deploy the base code changes.

  

• Click the Action dropdown in the left pane.

• Select Base Code Deploy.

  

• A pop-up will appear with a scheduler option and a dropdown showing the latest build version.

  

• Click Continue to initiate the deployment process.

• Once the process completes, the base code is successfully deployed to the selected environment.

Reference: Base Code Deploy – Optimizely Support

Extension Deployment

There are many customizations implemented according to project requirements, and these are developed within the extension project following Optimizely framework guidelines. To make these changes available in the environment, we need to deploy the extension project code. This can be done using the Extension Deployment option available in Mission Control.

Deploy Extension Code

• Log in to Mission Control.

• Navigate to the Customers tab.

  

• Select the appropriate Customer.

• Choose the Environment where you want to deploy the extension code.

  

• Click the Action dropdown in the left pane.

• Select Extension Deployment.

  

• A pop-up will appear with an optional scheduler and a dropdown showing available extension build versions.

  

• Select the desired extension version to deploy.

• Click Continue to initiate the deployment process immediately.

• Once the process completes, the extension code is successfully deployed to the selected environment.

Reference: Extension Deployment – Optimizely Support

Production User Files Sync

In any project, there are numerous user files—especially images—which play a crucial role in the website’s appearance and user experience. During development, it’s important to keep these files synchronized across all environments. Typically, the files in lower environments should mirror those in the production environment. Since clients often update files directly in production, the “Production User Files Sync” option in Mission Control becomes extremely useful. It allows developers to easily sync user files from production to lower environments, ensuring consistency during development and testing.

How to sync production user files

• Log in to Mission Control.

• Navigate to the Customers tab.

• Select the appropriate Customer.

  

• Choose the lower environment where you want to sync the user files.

• Click the Action dropdown in the left pane.

• Select User File Sync from the list of available options.

• A pop-up will appear with an optional scheduler and a Source Environment dropdown containing all environments available for the selected customer.

• Select Production as the source (or any environment as required), then click Continue to start the sync process.

• Depending on the size of the user files and network parameters, the process might take several minutes to complete.

Reference: Production User Files Sync – Optimizely Support

Production Database Sync

This option allows you to synchronize data from the production environment to a lower instance.
Note: Data cannot be synced from a lower instance back to production.

Critical Requirements

• Matching Website Keys
  
  • The website keys in both the production and target environments must match.
  • If they do not, the site may experience a startup failure and become unstable.

• Version Compatibility

  • The target environment must be running on a version that is equal to or newer than the source (production) version.

  • Both source and target environments must be on one of the last three supported long-term versions, or their corresponding short-term support versions.

  • If version requirements are not met, the sync process will fail.

• Data Loss Warning

  • This is a destructive operation—it will overwrite data on the target (lower) environment.

  • Ensure that no critical or important data exists in the sandbox or lower instance before initiating the sync.

The Production Sync option does not replicate all data, but it does synchronize several key components. Below is the list of data that gets synced:

Product Data

• Product settings (e.g., ERP Managed, Track Inventory, Quote Required)

• Attribute values

• Category assignments

• Product content (metadata and rich content)

• Product specifications

• Child variants

• Pricing and cost

• Product number and URL segment

• Warehouse inventory (stock levels)

• Shipping information

Category Data

• Category details (name, description)

• Category hierarchy

• Assigned products

• Category content (metadata and content)

• Attribute values

CMS Content

• CMS customizations made via out-of-the-box widgets (non-code changes)

• Variant page customizations and display rules

Additional Data

• Attribute types and values

• Variant types

• Customer records

• Website users

Data Not Synced from Production to Sandbox

The following areas are excluded from the Production Sync process and remain unchanged in the target sandbox environment:

• System Configuration
• Integration Job Settings
• Admin & User Data

  • Exceptions

    • If a production admin user has made changes to data being synced (like CustomerOrders, Content, etc.), that admin user is also synced to the sandbox.

    • Admin user roles are also synced to preserve permission context.

    • To prevent role duplication:

      • All sandbox roles are appended with -1.

      • Production roles retain their original names.

    • If a matching admin user exists in both environments:

      • The production user and roles are retained.

      • Sandbox-only users receive roles with the -1 suffix.

• Logs and Cache

Sync production data

• Log in to Mission Control.

• Navigate to the Customers tab.

• Select the appropriate Customer.

  

• Choose the lower environment where you want to sync the production data.

• Click the Action dropdown in the left pane.

  

• Select Production Database Sync from the list of available options.

• A pop-up will appear with:

  • • An optional scheduler, and

    • A Source Environment dropdown (select the production environment).

  

• Click Continue to initiate the sync process.

•  This is a large-scale data transfer operation. The sync process may take several minutes to complete, depending on the volume of data.

Note: Optimizely does not provide a rollback option for this process. Once the deployment is complete, any changes—such as modifications to stored procedures or database scripts—restored it.

Reference: Production Database Sync – Optimizely Support

As artificial intelligence continues to reshape the digital landscape, organizations are seeking clarity on how to strategically integrate AI into their digital experience platforms (DXPs). In its latest report, The Impact of AI on Digital Experience Platforms, Forrester explores how DXP vendors are embedding AI agents to streamline experience operations and expand toolsets — from copilots to code generators. Perficient was proud to contribute its DXP and AI expertise to this research, joining the group of vendors and service providers interviewed for the report. 

“Generative AI (GenAI) is reshaping digital experience platforms (DXPs) by automating content and campaign creation, powering intelligent copilots for marketers and developers, and boosting customer engagement through predictive insights and personalization.” —Forrester, The Impact of AI on Digital Experience Platforms

Why AI Belongs in the DXP Conversation

Today’s tech leaders face a growing challenge: delivering consistent, personalized experiences across a fragmented landscape of devices, channels, and customer expectations. DXPs are uniquely positioned to address this complexity. As Forrester notes, DXPs are rich in customer interaction data, support high-value business outcomes, and serve a diverse set of practitioners — all of which make them fertile ground for AI innovation. 

“DXP is a trove of trusted customer interaction data… Unleashing AI on this data enables organizations to understand audience intent and respond to that intent with irresistible offers.” — Forrester, The Impact of AI on Digital Experience Platforms

And Perficient’s experts agree that DXPs are a great place to start when integrating AI into experience delivery. 

“Marketing and IT leaders are under pressure to deliver personalized, omnichannel experiences at scale, and that’s exactly where DXPs shine. By embedding AI into the core of these platforms, clients can unlock the full value of their customer data and streamline operations across content, commerce, and campaigns,” said Mark Polly, Perficient Principal, Customer Experience Platforms.  

Agentic AI Ushers in a New Era of Experience Operations

The report highlights the rise of agentic AI and how these intelligent agents operate within DXPs to automate tasks, answer questions, and optimize workflows. These agents are transforming how marketers, developers, and content creators interact with their platforms, reducing friction and accelerating time to value. 

Perficient’s experience with orchestration tools and AI agents reinforces this trend. While many vendors offer orchestration capabilities, Perficient often helps clients integrate these tools across their broader tech ecosystem. 

” For marketing and IT leaders, true orchestration moves beyond linear workflows; it’s about integrating platforms like AEM and Optimizely to create a dynamic, responsive system. This integration is the key to driving operational efficiency and gaining the unified insights needed for deeper customer engagement. AI agents play a critical role here, transforming those rigid workflows into the real-time orchestration that a modern customer journey demands. Adoption is still in its early stages, which is where we help clients build a strategic advantage,” said Perficient digital strategy principal Grant Davies. 

Emerging GenAI Use Cases in DXPs

From brand-aware content creation to code generation and experimentation, GenAI is also rapidly expanding its footprint in DXP environments. Vendors like Adobe, Sitecore, and Salesforce are launching copilots and agents that empower users to create, test, and optimize experiences with unprecedented speed and precision. 

Perficient is already helping clients explore these capabilities and align them with business goals. 

Polly said, “We’re seeing real momentum around GenAI use cases in DXP from brand-consistent content creation to intelligent experimentation. These capabilities aren’t just flashy features; they’re solving real business problems like reducing time to market and improving conversion rates. The key is aligning AI with measurable outcomes and ensuring strong governance.” 

Perficient Wins 2025 Artificial Intelligence Excellence Award for GenAI Integrity Accelerator   Learn More

Strategic Adoption Requires Strong Foundations 

Successful AI adoption in DXPs requires more than just technology. Organizations must invest in strong data foundations, human oversight, and change management to ensure responsible and effective use of AI. These are areas where Perficient continues to guide clients with strategic consulting and hands-on implementation. 

We believe our inclusion in the research for Forrester’s report, The Impact of AI on Digital Experience Platforms, reflects our deep expertise in helping enterprise clients implement and optimize DXPs. Whether it’s integrating predictive analytics, deploying cognitive copilots, or improving data governance, our teams are leading the way in enabling AI-powered transformation. 

We’re honored to be interviewed for this research and proud to contribute to the evolving conversation around AI in digital experience. If you’re exploring how to bring AI into your DXP strategy, we invite you to connect with us and keep the conversation going. 

Access the report here (available to Forrester subscribers or for purchase).

Contact us  to learn more. 

Nowadays, as businesses choose the right ecommerce platform, it is challenging, but selecting the right platform is a crucial decision for any business that wants to grow online. Two very popular platforms are discussed in this blog. I am comparing two e-commerce technologies, specifically Magento (Adobe Commerce) and Optimizely Configured Commerce, in terms of their technology features.

Magento and Optimizely Configured Commerce are widely used e-commerce platforms and content management systems (CMS) that allow businesses to build and manage online stores. Both have different technologies, features, and serve different business purposes. This blog helps us choose e-commerce platforms

Two popular choices are:

• Magento (Adobe Commerce) – Flexible and works for both B2C and B2B.
• Optimizely Configured Commerce – Explicitly built for B2B.

Both are powerful, but they serve different needs. Let’s break them down so you can decide which fits you best.

Magento (Adobe Commerce)

Magento is a popular open-source eCommerce platform. Magento, now known as Adobe Commerce, is a leading e-commerce platform acquired by Adobe in 2018. It offers powerful, customizable tools for building and managing online stores, supporting both B2C and B2B models. With rich out-of-the-box features, seamless integrations, and scalable architecture, Adobe Commerce helps businesses deliver exceptional shopping experiences.

Why Businesses Choose Magento

• Almost everything can be customized – design, features, and workflows.
• Packed with tools for products, payments, shipping, and marketing.
• Works well for both small and large businesses.
• Huge global developer community.

Magento offers two versions: Magento Open Source and Adobe Commerce. Actually, Magento Open Source is ideal for developers and small businesses that want complete control and flexibility without licensing costs. Adobe Commerce, on the other hand, is built for enterprises that need advanced features, scalability, and integration with Adobe’s ecosystem.

Magento Open Source

Magento Open Source is free, fully customizable, and has a plethora of extensions available on the Magento (Adobe Commerce) Marketplace. Smaller companies and those who are just entering the e-commerce field find it a significant advantage that the platform is free, allowing them to start developing their store with no upfront platform costs. If they need to add more features and functionalities, they can easily do so by using extensions from the marketplace, many of which are also free. And because Magento Open Source can easily be expanded with new features, medium-sized companies also consider it an ideal platform for their needs.

Adobe Commerce

Adobe Commerce is the enterprise edition of Magento Open Source, a fully featured, subscription-based eCommerce solution from Adobe. It comes with advanced features out of the box, but it is also fully customizable and easily integrates with third-party extensions. Large businesses that require those advanced capabilities, value 24/7 customer support, and want the option for cloud infrastructure opt for Adobe Commerce. The platform is robust, scalable, and secure, and allows eCommerce companies to manage multiple brands, currencies, and geographies from a single platform. Adobe Commerce supports both B2C and B2B business models.

Please see the screenshot of the Magento (Adobe Commerce) Dashboard.

Optimizely Configured Commerce Cloud

Optimizely Configured Commerce is a cloud-based B2B eCommerce platform designed specifically for manufacturers, distributors, and wholesalers. It helps businesses sell complex products and services online while managing customer-specific pricing, product configurations, and ordering workflows.

History of Optimizely Configured Commerce

Optimizely Configured Commerce, known initially as Insite Software, was designed for B2B e-commerce, focusing on extensive product catalogs, complex pricing, and ERP integration.

In 2020, it became part of Episerver, and in 2021, the company rebranded to Optimizely. The platform moved to the cloud, got stronger personalization tools, and adopted an API-first approach.

Who it’s for: Manufacturers, distributors, and wholesalers with complex ordering processes.

Why Businesses Choose Optimizely

• Built-in personalization and product recommendations.
• Advanced B2B account features (contract pricing, order approvals).
• Real-time ERP  integration.
• Mobile-friendly and API-ready.
• Fast, intelligent search.

There are two options available to use Optimizely Configured Commerce: the SDK (Software Development Kit) and Cloud, which is fully managed by Optimizely and is explained in short below.

1. SDK (Software Development Kit) – For companies that want complete control

• Build and test locally.
• Ideal for custom integrations and workflows.
• Best for unique business needs.

2. Cloud – Fully managed by Optimizely

• No server maintenance.
• Automatic scaling and updates.
• Focus on running your business, not the tech.

If you want to understand comparison  more in detail, please read the full blog Difference Between Optimizely Configured Commerce SDK and Cloud

Optimizely Configured Commerce includes a built-in CMS for adding and managing pages and content. It offers two options: Classic CMS, which is older and based on AngularJS, and Spire, which is newer and built on React.js. Spire is faster, easier to use, and simpler to update. For more details, please read the blog Optimizely Configured Commerce in-built CMS Details

Please see the screenshot of Optimizely Configured Commerce Admin Dashboard.

Magento (Adobe Commerce) vs Optimizely Configured Commerce – Feature Comparison

Technology Stack Comparison – Magento (Adobe Commerce) vs Optimizely Configured Commerce

Frontend Technology Comparison

Architecture Comparison

Cloud & DevOps Comparison

Security & Compliance Comparison

Magento (Adobe Commerce) vs Optimizely Configured Commerce: Which One Should You Choose?

Business Type & Use Case

• Magento (Adobe Commerce) is ideal for:
  • Businesses needing deep customization
  • Companies with strong in-house development teams
  • Retailers focused on B2C commerce
  • Multi-store operations with complex catalogs
• Optimizely Configured Commerce suits:
  • Mid-market to enterprise B2B companies
  • Organizations seeking fast deployment and ease of use
  • Strong and built-in CMS
  • Businesses prioritizing mobile optimization and AI-driven personalization
  • Those needing built-in ERP/CRM integrations

Conclusion

Choosing between Magento (Adobe Commerce) and Optimizely Configured Commerce ultimately comes down to your business goals, technical capabilities, and customer needs.

• If your business demands maximum flexibility, custom workflows, and supports both B2C and B2B, Magento offers a robust platform with deep customization and a vibrant developer ecosystem.
• If you’re a B2B-focused organization looking for a streamlined, cloud-based solution with CMS built-in features and easy integration with ERP and CRM systems, Optimizely is purpose-built to meet those needs.
• Understand Maximizing B2B Success with Optimizely Commerce

Read more about Magento (Adobe Commerce), read the official document, and Optimizely Configured Commerce, so read the official document

Both platforms are powerful. The key is to align your choice with your long-term strategy, internal resources, and the experience you want to deliver to your customers.

If you wish to launch your Optimizely Configured Commerce site, one of our first steps will be setting up your cloud project. This step is crucial, as it forms the technical backbone of your eCommerce environment and ensures everything starts off on the right foot.

Provisioning a cloud project involves setting up and configuring all the essential cloud resources needed to run your Optimizely-powered eCommerce site. This includes components like compute power, storage, databases, and networking—all of which are handled by the Optimizely Infrastructure team once you submit a project setup request. Think of it as laying the digital foundation for your online store. The goal is to ensure your site is secure, high-performing, and scalable—whether you’re launching your business or expanding it.

When you’re using Optimizely Configured Commerce, getting the cloud provisioning right is essential. It ensures that your platform is set up to meet the unique demands of your business, making sure your site can handle whatever traffic or sales volume comes its way.

What Does “Provisioning an Optimizely Configured Commerce Cloud Project” Mean?

In simple terms, provisioning means setting up your environments—Sandbox and Production—on Optimizely’s cloud infrastructure. These environments are where your site gets built, tested, and eventually launched.

• Sandbox is your staging area—a safe space for testing features and reviewing changes.
• Production is the live version of your website—the one your customers will use to shop.

As an implementation partner, our Perficient team’s job goes beyond just overseeing the technical setup. While Optimizely handles the actual provisioning of cloud resources, we manage all the coordination and ensure both environments are configured securely and correctly. More importantly, we also help you customize the platform to fit your specific business needs—this includes tailoring the base theme to align with your branding and configuring or extending native features, so your commerce experience reflects how you operate. Our goal is to make sure your site doesn’t just work—it works exactly how you need it to.

What Happens in Sandbox vs. Production?

Sandbox is your testing ground. It’s where we’ll review features, try out CMS changes, and ensure everything works before going live. This environment is updated regularly with the latest code and builds.

Important notes:

• Sandbox is not meant for permanent content—it’s for testing only
• You can’t use custom domains in Sandbox
• Everything created here should be treated as temporary

When you’re ready to launch, we’ll move approved content into Production, and that’s where your site officially goes live.

Production, on the other hand, is the live, customer-facing version. Once your site is launched, any content updates should be made directly in Production, not Sandbox. For compliance and security reasons, Optimizely does not allow copying content from Production back into Sandbox.

What We’ll Need From You

To kick things off, we’ll gather a few key details from you. These are submitted through Optimizely’s official Project Initiation Form, which we’ll fill out on your behalf during onboarding.

Here’s what we’ll ask for:

• Email addresses for deployment and outage notifications
• Authorized team members who should have project access
• Your public-facing production domain name (URL)
• Access to your GitHub repository (we’ll help set this up)

We’ll also install the Optimizely Build Service in your repository to handle automated deployments.

Don’t worry—our team will walk you through each part of this and handle the form submission.

Where Is Everything Hosted?

Optimizely uses a hybrid cloud setup for new customers:

• Azure hosts the application and database
• AWS handles file storage and search functionality

This ensures your site has strong performance, security, and scalability across the board.

Working with GitHub

During onboarding, we’ll help you set up a GitHub repository. This is where we store your site’s code and manage updates. We’ll make sure that:

• Your repo includes a proper production branch
• Required files like extensions.dll and versionInfo.yaml are in place
• The versionInfo.yaml for Production matches Sandbox exactly

This setup helps keep everything in sync and allows Optimizely to deploy your updates smoothly.

Basic pipeline

Workflow Pipeline

Conclusion

Provisioning a cloud project for Optimizely Configured Commerce is the first significant step toward launching a reliable, scalable, and high-performing eCommerce site. While Optimizely handles the heavy lifting behind the scenes, our team ensures the entire process is smooth, secure, and tailored to your business needs. From setting up your environments to configuring the platform and customizing it to match your brand—we’re here to guide you every step of the way. Once the groundwork is laid, you’ll be well-positioned to launch with confidence and grow without limits.

In this section, we focused primarily on generating read-only credentials and how to use them to connect to the database.

Generate Database Credentials

The Mission Control tool generates read-only database credentials for a targeted instance, which remain active for 30 minutes. These credentials allow users to run select or read-only queries, making it easier to explore data on a cloud instance. This feature is especially helpful for verifying data-related issues without taking a database backup.

Steps to generate database credentials

1. Log in to Mission Control.

2. Navigate to the Customers tab.

3. Select the appropriate Customer.

   

4. Choose the Environment for which you need the credentials.

   

5. Click the Action dropdown in the left pane.

6. Select Generate Database Credentials.

   

7. A pop-up will appear with a scheduler option.

   

8. Click Continue to initiate the process.

9. After a short time, the temporary read-only credentials will be displayed.

Once the temporary read-only credentials are generated, the next step is to connect to the database using those credentials.

To do this:

1. Download and install Azure Data Studio
   Download Azure Data Studio

2. Open Azure Data Studio after installation.

   

3. Click “New Connection” or the “Connect” button.

   

4. Use the temporary credentials provided by Mission Control to connect:

   • Server Name: Use the server name from the credentials.

   • Authentication Type: SQL Login

   • Username and Password: As provided in the credentials.

5. Once connected, you can execute SELECT queries to explore or verify data on the cloud instance.

For more details, refer to the official Optimizely documentation on Generating Database Credentials.

For Part I, visit: Optimizely Mission Control – Part I

Optimizely Configured Commerce (Spire) is a strong platform for creating content-rich ecommerce sites, especially suited for wholesalers and manufacturers. Alongside powerful e-commerce features like product recommendations and fast ordering, it supports extensive storefront customization with blogs, case studies, forums, and other content types.

To build clean, scalable, and maintainable websites on Optimizely Configured Commerce, it’s crucial to follow these essential frontend coding standards and best practices.

• Maintaining clean, standardized frontend code ensures scalable, accessible, and high-performing websites. 
• Optimizely Spire emphasizes structured, reusable components instead of raw HTML or inconsistent styling. 
• Adopting consistent coding conventions across HTML, CSS, and component design keeps projects maintainable and easy to scale. 

The suggested coding standards for Spire’s frequently used frontend elements are listed below.

Wrapper Elements (div)

Using generic wrappers like <div> can lead to unnecessary nesting and less maintainable code. Prefer styled components to create clear, consistent, and scalable layouts. 

• • Less preferable options

    <div class="container">…</div>
    <Typography as="div">…</ Typography >
    

  • Recommended options

    <StyledWrapper className="container">…</StyledWrapper>

Heading(h1-h6, p, span, strong)

Use the Typography component with the correct “as” prop for all headings and text elements to ensure semantic HTML, accessibility, and consistent styling. 

Note: If you don’t specify the “as” prop, Typography defaults to rendering as a <span> 

• • Less preferable options

    <h2> Title</h2>
    <div class="heading">…</div>

  • Recommended options

    <Typography as="h2">…</Typography>

Anchor/Button

For navigation and actions, avoid mixing raw tags. Use dedicated components to keep interactions accessible, consistent, and semantically correct. 

• • Less preferable options

    <a href="/url">…</a>
    <button><a href="/url">…</a></button>
    <button class="btn btn-primary">…</button>
    

  • Recommended options

    <Link href="url">…</Link>
    <Clickable href="url">…</Clickable>
    <Button variant="primary">…</Button>
    

Image

Avoid raw <img> tags and use image components that provide better accessibility and responsive handling for consistent and maintainable layouts.

• • Less preferable options

    <img src="/images/logo.png" alt="Logo" />

  • Recommended options

    <Img src="/images/logo.png" altText={translate(“Logo")} />

Table Elements(table, thead, tbody, th, td)

Avoid using raw HTML tables or div-based layouts. Instead, use table components to maintain semantic markup, improve accessibility, and ensure consistent styling.

• • Less preferable options

    <div style="display:table;width:100%">
      <div style="display:table-row;font-weight:bold">
        <div style="display:table-cell;padding:8px">…</div>
      </div>
    </div>
    
    <table>
      <tr><th>…</th></tr>
      <tr><td>…</td></tr>
    </table>
    

  • Recommended options

    <DataTable>
        <DataTableHead>
            <DataTableHeader>Date</DataTableHeader>
        </DataTableHead>
        <DataTableBody>
            <DataTableRow><DataTableCell>2025-06-28</DataTableCell></DataTableRow>
        </DataTableBody>
    </DataTable>
    

Row/Column

By preventing inline styles, ensuring clean, responsive layouts, and maintaining a consistent grid structure throughout the project, GridContainer and GridItem help you avoid hard-coded rows, columns, or improper nesting.

• • Less preferable options

    <div class="row">
        <div class="column" style="width: 50%;">Left content</div>
        <div class="column" style="width: 50%;">Right content</div>
    </div>
    
    <GridContainer>
        <GridItem width={[12, 12, 12, 12, 12]}>
            <GridItem width={[12, 12, 12, 6, 6]}>… </GridItem>
            <GridItem width={[12, 12, 12, 6, 6]}>… </GridItem>          
        </GridItem>
    </GridContainer>
    
    <GridContainer>
        <StyledWrapper>
            <GridItem width={[12, 12, 12, 6, 6]}>…</GridItem>
        </StyledWrapper>
        <GridItem width={[12, 12, 12, 6, 6]}>…</GridItem>
    </GridContainer>
    

  • Recommended options

    <GridContainer>
        <GridItem width={[12, 12, 12, 6, 6]}>… </GridItem>
        <GridItem width={[12, 12, 12, 6, 6]}>…</GridItem>
    </GridContainer>
    
    <GridContainer>
        <GridItem width={[12, 12, 12, 12, 12]}>
            <GridContainer>
                <GridItem width={[12, 12, 12, 6, 6]}>… </GridItem>
                <GridItem width={[12, 12, 12, 6, 6]}>… </GridItem>  
            </GridContainer>
        </GridItem>
    </GridContainer>
    
    <GridContainer>
        <GridItem width={[12, 12, 12, 12, 12]}>
            <GridContainer>
                <GridItem width={[12, 12, 12, 6, 6]}>… </GridItem>
                <GridItem width={[12, 12, 12, 6, 6]}>… </GridItem>
            </GridContainer>
            <StyledWrapper>…</StyledWrapper>
        </GridItem>
    </GridContainer>
    

Hidden/VisuallyHidden

Avoid using inline styles or custom classes to hide content. Instead, use dedicated components like Hidden or VisuallyHidden to ensure accessibility and consistent behavior.

• • Less preferable options

    <div style="display: none;">…</div>
    
    <span style="position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0, 0, 0, 0); overflow: hidden;">…</span>
    
    <span class="visually-hidden">…</span>
    

  • Recommended options

    <Hidden below="md">…</Hidden>
    <VisuallyHidden>…</VisuallyHidden>
    

Translation

Always wrap translatable text with the translate() function to ensure localization support, avoid hardcoded strings, and make the UI adaptable to different languages.

• • Less preferable options

    <Typography>Translatable Text</Typography>

  • Recommended options

    <Typography>{translate(" Translatable Text")}</Typography>

GridItem and GridContainer – Spacing

Use the gap property on GridContainer to manage spacing between columns, rather than manually adding padding or margins. This ensures cleaner, more consistent, and maintainable layouts.

• • Less preferable options

    customGridContainer: { css: css` > div > div {padding: 8px;} `,}

  • Recommended options

    customGridContainer: {gap: 16}

Breakpoints

Customize your breakpoints to avoid repeating identical values. This promotes consistency, reduces redundancy, and supports a scalable layout aligned with your design system.

• • Less preferable options

    breakpoints: {
        keys: ["xs", "sm", "md", "lg", "xl"],
        values: [0, 320, 768, 1024, 1024],
        maxWidths: [390, 768, 1024, 1024, 1440],
    },
    

  • Recommended options

    breakpoints: {
        keys: ["xs", "sm", "md", "lg", "xl"],
        values: [0, 576, 768, 992, 1200],
        maxWidths: [540, 540, 720, 960, 1140]
    },
    const customTheme = {
        ...baseTheme,
        breakpoints: {
          ...baseTheme.breakpoints,
          values: [0, 800, 1200],        // Custom breakpoint widths
          maxWidths: [520, 720, 1100]    // Max container widths per range
        },
    }

Icons

Avoid hardcoding color values in SVG files. Instead, use currentColor to allow icons to inherit the surrounding text color, ensuring consistency with the theme and simplifying theming.

• • Less preferable options

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
      <path d="M16.59 8.59L12 13.17L7.41 8.59L6 10L12 16L18 10Z" fill="#f00"/>
    </svg>
    

  • Recommended options

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
      <path d="M16.59 8.59L12 13.17L7.41 8.59L6 10L12 16L18 10Z" fill="currentColor"/>
    </svg>
    

Writing CSS for Dynamically Generated Classes and Selectors

Avoid targeting hashed or auto-generated class names. Instead, use stable selectors or “data-attributes” to ensure maintainable and predictable styling, and to prevent breakage when class names change.

• • Less preferable options

    .girEbT .GridItemStyle-sc-1qhu4nt {…}
    [class*="GridItemStyle—sc--"], 
    [class*="GridItemStyle--"], 
    [class*="GridItemStyle-"] {…}
    

  • Recommended options

    [class*="GridItemStyle"] {…}
    .testClassName {…}
    [data-test-selector=”testSelector”] {…}
    

Conclusion

• Utilize built-in Optimizely Spire components like Tabs, Accordions, Checkboxes, Radios, and Form Fields to maintain clean, standardized code.
• Following consistent frontend coding standards guarantees projects that are scalable, maintainable, and accessible.
• Writing modular, reusable code minimizes technical debt, fosters better collaboration, and enhances overall user experience.
• Embracing these best practices ensures your projects are future-ready and easier to maintain over time

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:

• 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

Media queries are essential for modern websites. They enable responsive design by allowing your site or UI to adapt seamlessly across different device sizes. In this blog, we’ll explore how to implement media queries in Optimizely Spire and how to update or customize breakpoints to suit your design needs.

Let’s get started!

Setting Up Breakpoints

First, we’ll define breakpoints based on our style guide. Breakpoints help your website adjust its layout depending on the screen size, such as mobile, tablet, or desktop.

In Optimizely Spire, breakpoints are defined within the theme configuration file. To update these breakpoints in the base code, you need to create a Start.tsx file—if it hasn’t been made already.

Path: modules/blueprints/CustomBlueprint/src/Start.tsx

Where to Place Breakpoint Configuration

Place the breakpoint configuration within either the setPreStyleGuideTheme or setPostStyleGuideTheme functions. These functions allow you to customize the theme before or after the default style guide is applied.

This setup ensures that your custom breakpoints are recognized and used consistently throughout your application.

Below is the configuration structure for setting custom breakpoints in Optimizely Spire:

Understanding the Breakpoint Configuration

To make your site responsive, you define breakpoints—specific screen widths where your layout should adapt. Here’s what each part of the configuration means:

• Keys – Represent screen size labels such as:

These are shorthand names for different device sizes:

• • xs – Extra small (e.g., small phones)
  • sm – Small (e.g., larger phones)
  • md – Medium (e.g., tablets)
  • lg – Large (e.g., small laptops)
  • xl – Extra large (e.g., large desktops)

• Values – Minimum Widths

These define when each screen size category starts:

• • xs starts at 0px
  • sm starts at 576px
  • md starts at 768px
  • lg starts at 992px
  • xl starts at 1200px

• Max Widths – Content Limits

These define the maximum width the content area can grow to at each breakpoint. Even if the screen is wider, the content won’t stretch beyond these limits (example: 1140px for xl).

Think of it like this:

• On a phone → small screen → use xs styles
• On a tablet → medium screen → use md styles
• On a laptop or desktop → big screen → use lg or xl styles

Creating Media Queries in a Standardized Way

To create media queries in Optimizely Spire, we rely on the breakpoint configuration defined earlier. This ensures consistency across the application and simplifies responsive design.

How It Works

Behind the scenes, Spire uses a utility called breakpointMediaQueries to convert standardized media query definitions into browser-readable CSS.

Utility Location:  modules\mobius\src\utilities\breakpointMediaQueries.ts

This utility helps generate clean and consistent media queries based on your defined breakpoints.

Available Media Query Types:

Here are three types of media query options available:

• min – Applies styles when the screen is at or above a certain width.
• max – Applies styles when the screen is at or below a certain width.
• minMax – Applies styles between two specific widths.

Default Media Query Structure

Here’s what a typical media query definition looks like using this utility:

Now let’s see how this media query utility works with min, max, and minMax.

• min

The min-width media query structure will be as follows:

 Example: To apply styles for min-width: 576px, insert your CSS code in the appropriate section.                                               

Similarly, if you want to apply CSS for min-width: 768px, just replace the respective null with your CSS code.

• max

The max-width media query structure will be as follows:

Example: To apply styles for max-width: 575px, insert your CSS code in the appropriate section.

Similarly, if you want to apply CSS for max-width: 767px, just replace the respective null with your CSS code.

• minMax

The minMax media query structure will be as follows:

Example: To apply styles between min-width: 576px and max-width: 767px, insert your CSS code in the appropriate section.

Similarly, if you want to create media queries for other screen sizes, follow the same approach as described above.

You can also define multiple CSS rules as shown in the examples below.

Conclusion

Creating responsive layouts doesn’t have to be complicated or repetitive. A utility like breakpointMediaQueries helps you apply consistent styling logic throughout your application. Whether you use a mobile-first (min), desktop-first (max), or range-based (minMax) approach, this system lets you apply styles exactly where they’re needed.

By simplifying the media query logic, your code becomes easier to read and maintain, so you can focus more on design and less on repetitive code. Choose the approach that best fits your project, and let your breakpoints handle the rest.

Optimizely provides powerful tools that make it easy to build, release, and manage cloud infrastructure efficiently.

Optimizely Mission Control Access

To use this tool, an Opti ID is required. Once you have an Opti ID, request that your organization grants access to your user account. Alternatively, you can raise a ticket with the Optimizely Support team along with approval from your project organization.

Key Actions

This tool provides various essential actions that can be performed for managing your cloud environments effectively. These include:

• Restart Site

  • Restart the application in a specific environment to apply changes or resolve issues.

• Database Backup

  • Create a backup of the environment’s database for debug purposes.

• Generate Database Credentials

  • Generate secure credentials to connect to the environment’s database.

• Base Code Deploy

  • Deploy the base application code to the selected environment.

• Extension Deployment

  • Deploy any custom extension changes.

• Production User Files Sync

  • Synchronize user-generated files (e.g., media, documents) from the production environment to lower environments.

• Production Database Sync

  • Sync the production database to another lower environment (such as a sandbox) to sync up data.

Let’s walk through each of these actions step by step to understand how to perform them.

Restart Site

We can restart the site using the Mission Control tool. This option is handy when a website restart is required due to configuration changes. For example, updates to the storage or search provider often require a restart. Additionally, if an integration job gets stuck for any reason, the ability to restart the site becomes very helpful in restoring normal functionality.

How to restart the website

1. Log in to Mission Control.

2. Navigate to the Customers tab.

3. Select the appropriate Customer.

   

4. Choose the Environment where the restart is needed.

   

5. Click on the Action dropdown in the left pane.

   

6. Select Restart Site from the list.

7. A pop-up will appear where you can either schedule the restart or click Continue for an immediate restart.

Reference: Restart Site – Optimizely Support

Database Backup

This is another useful feature available in Mission Control.

Using this option, we can take a backup from the Sandbox or Production instance and import it into the local environment. This helps us debug issues that occur in Sandbox or Production environments.

The backup file is generated with a .bacpac extension.

Steps to take a backup

1. Log in to Mission Control.

2. Navigate to the Customers tab.

   

3. Select Database Backup from the list.

   

4. A pop-up will appear prompting for a scheduled backup time.

5. Set Skip Log to False to minimize the backup size.

   

6. Click Continue and wait for the process to complete.

7. Once finished, click on the provided link to download the backup file.

Reference: Database Backup – Optimizely Support

Stay tuned for the next blog to explore the remaining actions!

This blog post will discuss MultiSite validation for either ContentArea or LinkItemCollection, which are both capable of storing multiple items. Although we can use the custom MaxItem attribute to validate the ContentArea or LinkItemCollection, the problem arises when the same property is used for multiple sites with different validation limits.

In a recent project, we were tasked with migrating multiple websites into a single platform using Optimizely. These sites shared common ContentTypes wherever applicable, though their behavior varied slightly depending on the site.

One of the main challenges involved a ContentType used as the StartPage with the same properties across different sites. While the structure remained the same, the validation rules for its properties differed based on the specific site requirements. A common issue was enforcing a maximum item validation limit on a property like a ContentArea, where each site had a different limit—for example, Site A allowed a maximum of 3 items, while Sites B and C allowed 4 and 5 items, respectively.

To solve this multisite validation scenario, we implemented a custom validation attribute that dynamically validated the maximum item limit based on the current site context.

Below are the steps we followed to achieve this.

• Make a MaxItemsBySitesAttribute custom validation attribute class and add an AttributeUsage attribute with AllowMultiple = true.
• Then inherit from ValidationAttribute as a base class. This class is used to provide server-side validation rules on content properties for Block, Page, or Media content types.

    [AttributeUsage(AttributeTargets.Property, AllowMultiple = true)]
    public class MaxItemsBySitesAttribute : ValidationAttribute
    {
        private readonly string[] _siteName;
        private int _max;

        public MaxItemsBySitesAttribute(int max, params string[] siteName)
        {
            _max = max;
            _siteName = siteName;
        }
        protected override ValidationResult IsValid(object value, ValidationContext validationContext)
        {
            var siteSpecificLimit = GetSiteSpecificMaxLimitByFieldName(validationContext.MemberName, validationContext?.ObjectType?.BaseType);
            string errorMsg = $"{validationContext.DisplayName}, exceeds the maximum limit of {siteSpecificLimit} items for site {SiteDefinition.Current.Name}";

            if (value is ContentArea contentArea)
            {
                if (contentArea.Count > siteSpecificLimit)
                {
                    return new ValidationResult(errorMsg);
                }
            }
            else if (value is LinkItemCollection linkItems)
            {
                if (linkItems.Count > siteSpecificLimit)
                {
                    return new ValidationResult(errorMsg);
                }
            }

            return ValidationResult.Success;
        }

        private int GetSiteSpecificMaxLimitByFieldName(string fieldName, Type type)
        {
            var propertyInfo = type.GetProperty(fieldName);
            if (propertyInfo != null)
            {
                var attributes = propertyInfo.GetCustomAttributes<MaxItemsBySitesAttribute>()?.ToList();
                var siteMaxLimit = attributes.FirstOrDefault(x => x._siteName != null && 
                                                             x._siteName.Any(site => site == SiteDefinition.Current.Name));

                return siteMaxLimit == null ? 0 : siteMaxLimit._max;
            }
            return 0;
        }
    }

• • The function GetSiteSpecificMaxLimitByFieldName() in the above code played an important role in this class to retrieve decorated attribute(s) [MaxItemsBySites(2, “AlloyBlog”)] and [MaxItemsBySites(3, “AlloyDemo”, “AlloyEvents”)] with specified item limit counts and site names.

• Then, decorate the [MaxItemsBySites] custom attribute(s) on the ContentArea or LinkItemCollection property by adding the maximum item limit and site(s) name as given below.

public class StartPage : SitePageData
{
    [Display(
        GroupName = SystemTabNames.Content,
        Order = 320)]
    [CultureSpecific]
    [MaxItemsBySites(2, "AlloyBlog")]
    [MaxItemsBySites(3, "AlloyDemo", "AlloyEvents")]
    public virtual ContentArea MainContentArea { get; set; }
}

• The attribute will receive a trigger and verify the maximum item limit and site name against the site that is currently running and display an error message below if validation matches.

By implementing site-specific maximum item validation in your Optimizely CMS multisite, content authors can ensure content consistency, enhance user experience, and maintain precise control over content areas and link collections across diverse properties in different sites.

In case you want other validation by site-specific, you can use the same approach by changing the code accordingly.

In many B2B commerce implementations, the default features provided by Optimizely Configured Commerce may fall short, particularly when it comes to managing or storing custom data. This blog will outline how to create and work with custom database tables within the platform, ensuring flexibility without altering core system components.

What Are Custom Tables?

Custom tables are user-defined database tables used to hold additional information about products, customers, orders, or other business-specific data. They allow developers to expand the platform’s capabilities without interfering with the existing database schema, which supports better maintainability and easier upgrades.

Why Create Custom Tables?

Here are the key reasons to implement custom tables in Optimizely Configured Commerce:

• Storing metadata or attributes that don’t naturally fit into existing system tables
• Supporting business processes that require unique data structures
• Keeping the core schema that clean while enabling platform customization

Steps to Implement a Custom Table

Creating a custom table involves adding a new table via a SQL script and configuring it to run automatically using the Optimizely bootstrapper.

1. Set Up the Project Structure:
   Begin by creating a folder named DatabaseScript at the root of your Extension project.
   
2. Follow Naming Conventions:
   Use the following format for naming your SQL script files: YYYY.MM.DD.SS.DescriptiveName.sql
   • YYYY = year
   • MM = month
   • DD = day
   • SS = sequence number for that day
     This convention ensures scripts run in the correct order and version control is maintained.
3. Mark Script as Embedded Resource:
   To ensure the bootstrapper can detect and execute your script, set its Build Action to Embedded Resource in the properties panel.
   

Example: Creating a Custom Table for Product Data

Let’s say you want to store extra product details. You could create a table called ProductExtensions using a script named 2025.06.03.01.Table_ProductExtension.sql. To proceed, this file should be added to the DatabaseScript folder and marked as an embedded resource with the following content:

Once you execute the script, the system creates a custom table named Extension.ProductExtension in the database, as shown below:

Guidelines for Custom Table Design

• All custom tables, views, and stored procedures must exist under the Extensions schema.
• You can modify and load data into other schemas, but DDL operations are restricted to the Extension schema.
• Each custom table must include a primary key field named Id of type uniqueidentifier with a default of newsequentialid().
• Include audit fields like CreatedOn, CreatedBy, ModifiedOn, and ModifiedBy, all non-nullable and set with proper defaults.
• Add indexes on commonly queried fields like ErpNumber and Id.
• You can define foreign key relationships to dbo schema tables, since the Extensions user has permission to reference them.

Script Execution and Bootstrapper Behaviour

When the application starts, the bootstrapper checks for new database scripts and runs them. It also logs each executed script in the DatabaseScript table. To re-execute a script, however, you must delete both the custom table and its entry in the DatabaseScript table. On the next application start, the system will execute the script again and relog it.

Conclusion

Custom tables in Optimizely Configured Commerce offer a powerful way to tailor the platform to your organization’s unique data and functionality needs, all without compromising the integrity of the core system

Reference: Create custom tables with an entity and WebApi