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& crolling 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.

Individual forms

In addition to the default form, you can also add your own individual forms to the shopping experience with the CMS extension for Shopware 6.

To add a form to your shopping experience, click on Content > shopping experience and select the shopping experience to which the form is to be added. Then click on the + symbol to add a new block and select form as the block category. In addition to the default form, e.g. for the contact, you can now also drag your own form into your shopping experience.

A pop-up window opens, this gives you the option to use a previously created template or to create a new form.

Even if you use a template, you can still edit it completely afterwards.

Options

When you create a new form or edit an existing one, the form settings window opens with the tabs options and fields. The basic settings for the form are made in the options tab.

Name (internal) (1): Enter the internal name of the form. For example, if you save the form in the templates, this name will be used.
Headline (2): The headline is used in the shopping experience, i.e. in the forntend, as the headline for the form.
Confirmation text (3): The confirmation text is displayed to the user as soon as he has filled in the form.
Recipient address (4): Enter all e-mail addresses to which the filled out form should be sent. Multiple addresses can be entered simply by pressing the Enter key once after each address.
E-mail template (5): Select the e-mail template to be used for sending the form content to the recipient addresses.

Fields

In the Fields tab you can specify which fields can or must be filled in by the user. To do this, you can create groups that contain one or more fields.

Group (1): On the left side you see the groups of the form. You can use the dots on the left to change the order of the groups by drag and drop.
Group context menu (2): On the right side of each group you can rearrange its position, delete it or duplicate it. You can also edit the group so that further options for the group are displayed on the right-hand side of the screen. Here you can enter the internal name of the group and you can change the heading of the group. The heading is also displayed in the frontend.
Field (3): The fields are located within a group. You can change the order of the fields within the group by drag and drop using the dots on the left.
field context menu (4) on the right side of the field, you can rearrange its position of the field, move the field to another group, duplicate it or delete it. You can also edit the field there so that further options for the field are displayed on the right side of the screen.
Add field (5): Adds a new field within the respective group.
Add group (6): Use this button to add a new group including a field.
Options (7): Depending on whether you are currently editing a group or a field, you will find further options for the respective group or field on the right-hand side.
If you are editing a group, you will see the information Name (Internal) and Heading. The heading is visible in the frontend, while the internal name serves as an internal identification. E.g. as a variable in e-mail templates.
You can see which options are displayed here when you edit a field.
Save as template (8): With this button you can save the form you have just created as a template. These templates can be edited and selected in your shopping experience.
Done (9): To save all changes in the current form, click on done.

Field options

When you edit fields, you will see the options you can edit on the right hand side. The possible options differ depending on the type of field you are editing. However, the following options are always available for each type.

Name (1): The Internal Name serves as a unique identification for the use of this field as a variable. E.g. in e-mail templates.
Title (2): This name is displayed on the form in the frontend.
Type: (3): Select the type that the field should have. This type determines which values can be entered in the field and how they should look. We have listed the available types below.
Width (4): Here you define how wide a field should be. If two subsequent fields together use a maximum of 100% of the width, they are displayed next to each other in the form. This is useful, for example, if information is to be entered in two fields, but the content belongs together. E.g. street name and house number.
Required field (5): Indicates whether the field is mandatory or not.
Error message (6): This message is displayed to the user in the frontend if a mandatory has not been filled in.

Text field & email field

For the field type Text or E-mail, you can specify a placeholder text to be displayed if the field has not yet been filled in.

Number field

For fields with the type number, you can optionally specify whether there should be a minimum or maximum limit. You can also specify the steps in which the user can enter numbers. If you enter a 3 here, for example, the user can only select numbers 3, 6, 9, 12, 15, etc....

Selection field

The selection field is a checkbox that the user can activate or deactivate. In the default value you can specify whether the field should already be activated by default or not.

Selection

The selection type offers the user a predefined selection to choose from. Using content = entity, lets you select in the second step, from which shop entity the user can make a selection.
Using content = user-defined, lets you enter values in the second step, from which the user can then choose. Type the values into the field values and press the enter key.

Text area

The text area is used to enter a longer text. In addition to the placeholder text, you can also specify how many lines the user may use and whether the user may change the size of the text area.