You are currently looking at the article on an older version of the extension!

CMS extensions for Shopware 6

The CMS Extensions for Shopware 6 is a extention that is part of Shopware Evolve and provides extended functions for the shopping experiences.

Installation

If at least the Shopware Evolve plan is stored in the Shopware account for the shop domain, you can download the extention in the extention administration under Settings > System > Plugins > Licenses.
The extention is then listed under My Plugins and can be installed by clicking the "..." button.
After the extention has been installed, you can activate it by clicking the button in the Status column.

Functions

The following functions are provided by the extention:

Quickview

This function enables a product view directly in the listing.
This means that the customer does not have to leave the Listing to get a more detailed overview of the product.

Activation
The function can be activated in the respective shopping experience and is available for elements of the commerce type.
If you have selected a corresponding element in the shopping experience editor, you can activate quickview (1) under item behavior.
This will then be used in all categories to which this shopping experience is assigned.

Frontend view

Scroll-Navigation

The scroll navigation provides you with the opportunity to set navigation points in an shopping experience. Based on these navigation points, a navigation menu is displayed on the left side, which allows you to jump directly to the individual sections. In addition, the sections can be accessed directly by using the URL parameters.

Activation
A navigation point can be created for each section in the shopping experience. For this purpose the extention provides a new section Scroll Navigation in the section settings.

To assign a navigation point, first open the section settings using the symbol on the left side of the section (1). On the right side you can now unfold the configuration of the Scroll-Naviation (2). There you can activate the navigation point (3) and assign a name (4). If the navigation point is activated, an additional symbol is shown on the left side (5). This allows you to see directly whether the navigation point is active for a section.

We recommend that the individual section should at least fill the screen, using a smaller section could lead to inaccurate jumping to the desired section.

Animated scrolling
This function will enable animated scrolling when jumping to a navigation point.
If at least one navigation point is set in an shopping experiences, animated scrolling (2) can be activated in the settings of the shopping experiences (accessible through the gearwheel symbol) in the item Scroll navigation (1).

For individualisation you can choose from different scroll behaviours (3) and set an animation duration (4). Besides the scroll behaviour constant (linear) there are other settings (5) available.
The elastic scrolling (6) is an animation, which lets the picture "jump" a little bit before and after the scrolling process.
Alternatively you can adjust the degree of the course curve (7). This value controls the acceleration or deceleration of the scrolling (not with constant (linear) or active elastic scrolling).

Frontend view - desktop

The navigation bar (1) is located on the left side to get to the individual navigation points.
If you use the mouse pointer to hover over one of the navigation points, the name of the section will be displayed.

Frontend view - Mobile

In the mobile view, the navigation menu is located at the bottom right.
With the arrow button (1) you can jump between the individual navigation points.
Use the button with the 3 dashes (2) to expand the menu.

In the expanded overview (1), the individual sections are now listed with their respective names.

Call by URL parameter
It is possible to call up a navigation point directly from a URL parameter. The name of the navigation point is used for this.
In our example, the name of the navigation point is "Lorem Ipsum". The call is made using the URL
https://your-shop.com/Test-Landingapge/#lorem%20ipsum

Define visibility of individual blocks

The extention provides a function to control the visibility of individual blocks of a CMS page using the rule builder rules.

Block (1): To change the settings select the disired block.
Block settings (2): This opens the block settings on the right side.
Visibility (3): define the visibility of the block.
Rule builder rule (4): By default the block is alway visibile, Select a rule to define when the block will be hidden.
Visible, if rule does not apply (5): If this is active the set rule will be reversed.

Was this article helpful?