When you add a commerce widget to a site you've spent months designing, you expect it to fit. It almost never does. The widget arrives with its own color system, its own typography, its own layout assumptions. It looks like a foreign object inserted into your site — because that's exactly what it is.
Platforms like Ecwid acknowledge this problem with what they call a "CSS Cookbook" — a manual collection of code snippets merchants write themselves to patch their widget's appearance on each platform. Write the CSS for Webflow. Write different CSS for Framer. Rewrite everything after each Ecwid update breaks your selectors.
CrateStack's Chameleon Engine was built specifically to eliminate this problem at an architectural level. Not by giving you a better configuration panel. By making configuration unnecessary.
01
Shadow DOM isolation
The widget renders inside a Shadow DOM boundary. Your site's CSS cannot break it. Its CSS cannot break your site. Isolation is architectural — it never degrades over time or platform updates.
zero CSS conflicts
02
DOM traversal detection
The engine walks your DOM from the widget's injection point outward — reading computed styles at each layer, resolving transparent backgrounds, finding the actual rendered context.
6 dom layers average
03
WCAG contrast enforcement
Before a single pixel renders, every text/background color pair is checked against WCAG AA standards. Failing pairs are adjusted until they pass 4.5:1. Accessibility is enforced, not assumed.
4.5:1 minimum guaranteed
04
Body font — not display font
The engine detects both your display and body fonts but deliberately applies your body font to the widget. Display fonts are designed for headlines — they're wrong at 11px product names.
legibility pass
Does this actually work on my specific platform?
Yes. CrateStack's widget works on Webflow, Framer, Squarespace, Wix, WordPress, and any custom HTML site. Shadow DOM isolation means there are no CSS conflicts regardless of what framework your site uses. Installation is one script tag and one data attribute.
What if my site uses a custom font that isn't a Google Font?
The engine detects your custom font and attempts to load it inside the Shadow DOM independently. If it's a proprietary @font-face font that can't be loaded independently, it falls back to your body font stack with a harmonious system font. The widget always looks intentional — never broken.
Will it still look right if I redesign my site?
Yes. The Chameleon Engine runs on every page load — it detects your current design, not a snapshot from your installation date. When you update your site's colors or fonts, the widget adapts automatically on the next visit. No reconfiguration needed.
What's the difference between this and Ecwid's color adaptation?
Ecwid's Color Adaptation reads four values — background, text, link, and button colors — and applies them. It has no Shadow DOM isolation, no typography detection, and no accessibility checking. CrateStack reads your full design context across multiple DOM layers, applies your body font, verifies contrast, and renders inside complete CSS isolation.
Do I need to do anything after installing the script tag?
No. Install the script once. Place the widget element where you want it to appear with a data-cs-product attribute. The engine handles detection, adaptation, and rendering automatically. There is no configuration panel for colors or fonts because there is nothing to configure.