AI CSS Assistant

The Merzio storefront has stable CSS "hooks" that let you change the look of your store via the Custom Code › Custom CSS section. So you don't have to write CSS by hand, we've prepared an AI instruction file (CLAUDE.md).

What is it?

CLAUDE.md is a text file with instructions for AI tools (for example Claude). When you give it to an AI, the AI learns to:

• write only safe CSS for your store,
• use stable classes (hooks) that don't change between updates,
• avoid !important and never break your layout.

That means you can simply describe the change in words and the AI generates the CSS, which you just paste into your store.

⬇ Download CLAUDE.md

How to use it (3 steps)

1. Download the CLAUDE.md file with the button above.
2. Give it to an AI tool (e.g. Claude) as its instructions and describe what you want to change — for example "round the product cards and make the Add-to-cart button bigger".
3. Paste the generated CSS into Engage › Design › Custom Code › the Custom CSS tab, save, and hard-refresh the store (Ctrl+Shift+R).

Merzio AI in Canvas has its own CSS

If you let Merzio AI design the store in Canvas, the AI writes its own, separate CSS (CSS from the AI designer). It never touches your Custom CSS field — and when the two rules meet, yours wins.

Full list of classes

The complete reference of every class you can target is on the Storefront CSS hooks page.

WARNING

CLAUDE.md helps the AI write safe CSS, but AI can make mistakes. Review the generated CSS before saving, and contact our support if you need help.