Designing Shopping Experiences with Bootstrap HTML code

In this tutorial, you will learn how to design Shopping Experiences with Bootstrap HTML code.

The Shopware 6 Storefront is based on the Bootstrap framework. Due to our HC-Architecture® ThemeWare® of course it is also completely compatible with Bootstrap.

On this page you will find the most common Bootstrap classes which you can apply to CMS blocks in your Shopping Experiences.

Shopware 6.4

In Shopware 6.4, the Storefront uses Bootstrap 4.

Shopware 6.5

In Shopware 6.5, the Storefront uses Bootstrap 5.

Tip: You can find some examples of use in our demo shops on the "Bootstrap examples" pages.

Please note that the HTML editor of Shopware 6 (e.g. in CMS elements) does not allow all HTML tags in individual HTML code and automatically sanitises the code for security reasons. This does not mean that Shopware or ThemeWare® are not compatible with Bootstrap. Everything you find on this page was implemented with the Shopware HTML editor. Some of the actual Bootstrap code has been modified for this purpose.

You can use Bootstrap in template files according to the Bootstrap documentation. The only restriction here is that Shopware does not provide all elements.

In terms of Shopping Experiences, there are special CMS elements in the Shopware Store that provide alternative HTML editors and thus offer you more freedom than the HTML editor in Shopware 6.

---

Coming soon...