Create themes on your own

With our brand new styletile it has never been easier to start with Shopware.
This documentation is meant to be a guide for theme designers and developers who need the big and complete picture. Here you'll find a preview of the components, the files of our theme, usage-guides and many more.

Overview

Preview

Get a quick and visual overview of every component that Shopware introduces.

Cheatsheet

View all the regular classes and variables that Shopware introduces on one page.

Documentation

_components

The _components directory contains all styled component-elements of Shopware.

_mixins

The _mixins directory contains various standardised LESS mixins, quick to use.

_modules

Within the _modules directory you’ll find the seperate modules, like the cart.

_variables

If you need to adjust variables or create your own – here’s your place to be.

What's in "Overview"?

In these categories you'll find visual guidance of the content that Shopware 5 introduces and uses.
Single elements (here called components) are quickly introduced in the Preview area.
The Cheatsheet helps you find the right variable, mixin or class name to see what's there.

What's in "Documentation"?

This documentation will lead you through every .less file in the less directory of your Shopware installation and should pave your path of becoming a theme designer. Notice that the categories are named after the directory and the sections are the file within the directory. This enables you to find what you really need.

It's especially useful for designers, frontend developers but also for people that usually don't interact with code and are just looking for guides to specific files.

Designers start here
Preview

Get a quick and visual overview of every component that Shopware introduces.

Developers start here
_components

The _components directory contains all styled component-elements of Shopware.