Works on Any Shopify Theme

CSS Hero works out of the box, no configuration needed, on all free and premium Shopify Themes.

Brooklin
Prestige
Narrative
Debut
Supply
Motion
Streamline
Impulse
Symmetry

Customize any page
of your Shop

With CSS Hero you can easily customize all your main Shop pages.

Enhance your collection pages or simply provide edits on one specific page, optimize your landing page for handheld devices and boost your sales

Homepage.liquid Products.liquid Single.liquid Blog.liquid Collection.liquid Portfolio.liquid Category.liquid Landing.liquid Lookbook.liquid

Worried about performances?

CSS Hero generated edits will be stored directly on your Shop and will be served statically in order to provide the lightest footprint possible.

header.liquid

<head>
...
<link href="your_shop_url.myshopify.com/assets/heroCSS.css" ... />
<script src="your_shop_url.myshopify.com/assets/heroJS.js" ... ></script>
...
</head>

Install, launch and go live in seconds

Getting started with CSS Hero on Shopify is as easy as installing a new plugin to your Shopify Shop

Easy to install

Installing and getting ready to customize your Shop with CSS Hero is a matter of seconds and no setup is needed.

Easy and powerful

No matter if you're a newbie or a CSS expert, CS Hero will allow you to easily control any part of your Shop with ease.

Safely save your style

Save your edits, browse a detailed edits history and easily undo-redo anything with CSS Hero.

Frequently asked questions

Is it a recurrent payment?

Our plan is a monthly subscription service that provides access to our tool, including regular updates and support. All charges are billed in USD and are billed every 30 days.

What happens when my subscription expires?

After your subscription has expired, the edits you’ve done will continue to be applied to your shop, but you won’t be able to launch the editor anymore for further editing.

Is it compatible with any Shopify theme or app? (eg. Pagefly, Shogun Landing Page Builder etc...)

Yes! CSS Hero is fully compatible with any Shopify theme or app. Upon clicking site elements, a CSS selector is automatically generated, but you can totally refine it as needed if necessary.

Where are my edits saved? Where is the generated CSS?

CSS Hero does not physically alter your template files; It’s totally safe and non-destructive. CSS Hero applies your site edits adding an additional CSS file to your site, in a clean and “educated” way, maintaining a negligible performance hit. No worries: you can always revert your shop to its previous state.

How does it work?

For the sake of providing the lightest footprint on your Shop CSS Hero customisations are stored and served directly from your shop as static files (heroCSS.css and heroJS.js). By doing so overall loading times of your customized shop will be as low as possible. Once you are ok with your edits you can uninstall CSS Hero and those edits will be still available on your Shop via heroCSS.css and heroJS.js files, if you want to completely get rid of them read check Uninstalling.

Easily customize your Shopify store