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 plug-in 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 plugin in the plugin administration under Settings > System > Plugins > Licenses.
The plug-in is then listed under My Plugins and can be installed by clicking the "..." button.
After the plug-in has been installed, you can activate it by clicking the button in the Status column.

Functions

The following functions are provided by the plug-in:

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 the Quickview in the Behavior item (1).
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 plug-in 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 for the correct function of the scroll navigation that the individual sections should at least fill the screen. If you use a smaller section, it is possible that the jumping to the section is not accurate anymore.

Animated scrolling
This function creates an automatic scroll when switching to a navigation point.
If at least one navigation point is set in an adventure world, animated scrolling (2) can be activated in the settings of the adventure world (accessible via 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

Was this article helpful?