Responsive Shopping Experiences with Bootstrap

In this tutorial you will learn how to create responsive Shopping Experiences using Bootstrap CSS classes.

The Shopware 6 storefront is based on the Bootstrap framework. Due to our HC-Architecture® ThemeWare® as well is completely compatible with Bootstrap.

In the following we will introduce the corresponding CSS classes and show you a few application examples.

Show/hide elements for viewports

To show or hide Shopping Experience blocks in specific viewports, the following Bootstrap Display CSS classes can be used. This allows, for example, to optimize image elements for different viewports.

Tip: With Shopware 6.4.19.0 you can easily set the visibility of sections and blocks in the Shopping Experience editor: see Responsive Shopping Experiences

Overview of Bootstrap display CSS classes:

Always hide element:        d-none

Show element up to 576px:   d-block d-sm-none
Show element up to 768px:   d-block d-md-none
Show element up to 992px:   d-block d-lg-none
Show element up to 1200px:  d-block d-xl-none

Show element from 576px:   d-none d-sm-block
Show element from 768px:   d-none d-md-block
Show element from 992px:   d-none d-lg-block
Show element from 1200px:  d-none d-xl-block

Show element from 0px up to 576px:       d-block d-sm-none
Show element from 578px up to 768px:     d-none d-sm-block d-md-none
Show element from 769px up to 992px:     d-none d-md-block d-lg-none
Element anzeigen von 993px up to 1200px: d-none d-lg-block d-xl-none

You can add these CSS classes in the Shopping Experiences editor via the "CSS classes" field in the block settings or section settings.

Note: These CSS classes just make sections and blocks invisible, the corresponding HTML code is still present in the storefront.

Example: Hide image element in sidebar on smartphones

In this passage, we integrate an image element into the sidebar, which draws attention to a discount. In the smartphone viewport, the image would take too much space, so we hide it for this viewport.

Tip: Please find an example for a "10% discount" element in the sidebar in our demoshop.

Step 1: Edit the Shopping Experience

• Switch via the main navigation to the item "Content" => "Shopping Experiences".

• Select the landing page of the corresponding category with sidebar or create and edit the Shopping Experience.

Step 1.1: Create a block

• Select "Images" as the block category and insert the block named "Image, boxed" to the sidebar using drag and drop.

• Now click onto the block you just added, so that the block settings will open on the right . Do the following settings here:

  • Block name: Banner

  • CSS classes: d-none d-lg-block

Step 1.3: Configure element(s) of the block

Now configure the element in this block.

• Image: Choose the desired motif with a width of about 400px.

• Display mode: Stretch

Tip: With the CSS classes d-none d-lg-block you can also hide the sidebar navigation for mobile viewports.

Example: Creating banners for different viewports

In this section we create two variants of a banner each with different image sizes for two different viewports.

Step 1: Editing Shopping Experience

• Switch via the main navigation to the section "Contents" => "Shopping Experiences".

• Select the landing page of the appropriate category with sidebar or create and edit the Shopping Experience.

Step 1.1: Creating a block

• Select "Images" as the block category and insert the block named "Image, boxed" to add it to the Shopping Experience by using drag and drop.

• Now click on the block you just added and the block settings will open on the right. Do the following settings here:

  • Block name: Banner

  • CSS classes: d-none d-sm-block

Step 1.2: Configuring element(s) of the block

Now configure the element in this block.

• Image: Select the desired motif with a width of about 1920px.

• Display mode: Standard

Step 1.3: Creating a block

• Select "Images" as the block category and insert the block named "Image, boxed" it into the experience using drag and drop.

• Now click on the block you just added, and the block settings will open on the right. Do the following settings here:

• Block name: Banner Mobil

• CSS classes: d-block d-sm-none

Step 1.4: Configuring element(s) of the block

Now configure the element in this block.

• Image: Select the desired motif with a width of about 580px.

• Display mode: Strech

Tip: You may also add a third image element for the tablet viewport.

Important: Please note that images can significantly affect the page speed and compress them as much as possible with online tools such as TinyPNG.

Example: Defining spacings for different viewports

With spacing classes you are able to define spacings of Shopping Experience elements per viewport. In the following we will show you an example of use:

This part will follow...

Further information

Note: Further information about the structure of the CSS classes themselves you will find in the article Optimizing Shopping Experiences with Bootstrap CSS classes.