Enable CSS styling

By default, shopdev generates clean, production-ready Liquid, HTML, and CSS. But if you want the output to seamlessly match your existing Shopify theme, you can enable Theme Styling Mode.

This feature ensures the sections you generate inherit and align with the design language of your active theme — including typography, spacing and colors.

What Theme Styling Mode Does

When enabled, Shopdev will:

• Avoid overriding global styles (like body, h1, buttons, etc.)

• Use existing theme CSS classes wherever possible (e.g. button, section, h-stack)

• Follow your theme’s grid system and spacing tokens (.page-width, .grid, .mt-4, etc.)

• Match your theme’s font sizes, font families, and color variables (e.g. var(--color-text))

This results in:

• Cleaner integration with fewer conflicts

• Reduced duplication of styles

• Faster implementation since most styles come from your theme

How to Enable Theme Styling

Click the “CSS Style” icon in the Shopdev builder. As soon as you toggle it on, you’ll see your generated section instantly transform to match your theme’s look and feel.

You can toggle it off at any time if you prefer a neutral or custom-styled starting point.