Salesforce Commerce Cloud has an abundance of tools, cartridges, integrations, and applications that help make the ecommerce experience smooth, easily maintained, and unified across many systems and technologies. As a Salesforce Commerce Cloud ecommerce partner with a team of talented and certified Commerce Cloud developers, CQL knows a thing or two about custom properties and integrations.
Although many use the Commerce Cloud for single-brand stores, the platform has the versatility to support multi-brand development. The platform includes web development tools like Syntactically Awesome Style Sheets (SASS), which can help developers quickly sculpt multiple brands and new features for those brands. Let’s take a technical look at how SASS works to style these brands and what custom properties and cartridges can be utilized to help shape multi-brand Salesforce store development.
Style Your Brands Dynamically with SASS Variables
With Salesforce Commerce Cloud developers and business managers can maintain clean web coding processes, like using SASS, to sculpt CSS. This allows you to take a single style codebase and deliver unique branding to each site in your multi-brand architecture. Let’s take a look at an example style for buttons:
button {
color: black;
background: white;
}[TM1] In some cases, the base CSS (black and white) may work for one brand, but not the other. What if your primary brand color is orange with a blue secondary color? With Commerce Cloud, you can write those colors as variables and use SASS to build the final styles for the button in a brand-specific cartridge:
//‘base.scss’
button {
color: $primary;
background: $secondary;
}[TM2] Then, in a separate cartridge for your other brand, you could use something like:
//‘branding.scss’
$primary: orange;
$secondary: blue;[TM3] Finally, we need to add a template in these cartridges to wrap up the base styling with our variables:
//’stylesheet.scss’
@import ‘path to base.scss in your base cartridge’;
@import ‘branding.scss’[TM4] ;You can easily do this for any number of brand cartridges. The key for SFCC is the cart path configuration paradigm, which allows developers to set a brand-specific cartridge at the top on each branded site. With this cartridge path, broadly designed templates in our base cartridge will always pull in our brand-specific styles.
Custom Properties and Cartridges: Deploy Features to Specific Brands
With new features coming to the web constantly, it’s difficult to keep up with clean implementations of every feature. Salesforce’s cartridges and the reference architecture make it easy to compartmentalize features by brand and deploy them only when you’re ready. Let’s imagine a multi-brand Salesforce Commerce Cloud setup with several brands featuring very bright themes. On most of these brands, the bright themes work great. However, one brand is tailored for a tech audience that happens to use dark mode with most programs, so the bright theme clashes for those users. This can easily be solved by supporting the new CSS features, thereby leaving the normal branding intact and adding custom branding to integrate with system themes.
//’stylesheet-next.scss’
@import ‘base.scss’;
@import ‘branding.scss’;
@import ‘base-dark.scss’;
//’base.scss’
body {
color: $text;
background: $background;
}
//’base-dark.scss’
@media (prefers-color-scheme: dark) {
body {
color: $text-dark;
background: $background-dark;
}
}[TM5] Next, you need to make it easy to turn the new feature on and off. With a custom property configured in Business Manager, you can manage custom templates and choose whether to deploy our old compiled stylesheet.css or stylesheet-next. You can then turn on that custom property for the one website and the new feature will only be deployed there. Alternatively, you could put a template that only references stylesheet-next in a new cartridge, and add that cart to the path only on the brand sites where you want the feature enabled.
Trust the Experts at CQL for Your Multi-Brand Development Needs
These are just a few of the techniques available to toggle features for multi-brand stores using Salesforce Commerce Cloud. CQL understands the importance of keeping up with new features while maintaining large, multi-brand Commerce Cloud sites and has the experience to guide you through to maintain cutting edge user experiences. Contact us today for questions or more information on implementing a multi-brand strategy on the Commerce Cloud today!
