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 Admin → Design → Custom Code → Custom CSS, save, and hard-refresh the store (Ctrl+Shift+R).

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.