Image Image Image Image

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

Image
Preview

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

Image
Cheatsheet

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

Documentation

Image
_components

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

Image
_mixins

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

Image
_modules

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

Image
_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
Image
Preview

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

Developers start here
Image
_components

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