MageSuite User Guide.

User Guide
Published May 2021
1
Table of Content
1. PREFACE ......................................................................................................................5
2. CONTENT MANAGEMENT ............................................................................................6
2.1. CREATING CMS PAGES USING CC COMPONENTS ................................................................7

2.1.1. HEADLINE ............................................................................................................................. 9
2.1.2. BUTTON .............................................................................................................................. 11
2.1.3. PARAGRAPH ........................................................................................................................ 13
2.1.4. STATIC BLOCK..................................................................................................................... 15
2.1.5. HERO CAROUSEL ................................................................................................................. 16
2.1.6. IMAGE TEASER .................................................................................................................... 19
2.1.7. IMAGE TEASER 2.0 .............................................................................................................. 24
2.1.8. PRODUCT CAROUSEL ........................................................................................................... 29
2.1.9. SEPARATOR......................................................................................................................... 31
2.1.10. BRAND CAROUSEL ............................................................................................................. 33
2.1.11. CATEGORY LINKS............................................................................................................... 34
2.1.12. PRODUCTS GRID ................................................................................................................ 35
2.1.13. CUSTOM HTML ................................................................................................................ 41
2.1.14. CMS PAGES TEASER ......................................................................................................... 42
2.1.15. PRODUCT FINDER .............................................................................................................. 46
2.1.16. ICON COMPONENT ............................................................................................................. 50
2.1.17. DAILY DEAL TEASER .......................................................................................................... 53
2.1.18. TEASER AND TEXT.............................................................................................................. 55
2.1.19. INSTAGRAM FEED .............................................................................................................. 60
2.1.19.1. HOW TO CREATE ACCESS TOKEN ..................................................................................... 62
2.1.20. MOSAIC ............................................................................................................................ 63
2.1.21. ACCORDION....................................................................................................................... 67
2.1.22. PRODUCT TEASER .............................................................................................................. 69
2.1.23. TIPS AND TRICKS FOR CC COMPONENTS ............................................................................. 70
2.2. WORKING WITH EXISTING CC COMPONENTS..................................................................... 72
2.3. WORKING WITH EXISTING CMS PAGES ............................................................................ 74
2.4. CMS PAGE GROUPING ................................................................................................. 77
2.5. CMS PAGE TAGGING ................................................................................................... 80
2.6. CMS PAGE IMAGE TEASER ........................................................................................... 82
2.7. BRANDS..................................................................................................................... 84
2.7.1. SETTING UP BRANDS ............................................................................................................ 86
2.7.2. BRAND PRESENTATION PAGE ................................................................................................ 90
2.7.3. ADDING BRANDS TO A PRODUCT............................................................................................ 92
2.7.4. BRANDS LIST PAGE .............................................................................................................. 95
2.7.5. BRANDS CAROUSEL .............................................................................................................. 97
2
2.8. FAQ PAGES ............................................................................................................... 98
2.9. CUSTOM LINKS IN MAIN NAVIGATION ........................................................................... 104
2.10. CC COMPONENTS ON PRODUCT OVERVIEW PAGES & IMAGE TEASER IN PRODUCT GRID ........ 105
2.11. CC COMPONENTS ON PRODUCT DETAIL PAGES .............................................................. 110
2.12. IMAGE TEASER IN FLYOUT NAVIGATION ....................................................................... 112
2.13. VIDEO LAYER .......................................................................................................... 114
2.14. CMS PRODUCT BACKLINK ........................................................................................ 116
2.15. FORM BUILDER ........................................................................................................ 119
3. MARKETING ............................................................................................................. 125
3.1. DAILY DEAL .............................................................................................................. 125

3.2. BESTSELLER PRODUCTS LOGIC .................................................................................... 132
3.3. CART BONUS ............................................................................................................ 138
3.4. POSITIVE INDICATORS ................................................................................................ 141
3.4.1. POPULAR INDICATOR ......................................................................................................... 142
3.4.2. ONLY X AVAILABLE, BUY NOW ............................................................................................. 145
3.4.3. RECENTLY BOUGHT INDICATOR........................................................................................... 147
3.4.4. FREE SHIPPING INDICATOR ................................................................................................. 149
3.4.5. FAST SHIPPING INDICATOR ................................................................................................. 152
3.4.6. EXPECTED DELIVERY INDICATOR.......................................................................................... 154
3.5. SOCIAL MEDIA SHARING ............................................................................................. 155
3.6. RECOMMENDATION ENGINE ......................................................................................... 161
3.7. SEARCH ENGINE OPTIMIZATION ................................................................................... 163
3.7.1. CANONICAL URLS ............................................................................................................. 163
3.7.2. CUSTOM URL REWRITES .................................................................................................... 165
3.7.3. URL REGENERATION .......................................................................................................... 166
3.7.4. HREFLANG TAGS................................................................................................................ 168
3.7.5. GOOGLE STRUCTURED DATA TOOL ..................................................................................... 170
3.7.6. CATEGORY META TAG GENERATION ..................................................................................... 176
3.7.7. FACET NAVIGATION LINK-MASKING ..................................................................................... 178
3.7.8. NOINDEX AND NOFOLLOW TAGS .......................................................................................... 181
3.7.9. PRODUCT META TAG GENERATOR ...................................................................................... 185
3.7.10. CATEGORY META TAG GENERATION (BASED ON FILTERS) .................................................... 187
4. USER EXPERIENCE ................................................................................................... 190
4.1. ELASTICSUITE .......................................................................................................... 190

4.1.1. SEARCH ENGINE ................................................................................................................ 191
4.1.2. FACET MANAGEMENT ........................................................................................................ 195
4.1.3. MANUAL SORTING IN CATEGORIES & SEARCH RESULT PAGE ................................................. 200
4.1.4. SEARCH OPTIMIZERS ......................................................................................................... 203
3
4.1.5. VIRTUAL CATEGORIES ........................................................................................................ 205
4.2. SIMPLE BUNDLE PRODUCTS ........................................................................................ 207
4.3. PRODUCT VARIANTS .................................................................................................. 209
4.4. BACK-IN-STOCK SUBSCRIPTIONS ................................................................................ 212
4.5. DHL PACKSTATION SHIPPING 2.0 ................................................................................ 214
4.6. PAGINATION INPUT .................................................................................................... 218
4.7. NAVIGATION ............................................................................................................. 220
4.7.1. ALL CATEGORIES NAVIGATION FLYOUT ............................................................................... 220
4.7.2. DISABLE CATEGORIES FOR MOBILE AND DESKTOP DEVICES ................................................... 223
4.7.3. FEATURED PRODUCTS IN NAVIGATION FLYOUT .................................................................... 224
4.8. FILTERING ................................................................................................................ 226
4.8.1. SEARCH BOX IN FILTERS ..................................................................................................... 226
4.8.2. SLIDER CONFIGURATION ON PRICE FILTERS .......................................................................... 227
4.9. GUEST WISHLIST ....................................................................................................... 229
4.10. PROGRESSIVE WEB APP FEATURES ............................................................................. 230
4.10.1. ADD TO HOMESCREEN ...................................................................................................... 231
4.10.2. OFFLINE CMS PAGE ........................................................................................................ 232
4.10.3. SHIPMENT PUSH NOTIFICATION ........................................................................................ 233
5. ADMINISTRATION .................................................................................................... 235
5.1. E-MAIL TESTER ........................................................................................................ 235

5.2. E-MAIL ATTACHEMENTS ............................................................................................ 238
5.3. GOOGLE TAG MANAGER INTEGRATION .......................................................................... 239
5.4. FLUSH CACHE BY TAG / URL ....................................................................................... 240
5.5. FULL REINDEX ........................................................................................................... 241
5.6. CACHE WARMER ....................................................................................................... 242
6. SECURITY ................................................................................................................. 245
6.1. ADMIN ACTIVITY LOG................................................................................................. 245

6.2. IP RESTRICTION FOR ADMIN PANEL .............................................................................. 247
6.3. ADMIN PANEL ANONYMIZATION................................................................................... 248
7. ERP REPORTING ....................................................................................................... 250
7.1. IMPORT LOG ............................................................................................................. 250

7.2. ORDER EXPORT LOG .................................................................................................. 252
4
1. Preface
MageSuite is an open-source software based on Magento 2. This guide intends to describe the
MageSuite features in functional way. The basic Magento 2 features are not described here, for the
basic Magento 2 user guide please see the official Magento 2 documentation:
https://docs.magento.com/user-guide
You can find instructions how to install MageSuite in GitHub:

https://github.com/magesuite/magesuite
This user guide has been written using following software version:
• Magento version: 2.4.21

• MageSuite version: 6.0.0 (May 2021)
• Operating system: macOS Catalina version 10.15.x
• Browser: Google Chrome version 77.x
• Github link: https://github.com/magesuite
Depending on the software version used the Magento 2 and MageSuite admin panel may differ.
MageSuite was previously known as “creativeshop”. Due to this reason, you may find the expression
“creativeshop” on some screenshots as well as in the admin panel.
5
2. Content Management
This chapter features the content management system built in the MageSuite which is hereafter called
Content Constructor (“CC”). The CC allows to build CMS pages using CC components. All components
can be moved and edited. Furthermore, this chapter explains MageSuite features that allow grouping
and tagging of CMS pages.
6
2.1. Creating CMS pages using CC components
In order to create a new CMS page access the admin panel and then go to CONTENT / ELEMENTS /
PAGES.
On the top right side click ADD NEW PAGE.
Expand the CONTENT (MS) section.
At the top of this section you are able to select the storefront visibility:
• MOBILE: when enabled, the configured CC components are only visible on mobile devices
• DESKTOP: when enabled, the configured CC components are only visible on desktop devices
• NOT VISBILE: when enabled, the configured CC components are not visible on the storefront
In order to add a new CC component, navigate in between the header and footer wireframe and click
the “+”.
Figure 1 Add CC components
On the next overlay page you can add CC components to the CMS page.
7
Figure 2 Available CC components
The following sections explain how to setup the above CC components.
8
2.1.1. Headline
The CC Headline components allows to add headlines and subheadlines to CMS pages. In this
component you can use the text input fields to configure following elements:
• HEADLINE: located at the top of the CC component

• SUBHEADLINE: located below headline and less prominent
Additionally under the “ADVANCED SETTINGS” you can adjust the LEVEL OF HEADING TAG for SEO
purposes. You can choose following options:
• H1
• H2
• H3
• H4
• H5
• H6
Figure 3 CC Headline component (admin panel)
When the desired text has been entered click SAVE to save the CC component.
On the storefront the CC Headline component looks as shown on the screenshot below.
9
Figure 4 CC Headline component (storefront)
10
2.1.2. Button
This component allows to place CTA buttons prominently. On CMS pages this component may be
used to promote products contained in the shop or to refer to external websites.
In order to use the Button component following fields have to be filled out:
• LABEL: the text input will be displayed on the button on the storefront
• TARGET: the target of the button
Figure 5 CC Button component (admin)
The TARGET can be either an URL key from the Magento 2 instance, an external URL or a Magento 2
widget. Following native Magento 2 widget types are supported:
• CMS Page Link

• Catalog Category Link
• Catalog Product Link
• File URL
When the desired settings have been made, click SAVE. On the storefront the Button component may
look like shown on the below screenshot.
11
Figure 6 CC Button component (storefront)
12
2.1.3. Paragraph
The CC Paragraph component allows to add a text block as well as images and widgets to the CMS
page. In order to include Paragraph components following steps have to be done.
1. Select the PARAGRAPH WIDTH: You can either select Container width (the Paragraph content will
be displayed on the whole container width on the storefront) or Optimal reading width (the
Paragraph content will be displayed more narrow). The latter option enhances readability of text
section and may be used for blog articles included in the Magento 2 instance.
2. Enter IDENTIFIER: Enter a unique identifier that will be used to identify and re-use the given
Paragraph component.
3. Enter TITLE: Enter a title for the Paragraph component.
4. Select NUMBER OF COLUMNS (only for Container width): Select the number of columns the
Paragraph content should be split into, i.e. one, two, three or four columns. This setting has no
effect on small screen resolutions (such as smartphones) where content is always displayed in
one column.
5. Insert content using the HTML editor: You can prepare content using the HTML editor either using
HTML view or the WYSIWYG editor by clicking SHOW / HIDE EDITOR. Also inserting widgets,
images and variables is supported.
13
Figure 7 CC paragraph component (admin panel)
When the desired settings have been made click SAVE.
14
2.1.4. Static Block
This CC component does allow including CMS blocks that are already existing.
In order to include a CMS block to this component you firstly have to create a given CMS block. This
can be done in CONTENT / ELEMENTS / BLOCKS. On the top right-hand side click ADD NEW BLOCK.
Now following steps have to be done in order to create a CMS block:
1. Select if you want to ENABLE BLOCK: When ticked, you can use the CMS block after saving.
2. Enter BLOCK TITLE: Enter a title for the CMS block.
3. Enter IDENTIFIER: Enter a unique identifier that will be used for used to identify and re-use the
given CMS block e.g. in the CC Static Block component.
4. Select STORE VIEW: Select the store view you would like to use the CMS block in.
5. Insert content using the editor: You can prepare content using the HTML editor either using HTML
view or the WYSIWYG editor by clicking SHOW / HIDE EDITOR. Also inserting widgets, images and
variables is supported.
When the CMS block has been saved it can be added to a CC Static Block component. In the CC Static
Block configurations you can select the given CMS block in the STATIC BLOCK dropdown field.
Additionally you can reset the CMS block styling to the default styles by ticking the RESET DEFAULT
STYLES OF CMS STATIC BLOCK checkbox.
Worth noting is that it is also possible to add an Image teaser component to any of your CMS blocks.
Which then can be implemented to any page. This opens another way of presenting your content.
Figure 8 CC Static block (admin panel)
When the settings have been made click SAVE.
15
2.1.5. Hero Carousel
This CC component allows displaying hero images which is especially useful for landing pages. Hero
images do contain following elements (depending on the styling and the configuration in the admin
panel):
• A headline displayed on the hero image

• A subheadline displayed on the hero image
• A text paragraph displayed on the hero image
• A call-to-action (“CTA”) button including a link on the hero image
In order to display the hero carousel component you firstly have to select a MOBILE DEVICES
SCENARIO.1 Here you can select following options:
• LARGE TEASER: On mobile devices the hero images are displayed in vertical order, i.e. the first
hero will be displayed on top.
• SLIDER: On mobile devices only one hero image will be displayed. There is a slider functionality
which allows rotation of proceeding hero images.
• HIDDEN: On mobile devices this CC component will not be displayed.
In the CONTENT area you can now add and configure hero images by clicking the “+” icon. The
following settings can be made here:
1. In the image upload area on the left-hand side you can insert an image using the Magento 2 media
explorer.2 If you already have a hero image, you can remove it using the “bin” icon. If you have
more than one hero image (added using the the “+” icon) you can move the given hero image
using the “arrow up” and “arrow down” icons. Also you can change the existing hero image by
clicking “change”.
2. Select the DISPLAY VARIANT, which controls the text location on the hero image. Depending on
the styling of the Magento 2 instance, the options are
i. Text vertically centered on the left
ii. Text on the bottom, left corner
iii. Text vertically centered in the middle
iv. Text on the bottom – centered
3. Select TEXT COLOR SCHEME, which controls the font color of the text depending on the styling.
4. Enter the HEADLINE text which will be the most prominent text element on the hero image
(depending on the styling).
1 1
The breakpoints for the devices are: mobile up to 767px, tablet 768 - 1023px, desktop 1024px
2
It is recommended to use JPG and PNG (RGB format) file types for images
16
5. Enter the SUBHEADLINE text which will be the text element located underneath the headline on
the hero image (depending on the styling).
6. Enter the PARAGRAPH text which will be the text element located underneath the subheadline on
the hero image (depending on the styling).
7. Enter a CTA LABEL text in case you want to include a CTA button on the hero image.
8. Enter a URL in the CTA TARGET LINK input in case you want to add a link to the CTA button (also
the Magento 2 widget types CMS Page Link, Catalog Category Link, Category Product Link, File
URL are supported).
Figure 9 CC Hero carousel (admin panel)
When the settings have been made, click SAVE.
17
Figure 10 CC Hero carousel (storefront)
18
2.1.6. Image Teaser
The CC Image Teaser component allows including numerous scenarios of image teaser areas which
can be used for landing pages, intermediary category pages, category pages and product detail pages.
Image teasers do contain following elements (depending on the styling and the configuration in the
admin panel):
• A headline displayed on the image teaser

• A subheadline displayed on the hero image teaser
• A text paragraph displayed on the hero image teaser
• A call-to-action (“CTA”) button including a link on the hero image teaser
Figure 11 CC Image teaser component (storefront)
In order to set up an CC Image teaser component you firstly have to select a TEASER WIDTH from
following options:
• CONTAINER WIDTH: The image teaser area is limited by the container width.
• WINDOW WIDTH: The image teaser area does exceed the container and is limited by the window
width.
• CONTENT WIDTH SLIDER: The image teaser area is limited by the container width. Image teasers
that do not fit in the carousel can be accessed using the slider arrows.
• WINDOW WIDTH SLIDER: The image teaser area does exceed the container and is limited by the
window width. Image teasers that do not fit in the carousel can be accessed using the slider
arrows.
Next you can configure the DESKTOP LAYOUT by choosing from following options:
19
• 1 IN A ROW: One image teaser per row will be displayed in the image teaser area. In case more
image teasers are included in the component they can be accessed using the slider functionality.
• 2 IN A ROW: Two image teaser per row will be displayed in the image teaser area. In case more
• 3 IN A ROW: Three image teaser per row will be displayed in the image teaser area. In case more
• 4 IN A ROW: Four image teaser per row will be displayed in the image teaser area. In case more
• 6 IN A ROW: Six image teaser per row will be displayed in the image teaser area. In case more
• 8 IN A ROW: Eight image teaser per row will be displayed in the image teaser area. In case more
In the TEXT POSITIONING configuration you can choose where the text should be located at:
• TEXT OVER IMAGE: The text input will be displayed on image teasers.
• TEXT BELOW IMAGE: The text input will be displayed underneath image teasers.
20
Next you can specify the MOBILE LAYOUT:3
• LARGE TEASER: Per row there will be one large image teaser displayed (only available if there will
be only one image teaser included).
• SLIDER: All image teasers are included in one row and can be accessed using the slider
functionality.
• TEASERS IN ROW: Per row there will be two image teaser displayed (only available if there will be
two image teasers included).
• TEASERS IN COLUMN: All image teasers are included in one column in succeeding rows (only
available if there will be two, four or six image teasers included).
• BIG, TWO SMALL: In the first row there will be one large image teaser displayed, the succeeding
row does display two image teasers (only available if there will be three image teasers included).
• 2 IN ROW, 2 ROWS: Per row there will be two image teasers displayed, further image teasers are
displayed in succeeding row in the same manner (only available if there will be four image teasers
included).
• BIG, TWO SMALL, BIG: In the first row there will be one large image teaser displayed, the
succeeding row does display two image teasers. The last row does display one large image teaser
(only available if the will be four image teasers included).
• 2 IN ROW, 3 ROWS: Per row there will be two image teasers displayed, further image teasers are
displayed in succeeding rows in the same manner (only available if there will be six image teasers
included).
In the CONTENT area you can now add and configure hero images by clicking the “+” icon. Here
following settings can be made:
explorer.4 If you already have an image, you can remove it using the “bin” icon. If you have more
than one image teaser (added using the the “+” icon) you can move the given image using the
“arrow up” and “arrow down” icons. You can also change the existing image by clicking “change”.
2. Select the DISPLAY VARIANT, which controls the text location on the image teaser. Depending on
4. Enter the HEADLINE text which will be the most prominent text element on the image teaser
3
4
21
the image teaser (depending on the styling).
7. Enter a CTA LABEL text in case you want to include a CTA button on the image teaser.
URL are supported).
22
Figure 12 CC Image teaser component (admin panel)
23
2.1.7. Image Teaser 2.0
The newly added CC Image Teaser 2.0 component enhances contrast of the text located on image
teaser and thus improves the readability. It can be embedded on landing pages, intermediary category
pages, category pages and product detail pages.
Figure 13 Image Teaser 2.0 (storefront)
The new Image Teaser 2.0 contains now the following tabs:
Content tab
• A slogan displayed on the image teaser
• A text description displayed on the hero image teaser
• A call-to-action (“CTA”) button including a link on the hero image teaser
• An interactive content align option
Style tab
• A contrast optimizer with different options
• A text color scheme to adjust font color
When setting up a new Image teaser 2.0 component you must first choose the TEASER WIDTH from
following options:
• CONTAINER WIDTH: The image teaser area is limited by the container width.
• WINDOW WIDTH: The image teaser area does exceed the container and is limited by the window
width.
• CONTENT WIDTH SLIDER: The image teaser area is limited by the container width. Image teasers
that do not fit in the carousel can be accessed using the slider arrows.
24
• WINDOW WIDTH SLIDER: The image teaser area does exceed the container and is limited by the
window width. Image teasers that do not fit in the carousel can be accessed using the slider
arrows.
Choose one of the following options in order to specify DESKTOP AND TABLET LAYOUT:
• 1 IN A ROW: One image teaser per row will be displayed in the image teaser area. In case more
• 2 IN A ROW: Two image teaser per row will be displayed in the image teaser area. In case more
• 3 IN A ROW: Three image teaser per row will be displayed in the image teaser area. In case more
Next you can determine the MOBILE LAYOUT:5
• SLIDER: All image teasers are included in one row and can be accessed using the slider
functionality.
• TEASERS IN ROW: Per row there will be two image teaser displayed (only available if there will be
two image teasers included).
• TEASERS IN COLUMN: All image teasers are included in one column in succeeding rows (only
available if there will be two, four or six image teasers included).
In the TEXT POSITIONING configuration, you can choose where the text should be located at:
• TEXT OVER IMAGE: The text input will be displayed on image teasers.
• TEXT BELOW IMAGE: The text input will be displayed underneath image teasers.
5
25
In the CONTENT area you can now add and configure hero images by clicking the “+” icon. Here
“arrow up” and “arrow down” icons. Also by clicking “change” you can change an existing image.
Regardless whether you have chosen an image or not there alwas will be shown a live preview
with your slogan and description.
2. In the CONTENT ALIGN area you are able to control the text appearance on the image teaser. Just
click on the desired position field where the text should be shown.
3. Enter the SLOGAN text which will be the most prominent text element on the image teaser
(depending on the styling). Additionally it is possible to insert dynamic content in this text area
and any other textfield of this component, e.g. HEADLINE and DESCRIPTION, using Content
Constructor Directives. By adding directives it will display your products’ price or a products’
discount percentage to your desired text field.
i. Fetching a products’ price can be done with this directive:
{{price sku=”your_product_sku” withCurrency=”true”}}
When choosing “false” as your parameter there is no currency sign displayed.
ii. If you wish to display a discount percentage of a certain product use following
directive:
{{discountPercentage sku=”your_product_sku”}}
However only an integer value will be shown.
4. Enter the DESCRIPTION text which will be the text element located underneath the slogan on the
image teaser (depending on the styling). Also Constructor Directives can be used here.
URL are supported).
In the STYLE tab you can make adjustments to the contrast of the text (only adjustable when text
positioning is not below image)
1. CONTRAST OPTIMIZER.
i. Overlay: If you have chosen your text style to appear as ‘light’ then the intensity
slider darkens the entire image depending on the slider’s position and vice versa
when text style is set to ‘dark’.
6
26
ii. Gradient shadow: Similar to the ‘overlay’ option you can adjust the gradient
shadow’s intensity with its slider. You can determine the gradient shadow’s
direction by clicking the adjustment field next to it.
iii. Container: The Container option provides a frame behind the text. Depending on
the chosen ‘text style’ and the intensity slider the frame appears in black or white.
iv. Text shadow: If Text Shadow is selected then a shadow is cast around the text.
The slider controls the brightness of the shadows.
2. The INTENSITY SLIDER is located directly below. It controls the intensity of the adjustments
mentioned above. Ranging from 0 to 100 where the higher the number the more intensive the
color gradient.
3. On the right-hand side you can set DIRECTION. Click on one of the boxes to specify where the
‘Gradient shadow’ fade starts. (It is only available for ‘Gradient shadow’)
4. TEXT STYLE option controls the coloring of the font appearing on the Image teaser. You have a
choice between “LIGHT” and “DARK”. Light colors the slogan and description in bright text while
dark results in black lettering.
5. MIRROR IMAGE can be toggled on or off. This feature gives the possibility to flip your image
horizontally.
27
Figure 14 CC Image teaser 2.0 content and style tab (admin panel)
28
2.1.8. Product Carousel
The CC Product Carousel component allows to include products from several categories or specific
SKUs in a carousel format. Depending on the styling and the configuration, the Product Carousel
component does contain product tiles as well as product tile hover effects.
In order to add products to the product carousel you can select CATEGORIES in the multi-select field.
Alternatively, you can add products via the SKUS input (comma separated). However, providing a list
of SKUs will disable any filtering and sorting configured for that component. Also the category
selection (if specified) will also not be taken into account. Only products with specified SKUs will be
displayed in exactly the same order as they are provided in SKUs field.
The CUSTOM DATA PROVIDER input has been used for creating custom criteria. It is recommended
to be used only by developers.
You can also set a FILTER to e.g. display only new products.
In the ORDER BY select fields you can pick an attribute used to sort the products (ascending or
descending).
The SHOW dropdown sets the max. amount of products included in the product carousel component.
Figure 15 CC Product carousel component (admin panel)
29
Figure 16 CC Product carousel component (storefront)
30
2.1.9. Separator
The CC Separator component adds a horizontal line on CMS pages. The CC Separator component may
be used to visualize separation of two CC components. For this component, there is no configuration
in the admin panel needed.
Figure 17 CC Separator component in between image teaser and paragraph component (admin panel)
Depending on the styling of this CC component, the storefront will look as shown below.
31
Figure 18 CC Separator component in between image teaser and paragraph component (storefront)
32
2.1.10. Brand Carousel
The CC Brand Carousel component allows including a carousel containing brands. In order to add
brands and display them in the CC Brand Carousel component, the brands have to be set up at first
(see section Brands). For this component, there is no configuration in the admin panel needed.
Figure 19 CC Brand Carousel component above CC Headline component (admin panel)
Depending on the styling of this CC component, the storefront will look the following.
Figure 20 CC Brand carousel component (storefront)
33
2.1.11. Category Links
The CC Category Links component includes subcategory links of a given parent category on CMS
pages.
At first you need to define the parent category in the CATEGORY select field. In case you want to
include subcategories of further categories, you can use the multi-select functionality.
Next select the SUBCATEGORIES of the above parent category that you want to display as category
links. You can use the multi-select functionality
In case you want to include a product count behind the category links, tick the SHOW PRODUCTS
COUNT checkbox.
Figure 21 CC Category links component (admin panel)
Figure 22 CC Category links component in between CC headline and Image teaser component (storefront)
34
2.1.12. Products Grid
The CC Products Grid component does allow including a product grid of a specific category or SKUs.
The Products Grid component includes product tiles as well as product tile hover effects (depending
on the styling and configuration). Additionally it allows adding a hero image inside the product grid.
In order to add products to the product carousel you can select CATEGORIES in the multi-select field.
The CUSTOM DATA PROVIDER input has been used for creating custom criteria. It is recommended
to be used only by developers.
descending).
Next you need to define the layouts for specific devices:
• MOBILE LAYOUT: Here you can select either one, two, three or four rows of products that you
want to display in the product grid on mobile devices. In case you want to include a custom
number of rows, you can type the number of rows to be displayed in the input field of the last
option.
• TABLET LAYOUT: Here you can select either one, two, three or four rows of products that you
want to display in the product grid on tablet devices. In case you want to include a custom number
of rows, you can type the number of rows to be displayed in the input field of the last option.
• DESKTOP LAYOUT: Here you can select either one, two, three or four rows of products that you
want to display in the product grid on desktop devices. In case you want to include a custom
number of rows, you can type the number of rows to be displayed in the input field of the last
option.7
In the HERO TEASER you can choose if you want to display a hero image inside the product grid.
Following options are available:
7
35
• NO HERO TEASER: There will be no hero teaser displayed.
• HERO TEASER ON THE LEFT: There will be a hero teaser displayed on the top row and the left-
hand side in the product grid.
• HERO TEASER ON THE RIGHT: There will be a hero teaser displayed on the top row and the right-
hand side in the product grid.
In case you selected an option to include an image teaser you can now configure it. In the CONTENT
area following settings can be made:
“arrow up” and “arrow down” icons. Also you can change the existing image by clicking “change”.
and any other textfield component, e.g. HEADLINE and DESCRIPTION using Content Constructor
Directives. By adding directives it will display your products’ price or a products’ discount
percentage to your desired text field.
directive:
5. Enter a BUTTON LABEL text in case you want to include a button on the image teaser.
6. Enter a URL in the URL input in case you want to add a link to the button (also the Magento 2
widget types CMS Page Link, Catalog Category Link, Category Product Link, File URL are
supported).
In the STYLE tab you can make adjustments to the contrast of the text:
8
36
color gradient.
horizontally.
The last POSITION tab adjusts the image teasers’ size and position properties:
37
1. With TEASER SIZE you determine the height and width of the image.
i. 1x1: The image size is equal to one product tile in height and width (one row
and one column).
ii. 2x2: The image size occupies two product tiles in height and width (two rows
and two columns).
iii. 2x1: The image size width is equal to two product tiles and its height occupies
one product tile (one row and two columns).
iv. 1x2: The image size width is equal to one product tile and its height occupies
two product tiles (two rows and one column).
2. The POSITION of the image teaser can be located:
i. Left: Image is left aligned
ii. Center: Image is in the center
iii. Right: Image is right aligned
3. Depending whether ROW 1 or ROW 2 is selected the image is placed in the corresponding row.
4. The toggle SHOW IN MOBILES lets you set if the image is shown on mobile devices.
Figure 23 Product grid image settings (admin panel)
38
Figure 24 CC Products grid component (admin panel)
39
Figure 25 CC Products grid component underneath CC headline component (storefront)
40
2.1.13. Custom HTML
The CC Custom HTML component allows including custom HTML markup.
In order to set up this component, you firstly need to enter a TITLE which will be used only for internal
identification in the admin panel.
After that you can insert the CUSTOM HTML MARKUP in the input field below.
Note: The Custom HTML component should be used by developers only because custom markup can
break the page layout and logic.
Figure 26 CC Custom HTML component (admin panel)
41
2.1.14. CMS Pages Teaser
The CMS Page Teaser component does allow including a grid of CMS pages’ image teaser on another
CMS page. This approach does help creating a structure for CMS pages which is especially useful for
blogs, how-to guides, FAQs etc. The CMS Pages Teaser component does include Image Teasers of a
given CMS page which contain following elements:
• CMS Page Image Teaser (set in the Image Teaser area of a given CMS page, see section CMS
Page Image Teaser)
• CMS Page title (set in the very top area when editing / creating a CMS page)
In order to actually display image teasers of CMS in this component it is necessary to firstly upload an
image teaser of the given CMS page to be displayed (see section CMS Page Image Teaser). Also it is
useful to work with CMS Pages tags (see section CMS Page Tagging).
When setting up the CMS Pages Teaser component you firstly need to define which CMS pages’
image teasers to display. This can be done either using CMS TAGS that need to be set on the actual
CMS page to be included in this component. Please see section CMS Page Tagging how to achieve
this. When the CMS pages tags have been selected in this multi-select field, all CMS pages with the
given tag will be included in this component.
Alternatively, you can work with CMS PAGES IDS that can be read in the CMS pages grid overview
(CONTENT / ELEMENTS / PAGES). The CMS page IDs can be entered comma separated. However,
providing a list of comma separated IDs will result in ignoring any CMS tags (if specified). Only pages
with specified IDs will be displayed in exactly the same order as they are provided in the field.
Next you can select the TEASER LIMIT from following options:
• 4 Teasers: Only 4 CMS Page Image Teaser will be included in this component. Further CMS pages,
if specified by CMS tags or page IDs, will be ignored.
• 8 Teasers: Only 8 CMS Page Image Teaser will be included in this component. Further CMS pages,
if specified by CMS tags or page IDs, will be ignored.
• 16 Teasers: Only 16 CMS Page Image Teaser will be included in this component. Further CMS
pages, if specified by CMS tags or page IDs, will be ignored.
• All available teasers: All CMS Page Image Teaser will be included in this component.
42
Further you can select the DISPLAY VARIANT, which controls the text location on the image teaser.
Depending on the styling of the Magento 2 instance, the options are
• Text vertically centered on the left

• Text on the bottom, left corner
• Text vertically centered in the middle
• Text on the bottom – centered
In the last step you need to define the layouts for specific devices.9
On the DESKTOP LAYOUT you can choose:
• 2 IN ROW: Two CMS Image Teasers per row will be displayed on desktop devices. The amount of
rows does depend on the amount of CMS Pages Teasers to be included in this component.
• 4 IN ROW: Four CMS Image Teasers per row will be displayed on desktop devices. The amount of
rows does depend on the amount of CMS Pages Teasers to be included in this component.
On the MOBILE LAYOUT you can choose:
• SLIDER: One CMS page image teaser will be displayed. Further CMS page image teaser will be
accessed using the slider functionality.
• GRID: Two CMS page image teaser will be displayed per row. The amount of rows does depend on
the amount of CMS page image teasers to be included in this component.
9 9
43
Figure 27 CC CMS Pages Teaser component (admin panel)
44
Figure 28 CC CMS Pages Teaser component underneath CC Headline component (storefront)
45
2.1.15. Product Finder
The CC Product Finder component is a great instrument for guiding the customer to a specific product
or category. The customer faces several steps with options which he can choose. Depending on his
selection, the customer will be guided to a different set of products. All the steps contained in the CC
Product Finder selection itself are contained in one URL. The URL change when the specific set of
products will be displayed. The technology used for defining the several steps and actions in the
admin panel is JSON.
When setting up the CC Product Finder component you need to define the layouts of a single step for
the specific devices:
• MOBILE LAYOUT: You can display either one, two or three options per row on mobile devices. The
amount of rows does depend on the amount of options included in the single step.
• TABLET LAYOUT: You can display either two, three or four options per row on tablet devices. The
amount of rows does depend on the amount of options included in the single step.
• DESKTOP LAYOUT: You can display either three, four, five or six options per row on desktop
devices. The amount of rows does depend on the amount of options included in the single step.10
Next you can add steps to be included in the CC Product Finder component by clicking the “+” button.
You can insert an image for the options included in this step by using the Magento 2 media explorer by
clicking INSERT IMAGE.11 It is recommended to upload one picture per option. In the JSON input field
you can define the image to be used for a given option
If you already have more than one step in the CC Product Finder component, you can remove it using
the “bin” icon. Also you can move the given step by using the “arrow up” and “arrow down” buttons.
Next you need to configure the single steps of the CC Product Finder component in the JSON input
field on the right-hand side (underneath the INSERT IMAGE button). Following attributes are needed
here:
• "id": (required attribute) This is a unique identifier of a step, it is later used to reference options'
destinations.
• "title": (optional attribute) This attribute defines the title of a step, usually displayed as a headline
at the top.
• "description": (optional attribute) This is the description of a step, usually displayed as a paragraph
below the headline.
10
11
46
• "additional_css_class": (optional attribute) This attribute adds an additional class which allows
applying custom styles.
• "options": (required attribute) This is the array containing the actual options of the given step
o "label": (optional attribute) This is the option label displayed next to the option. It is
recommended to use one image and one label per option.
o "image": (optional attribute) This attribute defines the image URL to be used for the given
step. It is recommended to use the Magento 2 media URL variable, i.e. "{{media
url=\"filename.png\"}}". It is recommended to use one image and one label per option.
o "attributes": (optional attribute) This attribute does define with whom product attribute the
option should be associated with for searching the desired set of products of the given
option. Each step can set either attributes or category ID („category_id“) or both.
§ "code": This attributes defines the Magento 2 product attribute code to be used
for searching the desired set of products of the given option (you can find it in
admin panel under STORES / ATTRIBUTES / PRODUCT).
§ "values": This attribute defines the values of the product attribute that should be
matched to search the desired set of products of the given option. Products that
have at least one of given values of above attribute will be matched.
§ "range": This attribute does define a range of numeric values (e.g. price) which the
specific set of products should be searched in.
o "category_id": (optional attribute) This attribute does define the category to search for in
the given step. The numeric Magento's category identifier can be found in the category
settings under CATALOG / INVENTORY / CATEGORIES next to its name at the top left
corner.
o "next_step": (required attribute) Id of the step to which this step should lead to (“id”
attribute of the step). By setting this value to "search" the user will be redirected directly to
result search page.
• "optionsPerRow": (optional attribute) It is possible to provide a custom number of options that will
be displayed in each row for mobile and tablet devices (only given breakpoints will be overwritten,
rest will stay as default). The values might be e.g. "mobile": 2 or "tablet": 4.
Notes:
• It is not necessary to provide both attributes and categories to search for a specific set of
products. It is sufficient to provide only values for "attributes" or "category_id".
• It is not necessary to provide both images and labels for a given option. However it is
recommended to provide a visual differentiation of the option by using different values for both
the "label" and “image” attributes.
• The image filename in the “image” attributes needs to be explicitly the same as the image
filename uploaded for the given step.
47
• It is possible to add a step which ignores all previously selected attributes and search for a
specific category instead. In order to do so you need to add the attribute "category_only": true and
the corresponding category ("category_id").
On the left-hand side of the JSON input field there is a preview window which shows the JSON input
(title, description, image and labels of options) in real-time.
Figure 29 CC Product Finder component (admin panel)
48
Figure 30 CC Product Finder component - first step (storefront)
49
2.1.16. Icon Component
With the Icon Component you can add e.g. your shop USPs on CMS pages, category pages or product
detail pages..
Figure 31 Icon Component (storefront)
When setting up the component you firstly have to select a TEASER WIDTH, DESKTOP, TABLET
LAYOUT, MOBILE LAYOUT and the TEXT POSITIONING.
CONTENT WIDTH: The image teaser area is limited by the container width.
MOBILE LAYOUT: On mobile devices only two icons will be displayed. There is a slider functionality
which allows rotation of further icon images.
The TEXT POSITIONING: BELOW IMAGE will display your text underneath icon images.
DESKTOP LAYOUT AND TABLET LAYOUT provides different number of images per row:
The MOBILE LAYOUT is fixed to “SLIDER” and TEXT POSITIONING is fixed to “TEXT BELOW IMAGE”.
50
In the next step you can add icons the same way as image teasers. By clicking the “+” icon new
images will be added. You may configure your icon images in the CONTENT area. Here following
settings can be made:
Regardless whether you have chosen an image or not there always will be shown a live preview
directive:
URL are supported).
In the tab STYLE two additional customizations can be made.
1. Choosing TEXT STYLE ‘light’ provides a black box with white font. If ‘dark’ is selected it is the
other way around, providing a black text font on a white background. Both coloring changes are in
each case applied to slogan and description.
horizontally.
12
51
Figure 32 Setting up an Icon Component (admin panel)
When the changes are done click “SAVE” on the right-hand side in the top area.
52
2.1.17. Daily Deal Teaser
The CC Daily Deal Teaser component allows including existing Daily Deal products to be displayed on
CMS pages. Both simple products and configurable products can be displayed in this component. For
more information on Daily Deals and how to set them up, see section Daily Deal. On the storefront the
component itself contains following elements (depending on the styling):
• The product image including a Daily Deal badge

• The product name
• The review summary
• The time left for the given Daily Deal
• The amount of items available for the given Daily Deal
• The discount badge
• The price and the strike price (only for simple products)
• The add-to-cart button
In order to add products to the Daily Deal Teaser component you can select CATEGORIES in the multi-
select field.
On the CC Daily Deal Teaser component only one product will be displayed. However, the logic of this
component does allow including more than one product which will be displayed in a specific order.
The order of products to be displayed on the storefront depends on the order set in the admin panel
for the component.
• In case products have been added via the SKUS field, the products will be displayed in the exact
order are entered in the field. Filtering (FILTER) and Sorting (ORDER BY) will be ignored. If the first
product runs out the Daily Deal period, the next product will be displayed.
• In case products have been added via the CATEGORIES select field, the products will be displayed
taking into account the ORDER BY setting. When setting the attribute “offer to” to be used for
ORDER BY, the Daily Deal run-time period will be taking into account, i.e. the product that has
either the shortest or the longest Daily Deal period will be displayed first. If the first product runs
out the Daily Deal run-time period, the next product will be displayed.
The CUSTOM DATA PROVIDER input has been used for creating custom criteria in existing MageSuite
projects. However it used by developers only and it is not recommended for customer use.
53
descending).
Figure 33 CC Daily Deal Teaser component (admin panel)
Figure 34 CC Daily Deal Teaser component underneath CC Headline component (storefront)
54
2.1.18. Teaser and text
The CC Teaser and text component provides you an option to add an image and a text which can be
used for numerous scenarios, e.g. category pages, landing pages and product detail pages. Both
teaser and text can be adjusted and enhanced with the contrast optimizer.
Figure 35 CC Teaser and text (storefront)
The new featured contrast optimizer contains following options:
Content tab
• A slogan which can be displayed either on teaser or text area
• A text description on teaser or text area
• A call-to-action (“CTA”) button including a link on either teaser or text area
Style tab
55
–
Figure 36 CC Teaser and text component (admin panel)
Before setting up a new Teaser and text component you must first choose the TEASER WIDTH from
one of the following options:
• CONTENT WIDTH: The Teaser and text area is limited by the container width.
• BROWSER WIDTH: The Teaser and text area does exceed the container and is limited by the
window width.
56
Next you can specify the MOBILE LAYOUT13. Depending on which option you have selected here, the
appearances on mobile devices will differ. Choosing either the image above and a text below or vice
versa.
In the CONTENT area you can now add and configure your images by clicking the “+” icon. Here
1. In the image upload area you can insert an image using the Magento 2 media explorer.14 If you
already have an image, you can remove it using the “bin” icon. By clicking “change” you can
change an existing image. Regardless whether you have chosen an image or not there always will
be shown a live preview with your slogan and description.
(depending on the styling). Additionally it is possible to insert dynamic content in this text and any
other textfield component, e.g. HEADLINE and DESCRIPTION using Content Constructor
directive:
URL are supported).
13
14
57
color gradient.
horizontally.
Figure 37 Headline with dynamic content (admin panel)
58
Figure 38 Headline with dynamic content (storefront)
59
2.1.19. Instagram Feed
The Instagram Feed component gives you a great opportunity to display your latest Instagram content
on your pages. It is especially well suited for landing pages, intermediary category pages, category
pages and product detail pages. Each Instagram image is clickable and redirects the user to your
target account on Instagram. Depending on your configurations an image gallery or a carousel is
shown with 4, 8 or 12 images.
Figure 39 CC Instagram Feed (storefront)
The Instagram Feed component is based on Instagram Basic Display API. You can find all information
and specification about creating Instagram API and tokens here (URL:
https://developers.facebook.com/docs/instagram-basic-display-api).
(Site Note: The total number of calls component can make per hour is 240 times the number of users.
User can make more than 240 calls per hour, as long as the total for all users does not exceed the app
maximum)
In first place you should enter your Instagram access token in STORES / SETTINGS /
CONFIGURATION under MAGESUITE / CONTENT CONSTRUCTOR.
Collapse the INSTAGRAM DATA FEED COMPONENT CONFIGURATION area and enter your unique
Instagram Access Token {long-lived Access Token}, User ID {User ID}, Media API URL and User ID API
URL. After this step, click SAVE CONFIG in the top section on the right-hand side.
Now you can add the Instagram Feed component to your CMS pages.
60
Figure 40 CC Instagram Feed configurations (admin panel)
Figure 41 CC Instagram Feed configuration
61
2.1.19.1. How to create Access Token
Go to Facebook Developer App dashboard, then Instagram Basic Display API → Basic Display and
copy {Instagram App Id}, {Instagram App Secret} and {Valid OAuth Redirect URIs}.
With these details you have to create the request and have to enter the parameters in the appropriate
places.
• https://api.instagram.com/oauth/authorize
?client_id={Instagram App Id}
&redirect_uri={Valid OAuthRedirect URIs}
&scope=user_profile,user_media
&response_type=code
You will be redirected now to Instagram authorization page. Confirm with “Authorize” and wait for
redirection. After successful authorization, you will be redirected to page that you passed to request
as {Valid OAuth Redirect URIs}.
Copy and save code parameter of the redirected URL. This is your {authorization code}, this will remain
active for 1h.
Prepare request for getting short-lived Access Token and replace parameters with your values:
• curl -X POST \
https://api.instagram.com/oauth/access_token \
-F client_id={Instagram App Id} \
-F client_secret={Instagram App Secret} \
-F grant_type=authorization_code \
-F redirect_uri={Valid OAuth Redirect URIs} \
-F code={authorization code}
This will contain the shot-lived Access Token (“access_token” value = {short-lived Access Token}) and
User ID (“user_id” value = {User ID}).
To get long-lived Access Token you need to prepare request for exchanging short-lived Access Token
for long-lived one. Fill the sample below with your data (same way as for short-lived Access Token)
paste it into your browser and send the request:
• https://graph.instagram.com/access_token
?grant_type=ig_exchange_token
&client_secret={Instagram App Secret}
&access_token={short-lived Access Token}
The response will contain your access token and expire timestamp. Make sure you saved the long-
lived Access Token (“access_token” value = {long-lived Access Token}).
62
2.1.20. Mosaic
With the help of the brand-new Mosaic CMS component there is a new and easy way to add
asymmetric image teasers to your storefront. This CMS component provides the same configuration
possibilities as the Image teaser and the Teaser and text component. You can use the admin panel to
adjust the proportions of the images with ease.
The use of this component could look like this:
Figure 42 CC Mosaic component (storefront)
Before setting up a new Mosaic component you must first choose the TEASER WIDTH from one of the
following options:
• CONTENT WIDTH: The Mosaic area is limited by the container width.

• BROWSER WIDTH: The Mosaic area does exceed the container and is limited by the window
width.
Then you may choose the images PROPORTIONS. Selecting the first option allows the left image to
take up more screen space than the right image (2/3 to 1/3 ratio). The second option increases the
right images’ screen space instead (1/3 to 2/3 ratio).
The contrast optimizer contains following options:
63
Content tab
• A slogan which can be displayed on teaser
• A text description on teaser
• A call-to-action (“CTA”) button including a link on teaser
Style tab
In the CONTENT area you can now add and configure your images by clicking the “+” icon. Here
1. In the image upload area you can insert an image using the Magento 2 media explorer.15 If you
already have an image, you can remove it using the “bin” icon. By clicking “change” you can
change an existing image. Regardless whether you have chosen an image or not there always will
be shown a live preview with your slogan and description.
(depending on the styling). Additionally it is possible to insert dynamic content in this text and any
other text field component, e.g. HEADLINE and DESCRIPTION using Content Constructor
directive:
URL are supported).
15
64
color gradient.
horizontally.
65
Figure 43 Mosaic configurations (admin panel)
Click on SAVE when your settings have been made.
66
2.1.21. Accordion
This feature component opens new ways to design your CMS page. You can now create e.g. FAQ
pages in a convenient and simple way.
As depicted in Figure 44 you can create a collapsible text section where all questions can be unfolded
to reveal the text underneath. With this solution valuable information can be presented without losing
the clarity of an overview page.
Figure 44 CC Accordion (storefront)
In order to configure and set an Accordion navigate to your desired CMS page and add the component
to your CMS page by clicking the “+” icon in the CONTENT area and select Accordion. Here following
Global options, by default both options are enabled:

• Allow multiple sections to be opened at the same time
• Unfold first entry on page loaded
Configure your component:

1. Enter your HEADLINE text. This section will be displayed at any given time. By clicking on this area
the answer will be unfolded.
2. Enter the PARAGRAPH text which will be the text element located underneath the HEADLINE when
unfolded.
If you want to add more paragraph sections you can add them by using the “+” icon. Each section can
be moved using the “arrow up” and “arrow down” icons.
67
Figure 45 Accordion component configurations (admin panel)
When the settings have been made, click SAVE on the right-hand side in the top area.
68
2.1.22. Product teaser
With the Product teaser component you now may guide your customer’s focus to your desired
product. The component can be applied to any of your CMS pages, categories or product detail page
in your storefront.
Figure 46 Product teaser component (store front)
In order to add a Product teaser, simply navigate to your desired page, product or category. Scroll
down and find CONTENT CONSTRUCTOR, expand this section and add a new component by clicking
on “+” and selecting Product teaser component.
Add your SKU in this entry field and click “SAVE” on top and right-hand side. Each component instance
may only be provided with one SKU.
The content displayed within the product teaser component, such as description, short description,
SKu, etc., does depend on the project customizations.
69
2.1.23. Tips and tricks for CC components
MageSuite allow to use Content Constructor components in CMS Blocks. This gives editor power of
pre-configure bunch of Content Constructor components.
“I’d like to use the same Image Teaser multiple times on 10 different CMS pages”
To avoid configuring the Image Teaser 2.0 component 10 times, the editor can simply create CMS
Block, configure the Image Teaser once, and then re-use it on multiple CMS Pages by choosing Static
Block component from CC component’s list and pick created block from the list of available ones.
“I have a Hero component which is 1000x400px and it looks good on desktops but it’s too
small for smartphones”
In this case, editor should avoid showing this hero to mobile users. Instead, he should prepare another
version of the image, for instance 500x700 and create another hero component above/below the one
for desktop users. Then being on the draft preview, editor can toggle Component Visibility for both
them: uncheck “mobile” for the desktop hero and “tablet and desktop” for the one created for mobile
devices. This way, desktop hero will only be displayed on the storefront only for screen resolutions
wider than 767px and mobile hero will displayed only on screens not wider than 767px.
Figure 47 Enabling and disabling components per device
“I’m preparing CMS page for a promotion. I want to have it ready and just deploy it when it’s
time, but I don’t want to show it yet to the users.”
In this case editor can create CMS Page and configure it to be ready for the promotion launch but not
make it public yet. In order to do this, editor should keep CMS Page disabled and user preview button
placed in the action’s bar of the CMS Page. During content build editor can preview page anytime
without a need to publish it.
70
Figure 48 Publishing a CMS page
“I’m working on the page that is already published. I want to prepare a hero component but I
don’t want to show it yet until it’s time”
In this case editor can prepare hero component and leave it hidden. Just like in our second use case
with unchecking “mobile” or “tablet & desktop” visibility. This time however, editor can unchek both of
them and save the page. This component will become then greyed-out on the draft preview. Don’t
worry, it will not be just hidden on the storefront, it will not render at all until at least one of visibility
checkboxes is checked. When it’s time to display it on your page, just enable it for devices it should
show up and saave the page.
71
2.2. Working with existing CC Components
When already having CC components in the CONTENT area the components can be moved (switched
with other CC components), edited, duplicated and removed. Furthermore, the visibility of CC
components can be adjusted for desktop and mobile views. In order to display these options you need
to move the cursor on the area of a given CC component.
Figure 49 Options when working with existing CC components
Moving CC components
In order to move the given CC component up (switching it with the CC component located above) hit
the “ARROW UP” button. In order to move the given CC component down (switching it with the CC
component located underneath) hit the “ARROW DOWN” button.
Editing CC components
In order to edit the given CC component, click the “EDIT” button (pencil icon). You can now edit the
configuration of the given CC component and save or cancel the changes. Please note, that not all CC
components can be edited.
Duplicating CC components
In order to duplicate the given CC component, click the “DUPILCATE” button (icon with two windows).
Please note, that not all CC components can be duplicated.
Adjusting visibility of CC components
72
In order to hide the given CC component for a specific device, you can use the MOBILE and DESKTOP
checkbox. When ticked, the given component is visible on the specific device. Per default CC
components are visible for both mobile and desktop devices.
Removing CC components
In order to remove a given CC component, click the “BIN” button (bin icon). You can either confirm the
removal or cancel it.
73
2.3. Working with existing CMS Pages
When accessing CONTENT / ELEMENTS / PAGES you are in the CMS page overview grid. Here you
have the possibility to work with existing CMS pages.
Quick Edit16
In order to perform a quick edit from the CMS page overview grid just click inside the area of a CMS
page row. Now you are able to perform a quick edit from the CMS page overview grid.
Figure 50 CMS page overview grid - quick edit
Editing CMS pages

In order to edit an existing CMS page navigate to the “ACTION” column and the corresponding CMS
page row. Now click “SELECT” and “EDIT”.
Figure 51 CMS page overview grid - Edit
Deleting CMS pages

In order to delete an existing CMS page navigate to the “ACTION” column and the corresponding CMS
page row. Now click “SELECT” and “DELETE” (see the screenshot above).
16
Please note that the columns depicted on the screenshot may deviate to you admin panel view depending on the columns
configuration in „COLUMNS“ underneath the „ADD NEW PAGE“ button.
74
Viewing CMS pages
In order to view an existing CMS page navigate to the “ACTION” column and the corresponding CMS
page row. Now click “SELECT” and “VIEW” (see the screenshot above). Please note, that the CMS
page to be viewed will display in the same window.
Duplicating CMS pages

In order to duplicate an existing CMS page navigate to the “ACTION” column and the corresponding
CMS page row. Now click “SELECT” and “DUPLICATE” (see the screenshot above).
In the proceeding overlay you will be asked to enter a NEW PAGE IDENTIFIER (URL key), which has to
be unique. Additionally you have to enter a NEW PAGE TITLE, which does not have to be unique.
In case you are about to duplicate a CMS page containing a CC Paragraph or CC Static block
component, you can copy these components. In order to do so you need to tick the COPY THIS BLOCK
checkbox and enter a NEW IDENTIFIER for the duplicate paragraph or static block (the new identifier
must be unique and cannot be used already by any other CMS block). Also you can enter a NEW TITLE
for the duplicate paragraph or static block. If you do not tick the COPY THIS BLOCK checkbox,
changes in the original CMS page’s paragraph or static block components will also lead to changes in
the duplicate CMS page’s paragraph and static block components.
Figure 52 Duplicating CMS pages
75
Mass Action
In order to perform a mass action in the CMS page overview grid you firstly have to select the CMS
pages to be changed. You can do this either using the checkbox dropdown and SELECT ALL CMS
pages (see screenshot below) or by ticking the checkboxes of specific CMS pages in the checkbox
column.
Figure 53 Mass Action CMS page selection
When the desired CMS pages have been selected you can use the ACTION dropdown field to select
the action to be performed:
• DELETE: The selected CMS pages will be removed.

• DISABLE: The selected CMS pages will be disabled for the storefront.
• ENABLE: The selected CMS pages will be enabled for the storefront.
• EDIT: A quick edit will be performed for the selected CMS pages.
Figure 54 Mass Action options for CMS pages
76
2.4. CMS Page Grouping
The CMS Page Grouping feature does allow redirecting to another CMS page with the same page
group identifier (“Page Group ID”) when switching store views. This is especially useful in case the
user switches the language (store view) using the language switcher on the storefront.
On the below screenshots’ example there are two CMS pages for the imprint section:
• Page ID 10002 (page title “Impressum”) for the German store view
• Page ID 10003 (page title “Imprint”) for the English store view
Both CMS pages use the same PAGE GROUP ID (“imprint”) as can be seen on the CMS page overview
grid on Figure 56. Now in case the user is located on the “Impressum” CMS page (Page ID 10002) and
chooses to switch to the English store view (see Figure 57) he will be automatically redirected to the
“Imprint” CMS page (Page ID 10003) due to being in the same CMS Page Group (“imprint”).
CMS Page Group IDs can be set by two methods.
Method 1: CMS Page Configuration

Access the CMS Page overview grid in CONTENT / ELEMENTS / PAGES. Now navigate to the CMS
Page to add the CMS Page Group ID and click “EDIT” in the “ACTION” column. Now expand the
SEARCH ENGINE OPTIMIZATION area. You can put in the desired PAGE GROUP ID identifier (unique)
in the corresponding input field (see Figure 55). In order to save the changes click “SAVE PAGE” on
top of the CMS Page configuration view.
77
Figure 55 CMS Page Group ID configuration (admin panel)
Method 2: CMS Page overview grid quick edit

Page to add the CMS Page Group ID and click inside the area of the CMS Pages’ row. By doing so you
enabled the quick edit mode of the given CMS page. Now you can enter the desired PAGE GROUP ID
in the input field.17 When the input has been entered click SAVE underneath the quick edit bar to save
the changes.
Figure 56 CMS Page Group ID in the CMS page overview grid (admin panel)
17
In case there is no such column „PAGE GROUP ID“ you need to firstly enable it for the CMS Page overview grid in „COLUMNS“
by ticking the checkbox PAGE GROUP ID.
78
Figure 57 Switching languages / store views via language switcher (storefront)
79
2.5. CMS Page Tagging
The CMS Page Tagging feature allows creating CMS Page tags that can be later used for referencing
CMS pages in the CC CMS Pages Teaser component (see CMS Pages Teaser). As can be seen on
Figure 58 existing CMS Page Tags can be used in the CMS TAGS multi-select field to add CMS Pages
with a specific Tag to the CC CMS Pages Teaser component.
CMS Page Tags can be set by two methods.
Method 1: CMS Page Configuration

Page to add the CMS Page Tag and click “EDIT” in the “ACTION” column. Now expand the TAGS area.
You can put in the desired TAGS identifier (unique) in the corresponding input field (see Figure 59). In
order to save the changes click “SAVE PAGE” on top of the CMS Page configuration view.
Figure 58 CC CMS Pages Teaser component (admin panel)
80
Figure 59 CMS Page Tags (admin panel)
Method 2: CMS Page overview grid quick edit

Page to add the CMS Page Tag and click inside the area of the CMS Pages’ row. By doing so you
enabled the quick edit mode of the given CMS page. Now you can enter the desired TAGS in the input
field.18 When the input has been entered click SAVE underneath the quick edit bar to save the
changes.
Figure 60 CMS Page Tags in the CMS page overview grid (admin panel)
18
In case there is no such column „TAGS“ you need to firstly enable it for the CMS Page overview grid in „COLUMNS“ by ticking
the checkbox TAGS.
81
2.6. CMS Page Image Teaser
The CMS Page Image Teaser feature does allow adding an Image Teaser for a CMS Page that will be
displayed on the CC CMS Pages Teaser component (see CMS Pages Teaser). As can be seen on
Figure 61 the CMS Pages included on the CC CMS Pages component do display Image Teaser which
can be set using this feature.
Figure 61 CC CMS Pages Teaser component underneath CC Headline component (storefront)
82
In order to add an Image Teaser for a given CMS Page, access the CMS Page overview grid in
CONTENT / ELEMENTS / PAGES. Now navigate to the CMS Page to add the CMS Image Teaser and
choose “EDIT” in the “ACTION” column. Now expand the IMAGE TEASER area (see Figure 62). You
can upload an image by clicking the UPLOAD button.19 In order to save the changes click “SAVE
PAGE” on top of the CMS Page configuration view.20
Figure 62 CMS Image Teaser configuration (admin panel)
19
Allowed file types: png, gif, jpg, jpeg, svg. Max file size 1MB.
20
In order to make the changes visible on the storefront you need to flush the cache in SYSTEM / TOOLS / CACHE
MANAGEMENT
83
2.7. Brands
The Brands module is a great tool to inform the user about featured brands. The Brands module does
allow setting up several brands and adding products to a specific brand. With the CC integration you
can create dedicated brand presentation pages which inform the user about the brand itself and its
featured products. Additionally there are CMS features which give the user an overview of the featured
brands, such as the CC Brand Carousel component (see
84
Brand Carousel) and Brands overview pages.
Figure 63 Brand list page (storefront)
85
2.7.1. Setting up brands
In order to access the Brands overview grid in the admin panel navigate to CATALOG / INVENTORY /
BRANDS.
Figure 64 Brands overview grid (admin panel)
In this view you can edit existing brands by simply clicking into the corresponding row. In order to add
new brands click CREATE NEW BRAND on the top area on the right-hand side.
At the very beginning make sure in which store view you are working in. In order to create brands
which should be applicable for all store view, select “ALL STORE VIEWS” in the STORE VIEW section at
the top section.
Now you can go ahead with the new brand configuration in the BRAND DETAILS section.
Firstly you can either enable or disable the brand for the storefront display by ticking the ENABLED
checkbox. It is recommended to firstly disable the brand until you finalized the configuration and CMS
content.
Next you enter a BRAND NAME in the input field. This name will be used on the storefront and in the
admin panel as an identifier.
86
After you can add a brand logo to be displayed on the CC Brands Carousel component by clicking
UPLOAD next to the BRAND ICON.21 You can also upload an additional brand logo to be displayed on
the Product Detail Page (instead of the first brand logo) by clicking UPLOAD next to the BRAND
ADDITIONAL ICON.22
Next you enter a unique URL KEY in the input field.
By ticking the IS FEATURED checkbox you can control if the brand should be contained on the Brand
list page.
The SHOW IN BRAND CAROUSEL checkbox does enable and disable brands for displaying them in the
CC Brands Carousel component (see
21
22
87
Brand Carousel).
Next you can enter a SHORT DESCRIPTION in the text input field, which will be displayed on top or
below the product overview area (product grid), depending on the styling.
Additionally you can enter a FULL DESCRIPTION in the text input field, which will be displayed on top
or below the product overview area (product grid), depending on the styling.
The LAYOUT UPDATE XML input field allows you to enter a custom XML code in order to control the
layout of the brand presentation page.
When the brand page configuration has been done you can save the configuration by clicking the
SAVE BRAND button at the top area on the right-hand side.
At this point the brands presentation page is empty, i.e. there is no CMS content and no products
contained. In order to add products see section Adding brands to a product. How to add CMS content
to a brands presentation page is described in section Brand presentation page.
88
Figure 65 Creating a new brand (admin panel)
89
2.7.2. Brand presentation page
The brand presentation page itself is a product overview page of a specific brand incl. a CMS content
area, filtering, sorting etc. The purpose of this page is to
• inform the user about the brand, e.g. by using CMS content
• inform the user about the brand’s products by using a product overview section (product grid)
In order to attach products to a specific brand see section Adding brands to a product. When this is
done, the corresponding products will automatically appear in the product overview section (product
grid) on the Brands presentation page.
Figure 66 Brand presentation page (storefront)
In order to add CMS content to the Brands presentation page you can use all available Content
Constructor components. Navigate to the Brands overview grid in the admin panel in CATALOG /
90
INVENTORY / BRANDS. Now expand the CONTENT CONSTRUCTOR section. Here you can add all
Content Constructor components as described in section 2.1 and its sub-sections.
In order to save the changes click the SAVE BRAND button at the top area on the right-hand side.
Figure 67 Brand presentation page Content Constructor configuration: CC Paragraph and Product Grid (admin
panel)
91
2.7.3. Adding brands to a product
After you have created a brand you have to attach products to the brand. This is necessary to
• display products in the Products Grid on the Brands Presentation page and
• show the brand logo on the Product detail page (depending on the styling).
In order to add products to a brand you need to firstly access the Product Overview grid in CATALOG /
INVENTORY / PRODUCTS. Now there are two methods how to add products to a given brand.
Method 1: Product Page Configuration

When being in the Product Overview grid click the EDIT button in the ACTION column of the product
you would like to add the brand to. In the top attributes area navigate to the BRANDS multi-select field
and select the Brand.23 After making the changes click the SAVE button on the top section on the
right-hand side.
23
Please make sure that the attribute code „brand“ is attached to the default attribute set in STORES / ATTRIBUTES /
ATTRIBUTE SET
92
Figure 68 Product Page configuration - Brand (admin panel)
Method 2: Product Overview grid quick edit

When being in the Product Overview grid select the products to be attached to a given brand my
ticking the select checkboxes on the very left column. Now click the ACTION dropdown field and
choose UPDATE ATTRIBUTES (see Figure 69).
93
Figure 69 Product overview grid - Brand quick edit (admin panel)
You will be now redirected to the Update Attributes pages. Here you can navigate to the BRAND
section in the ATTRIBUTES tab. Check the CHANGE checkbox to activate the multi-select field for
selecting a brand and select the brand you would like to attach the products to. When done, click the
SAVE button on top of the page.
In both cases the products should appear in the Product Grids section on the Brand presentation
page.24 Depending on the styling there should be also a brand logo visible on the Product Detail page.
24
If this is not the case, flush the cache in SYSTEM / TOOLS / CACHE MANAGEMENT
94
2.7.4. Brands list page
The Brands list page is an overview page of brands on the storefront. All brands that meet the
following criteria are displayed here:
• the ENABLED checkbox on the brand configuration page is ticked (see Setting up brands)
• the IS FEATURED checkbox on the brand configuration page is ticked (see Setting up brands)
Depending on the styling, the Brands list page typically shows two sections on the storefront:
• the “All Brands” area on top where you can find all the brands’ logos and corresponding links to
their Brands presentation page
• the “Brands overview” area underneath the “All Brands” area where you can find all the brands in
alphabetical order
The Brands list page can be accessed on the storefront under the URL key “brands”25, the final URL
might thus be “www.yourshopname.com/brands”. You may introduce a link to the Brands list page by
adding a Custom Link in the Navigation (see Custom Links in Main Navigation).
25
The URL key can be only changed via code modifications
95
Figure 70 Brands list page (storefront)
96
2.7.5. Brands carousel
The Brands carousel is a teaser of brands on the storefront. The Brands carousel itself is a Content
Constructor component which can be set on any CMS page, such as the homepage (see Brand
Carousel). All brands that meet the following criteria are displayed here:
• the ENABLED checkbox on the brand configuration page is ticked (see Setting up brands)
• the SHOW IN BRAND CAROUSEL checkbox on the brand configuration page is ticked (see Setting
up brands)
Figure 71 CC Brand carousel component (storefront)
97
2.8. FAQ Pages
MageSuite is using the Aheadworks FAQ Extension for Magento 2.26 The extensions allows writing as
well as grouping of FAQ articles into categories. You can use a search input for searching FAQ
articles. Also the extension does include a rating feature (such as “was this article helpful?”).
The proceeding section will give a brief overview of the configuration of FAQ pages and the extension.
You can view the full Aheadword FAQ Extension documentation here:
http://confluence.aheadworks.com/display/EUDOC/FAQ+-+Magento+2 - FAQ-Magento2-
Gettingaround
Figure 72 FAQ Pages extension (storefront)
In first place you should configure the FAQ extension in STORES / SETTINGS / CONFIGURATION
under AHEADWORKS EXTENSION / FAQ.
In the GENERAL SETTINGS area you may enter a title for the FAQ section in STOREFRONT FAQ
NAME. Also you should select an URL key for the FAQ section in the FAQ ROUTE input. Finally you can
disable or enable the FAQ section for specific customer groups in the DISABLE FOR CUSTOMER
GROUPS multi-select. You can also disable or enable the article rating feature in the ARTICLE
HELPFULNESS section and the WHO CAN VIEW HELPFULNESS multi-select.
26
https://ecommerce.aheadworks.com/magento-2-extensions/faq
98
Figure 73 FAQ extension configuration (admin panel)
After the FAQ Pages extension configuration you may go ahead with adding FAQ categories. Working
with categories gives a better structure of FAQ articles when having a significant amount of entries.
Access CONTENT / FAQ BY AHEADWORKS / CATEGORIES. In this FAQ Categories grid you may edit
existing categories or create new categories by clicking the ADD NEW CATEGORY button.
99
Figure 74 FAQ Categories grid (admin panel)
Enter a descriptive CATEGORY NAME in the input field. Also you are asked to enter a unique URL KEY
for the given category. Next choose the STORE VIEW you would like to use the FAQ category in. All
other settings are optional. When finishing the setup you may tick the ENABLE CATEGORY checkbox
to make it visible on the storefront and hit the SAVE CATEGORY button.
100
Figure 75 FAQ Category configuration
Now you can go to the FAQ Articles overview grid under CONTENT / FAQ BY AHEADWORKS /
ARTICLES. Here you can edit existing FAQ Articles as well as create new ones by clicking ADD NEW
ARTICLE.
101
Figure 76 FAQ Articles overview grid (admin panel)
Firstly enter a descriptive ARTICLE TITLE and a unique URL KEY in the input fields. Choose the STORE
VIEW you would like to use the FAQ Article in. Next you can select a CATEGORY from the categories
created in the previous step. Finally insert CONTENT for the FAQ Article using the WYSIWYG editor. All
other settings are optional. When the settings have been made you may enable the FAQ Article for the
storefront by ticking the ENABLE ARTICLE checkbox and saving by hitting SAVE ARTICLE.
Now you have added FAQ Categories and FAQ Articles. In order to make the FAQ section easily
accessible on the storefront you may add a reference in the footer section. Navigate to CONTENT /
ELEMENTS / BLOCKS. Choose the footer link CMS block you would like to use the FAQ section in and
click EDIT in the ACTION column. In the WYSIWYG editor you may add a simple href link, such as “<li
class="cs-footer-list__item"><a href="faq">FAQ</a></li>”.27 Also you may add a Custom Link in the
navigation (see Custom Links in Main Navigation).
27
Here you need to add the URL key you have chosen in STORES / SETTINGS / CONFIGURATION under AHEADWORKS
EXTENSION / FAQ in the FAQ ROUTE input field.
102
Figure 77 FAQ Article configuration (admin panel)
103
2.9. Custom Links in Main Navigation
The MageSuite does offer the possibility to add a custom link in the main navigation. In this case the
user will be redirected to a custom target URL instead of the product overview page. This is especially
useful for CMS content, such as blog pages, about us pages etc.
In order to add a custom link in the navigation firstly access the category overview in CATALOG /
INVENTORY / CATEGORIES. Click the category you would like to add the custom link in on the
category tree on the left-hand side. In the CUSTOM TARGET URL input field you can now enter the
custom link. Instead of the corresponding product overview page (category page) the user will now be
redirected to the URL you have entered here. For external references you need to enter the full URL
(e.g. http://www.magesuite.io/). For internal references on the same domain you may use relative
URLs (e.g. “/men-cms-page”).28
When the settings have been made click the SAVE button on the top section on the right-hand side.
Figure 78 Adding Custom Links in Categories configuration (admin panel)
28
In order to find out the URL keys of CMS pages go to the CMS Page overview grid in CONTENT / ELEMENTS / PAGES and see
the column URL KEY.
104
2.10. CC Components on product overview pages
& Image Teaser in Product grid
MageSuite does allow adding CC components on Magento product overview pages. All CC
components from section 2.1 can be used here. Additionally you can add Image Teasers into the
Product Grid. Including CMS content to product overview pages is a great way to boost SEO
performance on one side. On the other side you can provide the customer with further information and
references using e.g. Text Paragraphs. Furthermore Image Teasers in the Product grid might be used
to inform the customer about cross-selling products as well as marketing campaigns.
In order to access the Content Constructor section for categories navigate to CATALOG / INVENTORY
/ CATEGORIES. Now scroll down and expand the CONTENT CONSTRUCTOR section. Here you can
choose the visibility of CC components for MOBILE, DESKTOP or make it NOT VISIBLE. You can add
all CC components from section 2.1.
105
Figure 79 Content Constructor on Categories configuration (admin panel)
Also there is an CC component called MAGENTO PRODUCT-GRID-TEASERS which cannot be

removed. This component is actually the Magento Product grid on product overview pages.
You can move this component up by clicking the “ARROW UP” button and move it down by clicking the
“ARROW DOWN” button. Using this component you can add Image Teasers to the product grid. In
order to do so click the “EDIT” button.
On the next page you are able to add Image Teasers by clicking the “+” button. Here the following
106
“ARROW UP” and “ARROW DOWN” icons. Also you can change the existing image by clicking
“CHANGE”.
2. Select the TEASER SIZE:
i. 1x1: The Image Teaser will fit into one row and one column entry (it has the same
dimensions as a product tile)
ii. 1x2: The Image Teaser will fit into one row and two column entries
iii. 2x1: The Image Teaser will fit into two rows and one column entry
iv. 2x2: The Image Teaser will fit into two rows and two column entries
3. Select the POSITION:
i. Left: The Image Teaser will be located on the very left column of the Product Grid
ii. Center: The Image Teaser will be located in the middle column of the Product Grid
iii. Right: The Image Teaser will be located on the very right column of the Product
Grid
4. Select the ROW:
i. 1: The Image Teaser will be located in the first row in the Product Grid
ii. 2: The Image Teaser will be located in the second row in the Product Grid
iii. 3: The Image Teaser will be located in the third row in the Product Grid
iv. As last: The Image Teaser will be located in the last row in the Product Grid
5. Select the DISPLAY VARIANT, which controls the text location on the image teaser. Depending on
URL are supported).
29
107
Figure 80 Image Teaser in Product grid configuration on Categories (admin panel)
When the settings have been made click SAVE on this page. On the Categories configuration page
also click SAVE.
108
Figure 81 Image Teaser in Product Grid on Categories (storefront)
109
2.11. CC Components on product detail pages
MageSuite allows adding CC components on Magento product detail pages. All CC components from
section 2.1 can be used here. Additionally you can add Image Teasers into the Product Grid. Including
CMS content to product detail pages is a great tool to increase the SEO performance on one hand. On
the other hand you can present the product’s features using hero carousels, image teaser and other
CMS components which attract the customer’s attention and increase the conversion rate.
In order to access the Content Constructor section for products navigate to CATALOG / INVENTORY /
PRODUCTS. Now scroll down and expand the CONTENT CONSTRUCTOR section. Here you can
choose the visibility of CC components for MOBILE, DESKTOP or make it NOT VISIBLE. You can add
all CC components from section 2.1.
Figure 82 Content Constructor on Product page configuration (admin panel)
110
When the settings have been made click SAVE on this page. On the Product configuration page also
click SAVE.
111
2.12. Image Teaser in Flyout Navigation
MageSuite allows to include an Image Teaser in the Flyout Navigation. By doing so you can insert e.g.
emotional content and attract the customer for specific products. Also you can add Teasers to
promote marketing campaigns.
Figure 83 Image Teaser in Flyout Navigation (storefront)
In order to insert an Image Teaser in the Flyout Navigation firstly access the Categories configuration
in CATALOG / INVENTORY / CATEGORIES. Here scroll down to the IMAGE TEASER section and
expand it.
Here you can do the following settings:
4. Insert an IMAGE as the Image Teaser using the UPLOAD button.30
5. Enter a BUTTON LABEL text in case you want to include a button on the image teaser.
6. Enter a URL in the BUTTON LINK input in case you want to add a link to the button
30
112
Figure 84 Image Teaser in Flyout Navigation configuration (admin panel)
When the settings have been made click SAVE on the top section on the right-hand side.31
31
MANAGEMENT
113
2.13. Video Layer
MageSuite allows displaying a Video Layer of a given YouTube Link. The Video Layer will be displayed
when clicking Image Teasers. Following CC components and elements support displaying a Video
Layer:
• CC Image Teaser component (see Image Teaser)

• Image Teasers in CC Products Grid component (see Products Grid)
• Image Teaser in Magento Products grid (see CC Components on product overview pages
& Image Teaser in Product grid)
Figure 85 Video Layer in Product Grid (storefront)
When being in the configuration of the above CC components and elements you will have the
possibility to add an URL link to the button on the Image Teaser area. I.e.
• for Image Teasers in the CC Products grid component you will have the BUTTON LABEL and URL
input fields
• for Image Teasers in the CC Image Teaser component you will have the CTA LABEL and CTA
TARGET LINK input fields
114
• for Image Teasers in the Magento Product grid (Categories) you will have the CTA LABEL and
CTA TARGET LINK input fields
Add the full YouTube Video URL to the URL or CTA TARGET LINK input fields. MageSuite will
recognize based on the domain that you want to add a YouTube Video and so it renders the Video
Layer on the storefront.
Figure 86 Image Teaser configuration in CC Products grid component (admin panel)
When the component has been configured click SAVE on the component configuration page and then
SAVE PAGE on the CMS page configuration or SAVE on the Categories configuration.
115
2.14. CMS Product Backlink
The CMS Product Backlink feature allows referencing CMS Pages on the Product Detail page in case
the product has been linked on the corresponding CMS Page. This is especially useful when having
e.g. “how-to” CMS pages which contain Products (CC Product Carousel or CC Product Grid
components). When accessing the product detail pages the user will have a backlink to the actual
“how-to” CMS page. This feature allows attracting the user’s attention and keeping him within the
shop. In turn this might lead to higher conversions. On the other hand having a more sophisticated
backlink structure on the domain will increase the shop’s SEO performance.
In order to use this feature you firstly have to set it up. Access STORES / SETTINGS /
CONFIGURATION and navigate to MAGESUITE and CMS PRODUCT BACKLINK. Here you have to
enable the feature using the IS ENABLED select field.
Also you can enable UPDATE BACKLINK ON SAVE. If you select "Yes", the CMS Backlinks will appear
right after saving the CMS page. If you select "No", the CMS Backlinks will appear after the cronjobs
processed the change.32
Further you may want to disallow certain pages from the backlink feature, such as the 404 error page.
You can disallow such pages in the EXCLUDED PAGES multi-select field (pages selected here will not
appear as CMS Page links on the product detail pages).
After making the configuration here click SAVE CONFIG in the top section on the right-hand side.
32
For the cronjob configuration access STORES / SETTINGS / CONFIGURATION and navigate to ADVANCED / SYSTEM /
CRON (SCHEDULED TASKS)
116
Figure 87 CMS Product Backlink configuration (admin panel)
Now you can add a Product Backlink component to CMS pages. Access CONTENT / ELEMENTS /
PAGES. Here you can navigate to the CMS Page you would like to add the Product Backlink
component and click EDIT in the ACTION column. Navigate to the CONTENT section and add either a
CC Product grid or CC Product Carousel component using the “+” button. Configure the components
as described in sec. Product Carousel and sec. Products Grid. When done, click SAVE on the
component configuration page and then SAVE PAGE on the CMS Page configuration.
Figure 88 CC Product Carousel configuration (admin panel)
117
Depending on the configuration in the UPDATE BACKLINK ON SAVE field the CMS backlinks should
now be visible on the storefront. No further changes are needed in the product configuration. You can
access the CMS page with the added Product Backlink components (CC Product Carousel or CC
Product Grid components) on the storefront. Click a product and verify on the product detail page. On
the very top section (above the footer section) you should have a “CMS PAGES” section including the
CMS Page Image Teaser (see CMS Page Image Teaser) and CMS Page title, similar as shown on
Figure 89. The location is depending on the styling.
Figure 89 CMS Page Image Teaser on Product detail page (storefront)
118
2.15. Form Builder
MageSuite offers the possibility to build and manage forms using the Plugin Company Contact Forms
extension.33 You can find the full user manual of the extension under following link:
https://plugin.company/knowledge-base/docs/magento2-custom-contact-forms/user-manual/form-
builder/
In the following you will only find a brief introduction to the extension. We recommend to take a look at
the full user manual from the link above to obtain further details.
Figure 90 CMS Page with contact form (storefront)
Before starting to create new contact forms you should take a look on the configuration. Access
CONTENT / CONTACT FORMS / CONFIGURATION. In the GENERAL SETTINGS section you can adjust
33
Here you can find the extension: https://plugin.company/magento2-extensions/custom-contact-forms.html
119
settings for breadcrumbs, URL generation as well as the ReCaptcha keys. In order to configure the
customer notification settings, i.e. e-mail sending to customers, open the DEFAULT CUSTOMER
NOTIFICATION SETTINGS area. Also you should take a look on the configuration of DEFAULT ADMIN
NOTIFICATION SETTINGS and adjust the notifications sent to the admin.
Figure 91 Contact Forms configuration (admin panel)
Now you can start working on new contact forms. Access CONTENT / CONTACT FORMS / MANAGE
FORMS. Here you have an overview of existing contact forms. In order to edit a contact form, click
EDIT in the ACTION column of the form to be edited. In order to create a new form, click ADD NEW
FORM.
120
Figure 92 Managing Contact forms (admin panel)
In order to create a new form you have to complete a couple of steps.
1. Front-end Style: In this section you can actually build the form. You can use the form builder to
insert input, select, dropdown fields via drag & drop.
2. Form Settings:
a. Enter a FORM NAME to display in breadcrumbs and which is also used as the page title
b. Choose if you want to a CREATE FRONT-END URL for the new form
c. Enter the URL KEY
d. Choose if you want to SAVE FORM SUBMISSION in the admin panel
e. In case you want to have a custom prefix for the submission ID (e.g. for RMA
submissions), you can enter it in FORM SUBMISSION ID PREFIX
f. Enable the form using the ENABLED select field
g. You can check the FRONT-END URLS in the field above
3. You can enter CUSTOM JAVASCRIPT in the code input fields
4. You can adjust CUSTOMER NOTIFICATION settings for the given form. These will override the
settings made in the configuration in CONTENT / CONTACT FORMS / CONFIGURATION
5. You can adjust ADMIN NOTIFICATION settings for the given form. These will override the settings
made in the configuration in CONTENT / CONTACT FORMS / CONFIGURATION
6. Select the STORE VIEWS you would like to use the contact form in
7. In case you are editing an existing form, you can check the FORM SUBMISSIONS
When the settings have been made you can click SAVE FORM.
121
Figure 93 Form configuration page (admin panel)
The new form is now saved and can be used on CMS pages. For this you will need the ID of the given
form which can be checked in the corresponding column. Now navigate to CONTENT / ELEMENTS /
PAGES. Here you can either create a new page or insert the contact form in an existing CMS page. In
either case, expand the CONTENT section in the CMS page configuration. Now add an CC Paragraph
component (see
122
Paragraph). Here you can use a widget to include the form created. Use the following widget in the
HTML editor with the ID from the form to be included:
<p>{{widget type="PluginCompany\ContactForms\Block\Form\Widget\View" form_id="ID"

show_form_as="form"}}</p>
When done, click SAVE on the CC Paragraph configuration. Additionally you are required to make
changes in the design configuration of the CMS page. On the CMS configuration page expand the
DESIGN area. In the LAYOUT UPDATE XML input enter embed following code snippet:
<referenceContainer name="content">
<block class="Magento\Contact\Block\ContactForm" name="contactForm"
template="Magento_Contact::form.phtml">
<container name="form.additional.info" label="Form Additional Info"/>
</block>
</referenceContainer>
Figure 94 Updating Layout XML for adding contact forms (admin panel)
Click SAVE PAGE on the CMS Page configuration page. Now you can access the form using the CMS
Page’s URL key you just created or edited.
123
Figure 95 Creating a new form (admin panel)
124
3. Marketing
3.1. Daily Deal
The Daily Deal feature is a simple but yet powerful marketing tool. In contrast to a simple product
discount (catalog price rule) a daily deal promotes a discount
• for a limited amount of products (“15 items left”)

• for a limited amount of time (“limited time offer, 61 days, 0 hours, 53 mins, 42 sec”)
Due to this perception of shortages the user might be incentivized to purchase the product which
increased conversions in turn. Daily Deal products can be promoted throughout the shop. I.e. Daily
Deal products can be used on following CC components and pages:
• Product Detail pages (see Figure 96)

• Product Overview pages – Product tiles (see Figure 97)
• CC Products Grid component – Product tiles (see Products Grid)
• CC Products Carousel component – Product tiles (see Image Teaser 2.0)
• CC Daily Deal Teaser component (see Icon Component)
Figure 96 Daily Deal on product detail page (storefront)
125
Figure 97 Daily Deal Products on Product overview page (storefront)
Before setting Daily Deals for products it is worth checking the basic configuration. Access STORES /
SETTINGS / CONFIGURATION. Now navigate to MAGESUITE and DAILY DEAL. In order to enable the
Daily Deal feature, use the ENABLED select. Also you can choose to apply Daily Deals only for a limited
quantity of products in stock. In order to do so use the USE QTY LIMITATION select. Further you can
select to display Daily Deals on product tiles in the SHOW ON PRODUCT TILE dropdown:
• “None”: There will be no hint on product tiles concerning Daily Deals

• “Compact (as badge)”: There will be a small badge pointing out Daily Deal products (similar to the
“NEW” and “SALE” badge)
• “Full (with countdown”): There will be a prominent overlay on product tiles pointing out Daily Deal
products (see Figure 97)
126
Figure 98 General Daily Deal configuration (admin panel)
After making the basic configuration you can set Daily Deals for products. Access CATALOG /
INVENTORY / PRODUCTS. Select a product in the product overview grid to apply the Daily Deal with
and click it. Now scroll down to the DAILY DEAL section and expand it. Now you need to make
following settings:
1. Enter an OFFER PRICE for the Daily Deal. This price will be displayed prominently which the old
price will be displayed strike-through.
2. In the OFFER FROM date selection choose the date and time the Daily Deal should begin for the
given product.
3. In the OFFER TO date selection choose the date and time the Daily Deal should end for the given
product.
4. In the OFFER LIMIT enter the amount of products you would like to apply the Daily Deal for. E.g. if
the stock quantity is 100 and the OFFER LIMIT is set to 50, only 50 items will be sold as Daily
Deals (during the Daily Deal period set in OFFER FROM and OFFER TO). The OFFER LIMIT is
limited by the stock quantity contained in Magento.
5. In the INITIAL AMOUNT OF PRODUCTS you can set another amount of products that shall be used
as an offer limit. This amount is used on the progress bar on the CC Daily Deal Teaser component
Icon Component
6.
With the Icon Component you can add e.g. your shop USPs on CMS pages, category pages or product
detail pages..
127
Figure 31 Icon Component (storefront)
When setting up the component you firstly have to select a TEASER WIDTH, DESKTOP, TABLET
LAYOUT, MOBILE LAYOUT and the TEXT POSITIONING.
CONTENT WIDTH: The image teaser area is limited by the container width.
MOBILE LAYOUT: On mobile devices only two icons will be displayed. There is a slider functionality
which allows rotation of further icon images.
The TEXT POSITIONING: BELOW IMAGE will display your text underneath icon images.
DESKTOP LAYOUT AND TABLET LAYOUT provides different number of images per row:
The MOBILE LAYOUT is fixed to “SLIDER” and TEXT POSITIONING is fixed to “TEXT BELOW IMAGE”.
In the next step you can add icons the same way as image teasers. By clicking the “+” icon new
images will be added. You may configure your icon images in the CONTENT area. Here following
explorer. If you already have an image, you can remove it using the “bin” icon. If you have more
128
Regardless whether you have chosen an image or not there always will be shown a live preview
directive:
URL are supported).
In the tab STYLE two additional customizations can be made.
3. Choosing TEXT STYLE ‘light’ provides a black box with white font. If ‘dark’ is selected it is the
other way around, providing a black text font on a white background. Both coloring changes are in
each case applied to slogan and description.
horizontally.
129
Figure 32 Setting up an Icon Component (admin panel)
When the changes are done click “SAVE” on the right-hand side in the top area.
130
7. Daily Deal Teaser. You can set the INITIAL AMOUNT OF PRODUCTS equal to OFFER LIMIT.
8. If the Daily Deal is active (you are editing a product during an active Daily Deal time period) the
ENABLED checkbox will be ticked. This is greyed out and you cannot control it.
Figure 99 Daily Deal configuration on Products (admin panel)
When the Daily Deal settings have been made click SAVE on top of the page on the right-hand side. In
case the Daily Deal period has been set to begin now, the Daily Deal should be applied within 5
minutes (the time-period here depends on the cron settings).
131
3.2. Bestseller Products Logic
The Bestseller Products Logic is a powerful sorting logic that allows displaying products according to
their sales performance. You can apply this mechanism in many pages and elements in the shop, e.g.
in the CC Product Carousel component (see Figure 100). The mechanism does periodically calculate
and check the sales performance (“Bestseller Score”) of the shop’s products and arranges them
according to the configuration. Thus, when applying sorting by Bestseller Score the customer will
actually be faced with the current best-selling products.
The sorting logic can be applied in following components and page types:
• CC Products grid component, selected in the ORDER BY dropdown (see Products Grid)
• CC Product Carousel component, selected in the ORDER BY dropdown (see Image Teaser 2.0)
• Category configuration, selected under DISPLAY SETTINGS in the AVAILABLE PRODUCT LISTING
SORT BY select field and the DEFAULT PRODUCT LISTING SORT BY
Figure 100 CC Product Carousel component sorted by "Bestseller Score by Amount" (storefront)
There are three different ways and indicators that define the Bestseller performance (“Bestseller
Score”):
1. Bestseller Score by Amount: The sales performance is calculated based on the amount of items
ordered of a given product within a specific amount of time.
2. Bestseller Score by Turnover: The sales performance is calculated based on the revenue made
with a given product within a specific amount of time. In this case the price and the amount of
items are taken into account.
132
3. Bestseller Score by Sale: The sales performance is calculated based on the amount of orders
placed containing the given product within a specific amount of time. In this case neither price nor
number of items sold are taken into account but the number of customers buying the product.
Figure 101 Sorting configuration on categories (admin panel)
In order to setup the Bestseller calculation logic access STORES / SETTINGS / CONFIGURATION and
navigate to MAGESUITE and BESTSELLER. Here do the following:
In the CRON section you can define the cronjob settings for the time period used to update the
Bestseller calculation in the format min / hour / day / month / year. In the example underneath the
cronjob is running at 23.59 every day, every month and every year. At this point you also need to take
into account the time-zone settings in GENERAL / GENERAL / LOCALE OPTIONS / TIMEZONE.
In the ORDER PERIOD define the period of time to be considered for the Bestseller calculation:
1. All orders: All orders made in the shop are used for the Bestseller calculation.
2. Orders from 7 days: All orders made in the shop within the last 7 days are used for the Bestseller
calculation.
3. Orders from 30 days: All orders made in the shop within the last 30 days are used for the
Bestseller calculation.
4. Orders from 1 year: All orders made in the shop within the last year are used for the Bestseller
calculation.
Next expand the BOOSTING FACTORS section where you can modify the factors used for the
Bestseller calculation. The rationale behind this section is to boost items bought lately and to penalize
items are either bought a longer time ago (e.g. more than 365 days) or that are out of stock.
1. Boosting Factor A: Orders placed within the last 7 days will be multiplied by the factor entered
here (default value is 3)
133
2. Boosting Factor B: Orders placed within the last 30 days will be multiplied by the factor entered
3. Boosting Factor C: Orders placed within the last 365 days will be multiplied by the factor entered
4. Boosting Factor D: Orders placed more than 365 days ago will be multiplied by the factor entered
5. Sold Out Decrease Factor: Items that are currently out of stock will be multiplied by the factor
entered here (default value is 0.5)
In the SORTING section you can choose to invert the Bestseller calculation by selecting DESCENDING
as the SORTING DIRECTION. In such cases the worst performing products will be placed first.
When the settings have been made click SAVE CONFIG. Depending on the time period placed in
ORDERS PERIOD Magento will calculate the Bestsellers. Depending on the settings made in CRON the
cronjob will update the Bestsellers sorting.
134
Figure 102 Bestseller Product Logic configuration (admin paneI)
Now you can also set a specific multiplier per Product. Access CATALOG / INVENTORY / PRODUCTS
and select the product in the Product Overview grid. Scroll down to the BESTSELLERS section. Here
you can inspect the actual Bestseller performance for the given product in following entries:
• BESTSELLER SCORE BY AMOUNT

• BESTSELLER SCORE BY TURNOVER
• BESTSELLER SCORE BY SALE
135
You can also enter here a custom Bestseller Score in order to modify the performance. Please note,
that the custom input here will be overwritten after the next cronjob updating the Bestseller
Performance.34 In the BESTSELLER SCORE MULTIPLIER input you can enter a value in % that will be
used to boost (a number higher than 100) or penalize (a number lower than 100) the given product in
the Bestseller calculation (default value is 100).
Figure 103 Bestseller Score Multiplier in product configuration (admin panel)
Examples
Product 1:
• Total quantity ordered was 20 times the last 7 days / the product was contained in 15 orders
(Boosting Factor A is 3)
• Total quantity ordered 15 times the within the period between 7 and 30 days / the product was
contained in 10 orders (Boosting Factor B is 2)
• has a price of 100€
• has a multiplier of 100
Product 2:
• Total quantity ordered was 5 times the last 7 days / the product was contained in 2 orders
(Boosting Factor A is 3)
• Total quantity ordered was 50 times the within the period between 7 and 30 days / the product
was contained in 40 orders (Boosting Factor B is 2)
• has a price of 50€
• has a multiplier of 120
Bestseller Score by Amount

Product 1: 20*3*100 + 15*2*100 = 9.000
34
Usually every night the cronjob does update Bestsellers. You can modify the cronjob settings in STORES / SETTINGS /
CONFIGURATION -> MAGESUITE -> BESTSELLER -> CRON.
136
Product 2: 5*3*120 + 50*2*120 = 13.800 (Product 2 will be sorted higher than Product 1)
Bestseller Score by Turnover

Product 1: 20*100*3*100 + 15*100*2*100 = 900.000
Product 2: 5*50*3*120 + 50*50*2*120 = 690.000 (Product 2 will be sorted lower than Product 1)
Bestseller Score by Sale

Product 1: 15*3*100 + 10*2*100 = 6.500
Product 2: 2*3*120 + 40*2*120 = 10.320 (Product 2 will be sorted higher than Product 1)
137
3.3. Cart Bonus
The Cart Bonus feature does allow adding products as gifts to the basket. The feature is actually a
cart price rule which can be triggered under certain conditions. On the storefront the user will notice a
progress bar which hints at potential bonus when meeting a subtotal threshold. Due to this
visualization the user may have a higher incentive to add further items to the basket which leads to a
higher basket value in total. In case the subtotal threshold was hit, the items specified will be added to
the basket automatically.
Figure 104 Cart Bonus - threshold not hit (storefront)
Figure 105 Cart Bonus - threshold hit (storefront)
In order to add a Cart Bonus rule access MARKETING / PROMOTIONS / CART PRICE RULES. In the
Cart Price Rules overview grid click ADD NEW RULE on the top section on the right-hand side.
138
Firstly set the settings in the RULE INFORMATION area which is native Magento 2 CE.35 Please note,
that in the in the COUPON dropdown you need to select NO COUPON.
Next go to the CONDITIONS section where you can define the conditions that trigger the actual cart
price rule and add a product gift to the basket. Click on the green “+” to add a condition. Select
“Subtotal incl. tax” as the condition and click the “is” wording where you select “equals or greater than”
in the succeeding dropdown. Finally enter the amount X that should be reached in order to add a
Product Gift to the basket.
Now expand the ACTIONS section where you need to make following settings:
1. APPLY: Here you need to select “ADD A GIFT ONCE” in the dropdown field. In case you want to
apply there rule several times when the criteria in CONDITIONS are met, select ADD A GIFT. This
can be the case when you select an SKU to be included in the basket to trigger the Cart Bonus
rule. Each time you add more quantity of the SKU, the Cart Bonus will be triggered and more
quantity of the Cart Bonus items will be added.
2. GIFT SKUS: Enter the SKU of the item that should be added to the basket as a Cart Bonus. You can
also enter more than one item comma-separated.
3. GIFT SKUS QTYS: Enter here the quantities of the above SKUs that should be added to the basket
as a Cart Bonus.
4. GIFT SKUS DISCOUNTS: Enter the percentage the Cart Bonus should be discounted with. In order
to make the Cart Bonus free, enter “100”. In case you want to give a 50% discount, enter “50”.
5. DISCARD SUBSEQUENT RULES: In case you want apply further Cart Price Rules in combination
with this rule, select NO here. By doing so you can add further steps (Cart Price rules with the
same approach) that will add another items to the basket as Product Gifts.
All other settings in this section should remain unchanged.
Now expand the LABELS section and enter the labels that should be used on the storefront when
displaying the Cart Bonuses.
Finally go to the CART BONUS section and expand it. Tick the IS VISIBLE AS CART BONUS checkbox
in order to display the progress bar as seen on Figure 104 and Figure 105. In case you want to hide the
label of the Cart Bonus rule (set in the LABELS section) set the IS LABEL VISIBLE BY DEFAULT
checkbox to NO. In this case the user will not know which Cart Bonus he will receive until he hits the
subtotal threshold.
Now make sure the Cart Bonus is ACTIVE in the RULE INFORMATION area and click SAVE.
35
Here you can find the official Magento 2 CE user Guide to define Cart Price Rules:
https://docs.magento.com/m2/2.2/ce/user_guide/marketing/price-rules-cart.html
139
Figure 106 Configuring Product Gifts cart price rule (admin panel)
140
3.4. Positive Indicators
Positive Indicators are a great tool to increase conversions. This feature allows to add visualization on
Product Tiles and Product Detail pages that stress and incentivize the customer to make a purchase.
As seen on the screenshot below, you can for example point out that only a limited amount of items
are available (“Hurry up! Only 90 products available!”). Also you can point out that the given product
was recently purchased by other customers (“2 customers bought this product in last 30 days”).
Figure 107 Positive Indicators on Product Detail page (storefront)
The following sub-sections will explain the Positive Indicators in detail.
141
3.4.1. Popular Indicator
The Popular Indicator is a badge which highlights products that the best performing taking into
account a certain attribute in a given category. E.g. you can choose on of the Bestseller Score
attributes (see Bestseller Products Logic) to mark the best-selling items are popular. The Popular
Indicator badge is visible on Product tiles on the Product Overview page as well as on the Product
Detail pages. The Indicator can be controlled per store or per category.
Figure 108 Popular Indicator on the Product Detail Page (storefront)
Firstly set up the Popular Indicator setting in STORES / SETTINGS / CONFIGURATION and navigate to
MAGESUITE and then POSITIVE INDICATORS. Here expand the POPULAR ICON section. In order to
enable the Popular Indicator feature select YES in the ENABLED dropdown. In case you want to mark
the best-selling items as popular, select one of the “Bestseller Score by” attributes (see Bestseller
Products Logic) in the PRODUCT LISTING SORT BY dropdown field. Choose in the PRODUCT LISTING
SORT DIRECTION the option DESCENDING in order to mark the products with the highest attribute
value selected in the previous step. Finally enter in the NUMBER OF PRODUCTS input the amount of
items to have a Popular Indicator badge on the Product Overview page, per Category.
When the settings are done click SAVE CONFIG on the top on the right-hand side. After the cronjob
calculated the items and attribute values, the Popular Icons are given for the specific products.36
36
Usually this happens every night, depending on the cronjob configuration in the code.
142
Figure 109 Popular Indicator configuration (admin panel)
You can also control the Popular Indicator on category level. Access CATALOG / INVENTORY /
CATEGORIES. Click in the category to make the settings in the left category tree and move to the
POSITIVE INDICATORS section. In order to enable the Popular Indicator feature for the given category
(and the Popular Indicator badges on Product tiles) tick the ENABLE POPULAR ICON checkbox.
Depending on the settings made in the previous step in STORES / SETTINGS / CONFIGURATION the X
first items will have the Popular Indicator while X corresponds to the NUMBER OF PRODUCTS input.
Figure 110 Popular Indicator configuration per category (admin panel)
Finally you can verify the products’ performance in terms of the Popular Indicator. Access CATALOG /
INVENTORY / PRODUCTS. Find the product that you want to verify in the Product Overview grid. Click
the product and expand the POSITIVE INDICATORS section. Here you can inspect if the product is
marked as popular by checking the POPULAR ICON checkbox. Also the POPULAR ICON CATEGORIES
gives information in which categories (category IDs) the product is marked as popular.
Figure 111 Popular Indicator configuration per product (admin panel)
143
144
3.4.2. Only X available, buy now
The Limited Quantity Indicator does stress out that a certain product is low in stock. On the Product
Detail Page we can find a hint in the buybox saying “Hurry up! Only X products available!”. Such a
stressing indicator might incentivize the customer to put the given item in the basket since it is low in
stock and it might be not available soon. This in turn has an effect on conversions.
Figure 112 Only X available Indicator on Product Detail page (storefront)
The Limit Quantity Indicator hast to be firstly set up. Access STORES / SETTINGS / CONFIGURATION
and then navigate to MAGESUTE and POSITIVE INDICATORS. Here expand the ONLY X AVAILABLE,
BUX NOW section. Firstly open the ENABLED dropdown and select YES in order to enable the feature.
Now in the QUANTITY input field enter the threshold amount X of items that should display the
indicator on the storefront. If the stock of a given item falls below X, there will be an indicator shown
on the storefront displaying the actual stock of the given product. If the stock of a given item is more
than X, there will be no indicator shown. When the settings are done click SAVE CONFIG on the top
area on the right-hand side.
Figure 113 Only X available indicator configuration (admin panel)
The threshold amount X can also be controlled on category level. Access CATALOG / INVENTORY /
CATEGORIES and select the category from the category tree on the left-hand side. Now expand the
145
POSITIVE INDICATORS section. In the ONLY X AVAILABLE QTY input field enter the threshold amount
X that should trigger the indicator display. The input on category level will overwrite the settings made
in STORES / SETTINGS / CONFIGURATION for the given category. When the settings are done click
SAVE on the top area on the right-hand side.
Figure 114 Only X available Indicator configuration per category (admin panel)
Finally, the threshold amount X can also be controlled on product level. Access CATALOG /
INVENTORY / PRODUCTS, choose a product from the Product Overview grid and choose to EDIT the
item. Now expand the POSITIVE INDICATORS section where you can find the ONLY X AVAILABLE
QTY input field. Here you can enter the threshold amount X that should trigger the indicator display.
The input on product level will overwrite the settings made category level and in STORES / SETTINGS
/ CONFIGURATION the given product.
When the settings are done click SAVE on the top area on the right-hand side. In order to make the
changes visible go to SYSTEM / TOOLS / CACHE MANAGEMENT and click FLUSH MAGENTO CACHE.
Figure 115 Only X available indicator configuration per product (admin panel)
146
3.4.3. Recently Bought Indicator
The Recently Bought Indicator is, similar to the Popular Indicator, a positive stressor which indicates
the popularity of an item. On the Product Detail page the indicators says, that a given amount of
customers purchased the item within a specific amount of time (“10 customers bought this product in
last 30 days”). This indicator for popularity might in turn lead other customers to purchase the given
item which increases conversions.
Figure 116 Recently Bought Indicator on Product Detail page (storefront)
In order to set up the Recently Bought Indicator access STORES / SETTINGS / CONFIGURATION,
navigate to MAGESUITE and the POSITIVE INDICATORS section. Open the ENABLED dropdown and
select YES in order to enable the indicator. Next enter in the ORDER PERIOD input field the time period
that should be considered for this indicator. E.g. if you input is “30”, then the indicator will display the
amount of customers purchasing the item in the last 30 days. In the MINIMAL VALUE input field enter
the minimum amount of products that need to be purchased in order to display the indicator on the
storefront. In combination with the ORDER PERIOD the Recently Bought Indicator will be shown on the
storefront if 1) the MINIMAL VALUE quantity of a given product was purchased and 2) within the time-
period set in ORDER PERIOD. In case one of the two parameters was not reached, the Recently Bought
Indicator will not appear on the storefront.
When the settings are done click SAVE CONFIG on the top area on the right-hand side. In order to
make the changes visible go to SYSTEM / TOOLS / CACHE MANAGEMENT and click FLUSH
MAGENTO CACHE.
147
Figure 117 Recently Bought Indicator configuration (admin panel)
The ORDER PERIOD and MINIMAL VALUE settings can be also controlled per product. Access
CATALOG / INVENTORY / PRODUCTS. Choose the product from the Product Overview grid and click
EDIT. Now expand the POSITIVE INDICATORS section. You can set the RECENTLY BOUGHT: ORDER
PERIOD and RECENTLY BOUGHT: MINIMAL VALUE per product. The settings made here will overwrite
the settings made in STORES / SETTINGS / CONFIGURATION for the given product. The field
RECENTLY BOUGHT: ORDERED SUM is just an information about the amount of purchases for the
product within the time-period set in STORES / SETTINGS / CONFIGURATION or the product.
When the settings are done click SAVE on the top area on the right-hand side. In order to make the
changes visible go to SYSTEM / TOOLS / CACHE MANAGEMENT and click FLUSH MAGENTO CACHE.
Figure 118 Recently Bought Indicator configuration per product (admin panel)
148
3.4.4. Free Shipping Indicator
The Free Shipping Indicator is a simple visualization or message that points out that free shipping will
be applied on a given item. When free shipping is applied for an item the customer will be incentivized
to make a purchase which in turn increases conversions. The Free Shipping Indicator can be used on
following elements:
1. as a text message in the buybox on the Product Detail page

2. as a badge on the product image on the Product Detail page
3. as a badge / label on the product tile (CC Image Teaser 2.0 or CC Products Grid)
4. as a badge in the autosuggest field on the search flyout
Figure 119 Free Shipping Indicator on Product Detail page (storefront)
Before setting up the Free Shipping Indicator make sure that you actually have a shipping method
using free shipping. Access STORES / SETTINGS / CONFIGURATION and navigate to SALES and then
SHIPPING METHODS.37 Now do the following:
1. In order to enable the free shipping method set ENABLED to YES.

2. Enter a TITLE to identify the Free Shipping method during checkout on the storefront.
3. Enter a METHOD NAME to describe this shipping method (used only for the admin panel).
4. Enter the MINIMUM ORDER AMOUNT to trigger free shipping. E.g. if the input is “30”, free shipping
will be applied in case the subtotal amount is more than 30.
5. In the DISPLAYED ERROR MESSAGE input field, type the message to appear if free shipping
becomes unavailable.
37
Under following link you can learn more about setting up shipping methods in Magento 2:
https://docs.magento.com/m2/2.2/ce/user_guide/shipping/shipping.html
149
6. In the SHIP TO APPLICABLE COUNTRIES you can choose the following.
a. “All Allowed Countries”: Customers from all countries specified in STORES / SETTINGS /
CONFIGURATION under GENERAL / GENERAL / COUNTRY OPTIONS can use free
shipping.
b. “Specific Countries”: You can select specific countries from the multi-select field to apply
free shipping.
7. In SHOW METHOD IF NOT APPLICABLE you can choose:
a. “Yes”: the free shipping method will always be shown in the checkout, even if not
applicable (MINIMUM ORDER AMOUNT was not reached).
b. “No”: the free shipping method is shown only if applicable.
8. In the SORT ORDER input field you can enter the priority in displaying the free shipping method in
the checkout (0 = highest, 1 = second highest etc.)
When the above settings are done click SAVE CONFIG. Now the free shipping method can be used to
display the Free Shipping Indicator.
Figure 120 Shipping Method configuration (admin panel)
150
Access STORES / SETTINGS / CONFIGURATION and navigate to MAGESUITE and POSITIVE
INDICATORS. Expand the FREE SHIPPING section. Here you can do the following:
1. Select the DEFAULT SHIPPING METHOD to be used for checking if the free shipping threshold
was hit. In case you choose the free shipping method created above, the MINIMUM ORDER
AMOUNT will be this threshold. You can also choose another shipping method which has a
free shipping threshold (MINIMUM ORDER AMOUNT) set.
2. SHOW IN PRODUCT TILES: if “Yes” is selected, a badge / label on the product tile (Product
Grid, CC Image Teaser 2.0 or CC Products Grid) will appear
3. SHOW TEXT NOTE ON PRODUCT’S DETAILPAGE: if “Yes” is selected, a text message in the
buybox on the Product Detail page will appear.
4. SHOW BADGE ON PRODUCT’S DETAILPAGE: if “Yes” is selected, a badge on the product
image on the Product Detail page will appear.
5. SHOW IN SEARCH AUTOSUGGEST: if “Yes” is selected, a badge in the autosuggest field on
the search flyout will appear.
When the above settings are done click SAVE CONFIG in the top section on the right-hand side. In
order to make the changes visible go to SYSTEM / TOOLS / CACHE MANAGEMENT and click FLUSH
MAGENTO CACHE.
Figure 121 Free Shipping Indicator configuration (admin panel)
151
3.4.5. Fast Shipping indicator
The Fast Shipping Indicator is a helpful visualization to highlight that the given item may be shipped
today in case the customer does place the order within a specific amount of time. This hint is visible
on Product Detail pages inside the buybox (“FAST SHIPPING AVAILABLE. Only if you order until
16:00”). The customer might be incentivized to place the order quickly since he is interested in
receiving the shipment quickly. This in turn increases conversions.
In case the Fast Shipping period passed, the user will get a corresponding hint, e.g. that the shipment
will take place tomorrow.
Figure 122 Fast Shipping Indicator on Product Detail pages (storefront)
In order to set up the Fast Shipping Indicator access STORES / SETTINGS / CONFIGURATION and
navigate to MAGESUITE and POSITIVE INDICATORS. Here expand the FAST SHIPPING section. Set
the ENABLED dropdown to YES in order to enable the Fast Shipping Indicator.
In the WORKING DAYS multi-select field mark the days the Fast Shipping Indicator should be active,
i.e. Fast Shipping will apply (shipping today). On days that are not marked here the user will get a
corresponding message, i.e. that the shipment will take place on Monday.
In the HOLIDAYS input you can enter dates where the fast shipping will not apply (similar to the days
not marked in WORKING DAYS). However, these dates do override the days marked in the WORKING
DAYS multi-select, such as Christmas holidays. All dates (each day) needs to be put in here separately,
comma-separated.
152
In the TIME TO DELIVERY TODAY input field enter the exact time till fast shipping should apply to. E.g.
if the input is “16:00” the user will get the fast shipping message before 16.00. In case the user visits
the Product Detail page later than 16:00, fast shipping will not be applied.38
In the LOGISTICS WORKING HOURS input field enter the amount of hours the logistics department is
fulfilling orders and shipments. This is input needs to be taken into account with the input made in
ORDER QUEUE LENGTH. In case the logistics department has a long queue of orders (e.g. Christmas
time) ORDER QUEUE LENGTH can bet set to “10”. When the WORKING HOURS input is set to “8” at the
given the logistics department firstly needs to fulfill the queue, which is 10 hours. Since the working
hours are only 8 hours, no new order can be shipped at this day and fast shipping will not be applied.
The next day 2 hours left from the previous day. After the remaining queue of 2 hours passed, new
orders can be fulfilled and fast shipping will be applied.
When the settings have been made click SAVE CONFIG on the top section on the right-hand side. In
MAGENTO CACHE.39
Figure 123 Fast Shipping Indicator configuration (admin panel)
38
Please take into account the time-zone set in STORES / SETTINGS / CONFIGURATION in GENERAL / GENERAL / LOCALE
OPTIONS and TIMEZONE
39
Please note that it may take up to 10 minutes to make the changes visible in the storefront.
153
3.4.6. Expected delivery indicator
With the Expected Delivery Indicator the customer gets an information about the estimated shipping
date. It is shown on every Product Detail page within the buybox (“You can get this product on
23.03.2020 (Monday) if you buy it now”) listed beside other indicators mentioned above. Providing the
user with details on the estimated shipping will benefit the conversion.
Figure 124 Expected Delivery Indicator on Product Detail pages (storefront)
If you need to configure your preferences for this feature, please proceed to STORES / SETTINGS /
CONFIGURATION and expand MAGESUITE / POSITIVE INDICATORS. Find EXPECTED DELIVERY
section and enable or disable this feature by choosing one of the dropdown options.
In the DEFAULT SHIPPING TIME text field, integer value can be entered. This value will be used to
calculate the expected delivery date in days, e.g. present date is 18.03.2020 and input is “2”, then the
store front expected delivery date will be shown as “20.03.2020”. The calculation will only apply to
WORKING DAYS meaning that if you haven’t selected “Saturday” and “Sunday” as working days it will
not count into the calculation, e.g. present date is 19.03.2020 (Thursday) and numeric value is “2” then
the expected delivery date will be shown as 24.03.2020 (Tuesday) since only “Friday” and “Monday”
are defined as working days. Please also consider to adjust TIME TO SHIP TODAY settings described
below.
In the WORKING DAYS multi-select field mark the days the Expected Delivery Indicator should be
active, i.e. Expected Delivery will apply.
In the HOLIDAYS input you can enter dates where the expected delivery date will not apply (similar to
the days not marked in WORKING DAYS). However, these dates do override the days marked in the
154
WORKING DAYS multi-select, such as Christmas holidays. All dates (each day) needs to be put in here
separately, comma-separated.
In the TIME TO SHIP TODAY input field enter the exact time which the orders are to be shipped. E.g. if
the input is “16:00” then every ordert until this value will be included in the calculations to an expected
delivery date. E.g. present day is 16.03.2020 and before 16:00 then the delivery expected day will be
calculated as 18.03.2020 in the store front. In case it is 16.03.2020 and after 16:00 then the store front
will show 19.03.2020 instead.40
When the settings have been made click SAVE CONFIG on the top section on the right-hand side. In
MAGENTO CACHE.41
Figure 125 Expected Delivery Indicator configurations (admin panel)
3.5. Social Media Sharing
The social media visibility can be improved by using Open Graph Tags. Open Graph Tags were
introduced by Facebook and allow adding more information of a given page link in their meta tags.
40
Please take into account the time-zone set in STORES / SETTINGS / CONFIGURATION in GENERAL / GENERAL / LOCALE
OPTIONS and TIMEZONE
41
Please note that it may take up to 10 minutes to make the changes visible in the storefront.
155
Thus, Open Graph Tags have a similar function as Google Rich snippets that pass additional
information of products to Google, such as the price, stock etc. The information contained in Open
Graph Tags will be also used when displaying the links on Facebook, e.g. the title or image. Optimizing
Open Graphs will improve the visibility on Facebook in first instance. Since Social Media also impact
the SEO performance, optimizing the shop’s Open Graph Tags will also indirectly improve the SEO
performance.42
Figure 126 Open Graph Tags of a Product Detal Page (source code on storefront)
In order to configure the Open Graph Tag feature in the shop access STORES / SETTINGS /
CONFIGURATION and navigate to MAGESUITE and then FACEBOOK. You can enable the feature by
setting IS ENABLED to “YES” in the dropdown. In the FB:APP ID input field enter the Facebook App ID
that identifies your website to Facebook. In DEFAULT IMAGE you can upload an image that will be
displayed as the default image in the Open Graph Image Tag (“og:title”) in case there is no specific
Open Graph Image Tag set for a link (product, category or CMS page).
Figure 127 Configuration of Open Graph Tags (admin panel)
42
You can find best practices for setting Open Graph Tags here: https://developers.facebook.com/docs/sharing/best-practices
156
You can set Open Graph Tags for products. Access CATALOG / INVENTORY / PRODUCTS and click
“EDIT” in the product entry you want to set the Open Graphs Tags in. Scroll down and expand the
SOCIAL MEDIA area. Here you can do the following:
1. OPEN GRAPH TITLE: You can set an Open Graph Title. In case of not setting any Open Graph Title
the value from the META TITLE will be used (from the SEARCH ENGINE OPTIMIZATION section).
2. OPEN GRAPH DESCRIPTION: You can set an Open Graph Description. In case of not setting any
Open Graph Description the value from the META DESCRIPTION will be used (from the SEARCH
ENGINE OPTIMIZATION section).
3. OPEN GRAPH TYPE: Here you can set the Open Graph Object Type. In case you want to use the
Open Graph Tags for specific pages within the website, select “ARTICLE”. In case of not selecting
any value here the Open Graph Type “product” will be used.
4. PREVIEW: Here you can preview the Open Graph properties.43
When this is done click “SAVE” in the top section on the right-hand side.
43
You can find a full overview of product related Open Graph Tags here:
https://developers.facebook.com/docs/reference/opengraph/object-type/product/
157
Figure 128 Setting Open Graph Tags per product (admin panel)
You can set Open Graph Tags for categories. Access CATALOG / INVENTORY / CATEGORIES and
click the category in the category tree you want to set the Open Graphs Tags in. Scroll down and
expand the SOCIAL MEDIA area. Here you can do the following:
2. OPEN GRAPH IMAGE: You can upload an image to be used in Open Graph Tags. In case of not
uploading any image here, the “IMAGE” from the section IMAGE TEASER will be used.
158
any value here the Open Graph Type “website” will be used.
When this is done click “SAVE” in the top section on the right-hand side.
Figure 129 Setting Open Graph Tags per category (admin panel)
You can set Open Graph Tags for CMS pages. Access CONTENT / ELEMENTS / PAGES and select
“EDIT” in the ACTION column in the page entry you want to set the Open Graph Tags in. Scroll down
and expand the SOCIAL MEDIA area. Here you can do the following:
2. OPEN GRAPH IMAGE: You can upload an image to be used in Open Graph Tags. In case of not
uploading any image here, the “IMAGE” from the section IMAGE TEASER will be used.
44
159
any value here the Open Graph Type “website” will be used.
When this is done click “SAVE PAGE” in the top section on the right-hand side.
Figure 130 Setting Open Graph Tags for CMS pages (admin panel)
45
160
3.6. Recommendation Engine
MageSuite is fully compatible with the Nosto recommendation engine

(https://www.nosto.com/products/product-recommendations/). The approach in MageSuite will use
the product IDs provided by Nosto and display the products in the correct places. However, the
rendering of the recommendation elements (product carousels) will take place on MageSuite side
which makes the storefront independent from Nosto.
You can use the Nosto recommendation engine in order to display product recommendations in the
CC Product Carousels in various placed in the MageSuite shop, such as
• CMS pages, e.g. the homepage

• Product Overview Pages
• Product Detail Pages (both as CC component or up-selling products)
• Basket (cross-selling products)
• Success Page (cross-selling products)
In order to use Nosto in MageSuite you need to fulfill the following requirements:
1. You have an active Nosto account and you subscribed to a plan. The Nosto account is live.
2. You have installed the MageSuite Nosto plugin:
https://gitlab.creativestyle.pl/magesuite/nosto-cc
3. You have made changes in the template that allow using the above plugin to render Nosto
components in the MageSuite templae
4. You have installed and enabled the Nosto extension in the MageSuite shop. The Nosto
extension is connected with you Nosto account
When the above steps have been made you can enable the Nosto product recommendations in the
Nosto hub (https://my.nosto.com/admin/) and the Nosto Dashboard in MageSuite.
161
Figure 131 Nosto Dashboard (admin panel)
162
3.7. Search Engine Optimization
MageSuite does offer some tools that support you in enhancing the shop’s SEO performance and
increase the ranking on the search engine result page. For this you can e.g. add canonical tags,
customize existing URLs and add URL rewrites as well as set Href lang tags.
3.7.1. Canonical URLs
Due to SEO reasons it is recommended to use canonical URL tags for pages that are either accessed
by multiple URLs or that have very similar content (duplicate content). Having pages with duplicate
content will penalize the shop’s SEO performance. Using canonical tags guide Google to the canonical
version of the page and thus the crawl budget will be used more efficiently which in turn improves the
SEO performance. For more details please see the Google recommendation here:
https://support.google.com/webmasters/answer/139066?hl=en
Magento 2 sets canonical tags per default. The default Magento 2 canonical tags exclude the
category path in the URL such as
https://magesuite.io/bags/joust-duffle-bag.html
will have the canonical tags
https://magesuite.io/joust-duffle-bag.html
In the MageSuite you can set canonical tags manually. In order to activate this possibility access
STORES / SETTINGS / CONFIGURATION and navigate to MAGESUITE and SEO. In the CANONICAL
TAG FOR OTHER PAGES dropdown select “YES”.
163
Figure 132 Configuration of Canonical Tags (admin panel)
In order to set canonical tags per product access CATALOG / INVENTORY / PRODUCTS and click
“EDIT” in the product entry you want to set the canonical tags in. Scroll down to SEARCH ENGINE
OPTIMIZATION. In the CANONICAL URL input field you can now enter the URL of the canonical tag to
be used. This URL will replace the native Magento 2 canonical URL. When this is done click “SAVE” in
the top section on the right-hand side.
Figure 133 Setting Canonical Tag per product (admin panel)
164
3.7.2. Custom URL Rewrites
MageSuite gives the possibility to add Custom URL Rewrites. This is especially useful when launching
a new shop on MageSuite and having old URL which were crawled and indexed by search engines.
Using this feature you can e.g. add a redirect new URL to the old URL.
In order to add Custom URL Rewrites access STORES / SETTINGS / CONFIGURATION and navigate to
GENERAL and then WEB. Expand the CUSTOM URL REWRITE section. In the LIST OF REWRITES input
field you can enter the URL rewrites using following structure (one URL rewrite per line):
{original_path}|{target_path}|{status_code}
In the URL structure above following placeholders are used:
• {original_path}: URL of the old link

• {target_path}: URL of the new link which should point to the original path
• {status_code}: Status code for the Custom URL Rewrite, such as „301“ for a permanent redirect or
„302“ for a temporary redirect. Per default a 301 redirect is used here in case this parameter is
empty.
When the URL rewrites are added in the input field click “SAVE CONFIG” in the top section on the right-
hand side.46
Figure 134 Adding Custom URL Rewrites
46
Due to performance issues it is recommended to not use more than 10 URL rewrites.
165
3.7.3. URL Regeneration
Magento 2 automatically generates new URL keys for products in certain cases, e.g. when renaming
the product. In such cases Magento 2 does also generate rewrites automatically. In order to remove
URL rewrites resulting from the old and inappropriate product settings, you can use the MageSuite
URL regeneration feature. You can trigger the URL regeneration on both product and category level.
URL Regeneration on Product level

In order to regenerate URLs on product level access CATALOG / INVENTORY / PRODUCTS. In the
product grid find the products which should where the URL regeneration take place and mark the
checkboxes in the select column on the very left side. Now click the ACTION select and choose
“REGENERATE URLS”. For the selected products both old URL keys should be removed and the new
URL structure should be applied.
Figure 135 URL Regeneration on product level (admin panel)
URL Regeneration on Category level

In order to regenerate URLs on category level access CATALOG / INVENTORY / CATEGORIES. In the
category tree on the left select the category (you can also select the root category for use the URL
regeneration for all the products and categories contained in the root category). In the top section on
the right-hand side click the “ARROW” button next to the REGENERATE URLS button. Here you have
two options:
• “ONLY THIS CATEGORY”: The URLs for this category and the products located in this category will
be regenerated.
• “THIS CATEGORY AND SUBCATEGORIES”: The URLs for this category as well as all its sub-
categories and the products located in the sub-categories will be regenerated.
166
Figure 136 URL Regeneration on Category level (admin panel)
167
3.7.4. Hreflang tags
In MageSuite you can set hreflang tags for language- or region-specific store views. By doing so you
can guide search engines about the different variations of the site and so the search engines points
the user to the most appropriate version (see the official recommendation by Google:
https://support.google.com/webmasters/answer/189077?hl=en).
In order to use hreflang tags access STORES / SETTINGS / CONFIGURATION and then navigate to
MAGESUITE and then SEO. In the HREFLANG TAGS dropdown select “YES” if you want to use hreflang
tags. Based on the store view configuration, MageSuite will automatically generate hreflang tags using
the Magento store view codes as hreflang codes. You can also select a store view which should be
used for the x-default hreflang tag (the store view which should be used for unlocalized users) in the
X-DEFAULT dropdown. When the settings here are made click “SAVE CONFIG” in the top section on
the right-hand side.47
Figure 137 Using hreflang tags (admin panel)
You can also modify the hreflang codes to be used. Access STORES / SETTINGS / ALL STORES. Click
on the store view where you want to edit the hreflang code. In the HREFLANG CODE input field enter
the custom hreflang code you want to use.48
47
See the Google guide for x-default hreflang tags: https://webmasters.googleblog.com/2013/04/x-default-hreflang-for-
international-pages.html
48
See the Google guide for hreflang tags: https://support.google.com/webmasters/answer/189077
168
Figure 138 Setting custom hreflang codes (admin panel)
169
3.7.5. Google Structured Data Tool
MageSuite allows passing your online shop’s information using so-called “structured data”. Google
structured data is a format which is used to provide Google with additional information about the
search entity itself and to classify the page.49 You can pass specific data about a page for e.g. recipes,
organizations, products, restaurants etc. This in turn does help search engines and the users in finding
information about your shop faster which increases the SEO performance.
You can find more information about Google Structured Data under following link:
https://developers.google.com/search/docs/guides/intro-structured-data?hl=en
Figure 139 Google Structured Data on top of the search results
49
MageSuite does support the JSON-LD format, which is also recommended by Google itself
170
In order to enable the Google Structured Data tool access STORES / SETTINGS / CONFIGURATION
and then navigate to MAGESUITE and GOOGLE STRUCTURED DATA.
Figure 140 Google Structured Data configuration in MageSuite – Part 1 (admin panel)
Here you can make following settings:
• BREADCRUMBS: By setting “ENABLED” to “YES” you can add the breadcrumbs path the
information displayed in the Google search.
• ORGANIZATION: Here you can set information about your organization which will be passed to
the Google search.
171
o ENABLED: Set this option to “YES” in order to include information about your organization
in the Google search.
o ORGANIZATION NAME Enter here the name of your organization.
o LOGO URL: Enter here the URL of your organization’s logo.
o DESCRIPTION: Enter here a brief description of your organization’s activities.
o COUNTRY: Enter here the country your organization is located in.
o REGION: Enter here the region your organization is located in.
o POSTAL CODE: Enter here the postal code your organization is located in.
o CITY: Enter here the city your organization is located in.
o SALES: Enter here the phone number of your sales department.
o TECHNICAL SUPPORT Enter here the phone number of your technical support
department.
o CUSTOMER SUPPORT Enter here the phone number of your customer support
department.
• SEARCHBOX: Here you can enable or disable a sitelink searchbox to be displayed in Google
Structured data.
Figure 141 Organization data in Google Structured data
172
Figure 142 Searchbox in Google Structured data
Further you can set information about your social media profiles:
• ENABLED: In case you want to pass URLs to your social media profiles set this option to “YES”.
• FACEBOOK: Enter here the full URL to your facebook profile.
• TWITTER: Enter here the full URL to your twitter profile.
• GOOGLE+: Enter here the full URL to your Google+ profile.
• INSTAGRAM: Enter here the full URL to your Instagram profile.
• YOUTUBE: Enter here the full URL to your youtube profile.
• LINKEDIN: Enter here the full URL to your Linkedin profile.
• MYSPACE: Enter here the full URL to your MySpace profile.
• PINTEREST: Enter here the full URL to your pinterest profile.
• SOUNDCLOUD: Enter here the full URL to your Soundcloud profile.
• TUMBLR: Enter here the full URL to your tumblr profile.
173
Further you can pass additional information about catalog data to Google Structured data:
• CATEGORY:
o ENABLED: Set this option to “YES” if you want to pass information about the category to
Google Structured Data.
• PRODUCT:
o ENABLED: Set this option to “YES” if you want to pass additional information about
categories to Google Structured Data.
o DESCRIPTION: Select here the attribute which shall be used to describe the product in
Google Structured data.
o SHOW RATING: Select “YES” if you can to pass the product review summary to Google
Structured data.
o BRAND: Select here the attribute which shall be used to describe the product’s brand in
Google Structured data.
o MANUFACTURER: Select here the attribute which shall be used to describe the product’s
manufacturer in Google Structured data.
174
When the changes are done click “SAVE CONFIG” in the top-section on the right-hand side. Finally you
are required to flush the cache to make the changes apply on the storefront. Access SYSTEM / TOOLS
/ CACHE MANAGEMENT and click “FLUSH MAGENTO CACHE” in the top section on the right-hand
side.
175
3.7.6. Category meta tag generation
You can use meta tags to give a search engine information about your website. These tags are shown
in the header of an HTML document are not directly visible to the visitor of your website. With the
category meta tag generator there arises a new way to automatically add meta titles and descriptions
to all categories within a few settings and parameters.
Following settings are made globally. If you wish to generate meta tags per category which are based
on selected filter options then please proceed to chapter 3.7.10 Category meta tag generation (based
on filters).
Figure 145 Category Meta Tag Generation (admin panel)
You can modify the settings in the Magento 2 Admin Panel. Navigate to STORES / SETTINGS /
CONFIGURATION. On the left you will find MAGESUITE and its subcategory SEO. Expand CATEGORY
METATAG GENERATION to change your modifications.
• IS ENABLED: Set this option to “YES” if you want to generate meta titles and description from
given patterns below.
176
• META TITLE: In this textfield you can determine your pattern for the meta title. You can also use
directives, such as {{category_name}} (returns the current category name) and
{{filter_values}} (returns applied filter value). The directives will automatically change the meta tag
to applied category and filter value.
• META DESCRIPTION: In this textfield you have the possibility to determine your pattern for the
meta description. You can also use directives, such as {{category_name}} (returns the current
category name) and {{filter_values}} (returns applied filter value). The directives will automatically
change the meta tag to applied category and filter value.
Figure 146 Generated meta tags on the storefront (source view)
When the changes have been made click “SAVE CONFIG” on the upper part on the right-hand side.
177
3.7.7. Facet navigation link-masking
With MageSuite’s Link-Masking you are able to hide certain links for search engine machines. In the
case of filtering, there is a huge amount of filter combinations possible which might be crawled and
indexed by search engines, although being not fully relevant. Link-masking allows to control which
filter values should be followed and crawled by search engines. This allows to use the search engines
crawling budget more efficiently, which in turn improves the SEO performance. Additionally link-
masking allows to change the URL structure by removing parameters from the URL. See the example
below.
URL Example with filtering options: size “M”, color “green” and climate condition “all-weather”
Figure 147 URL without Link-Masking
Same filtering options with enabled link-masking.
Figure 148 URL with Link-Masking
178
In order to configure your Link-Masking options access STORES / SETTINGS / CONFIGURATION and
then collapse MAGESUITE and navigate to SEO. Expand Link masking to show configuration options.
Figure 149 Link-Masking configurations (admin panel)
Following options can be enabled:
• IS ENABLED: Set this option to “YES” if you want to allow that filter links will be masked.
• DEFAULT MASKING STATE: Set this option to “IS MASKED” if you wish to mask all filter links
by default.
• ONLY ONE FILTER DEMASKED: Set this option to “YES” if you wish to de-mask only the first
filter option.
• HIDE FILTER NAMES IN URL: Set this option to “YES” if you wish to only display filter values in
the URL, instead of the filter name (e.g. “domain.com/category?color=blue&size=XS" will be
changed to "domain.com/category/blue/XS").
• OPTION SEPERATOR: This option determines the separator that will be used in the URL.
179
Additionally you can control filters to be masked on category level. Access CATALOG / INVENTORY /
CATEGORIES and select a category from the category tree. Open the section SEARCH ENGINE
OPTIMIZATION where you can find the area SEO LINK MASKING. Here you can enable or disable link
masking per filter.
Figure 150 Link-masking per filter on category level (admin panel)
When the changes are done, click “SAVE” in the upper section on the right-hand side.
180
3.7.8. Noindex and nofollow tags
Search engines crawl through the world wide web and create an index that is then also searchable by
a user. Meta robot tags are so-called control commands for search engine robots, i.e. Google, Bing
and Yahoo, which control the indexing. Using these meta tags you can advise if Google should include
your pages in the Google search index or not. Each of your CMS page, category and product can be
controlled separately or in a bulk adjustment within the Magento 2 admin panel.
Figure 151 Robots Tags CMS page drop down (admin panel)
Access to your CMS page which you wish to change the meta robots tags. To do so navigate to
CONTENT / ELEMENTS / PAGES, edit your desired page and now expand SEARCH ENGINE
OPTIMIZATION tab.
181
Here you will find a drop-down menu with following options:
• INDEX, FOLLOW
o INDEX: Allows search engines that information about this page may be included in the
search index
o FOLLOW: Allows search engine robots to follow all links on this page
• INDEX, NOFOLLOW
o INDEX: Allows search engines that information about this page may be included in the
search index
o NOFOLLOW: The robots of search engines shall not follow any links of this page
• NOINDEX, FOLLOW
o NOINDEX: This page is not allowed to be included in the search index
o FOLLOW: Allows search engine robots to follow all links on this page
• NOINDEX, NOFOLLOW
o NOINDEX: This page is not allowed to be included in the search index
o NOFOLLOW: The robots of search engines shall not follow any links of this page
If you wish to determine more than one URL you can also provide them in the Robots Meta Tags
configurations. In order to do so navigate to STORES / SETTINGS / CONFIGURATIONS and then to
MAGESUITE.
Here you can provide your input using the relative URL path with parameters, e.g.
“en_en/women.html;INDEX_FOLLOW” or “contact-us.html;INDEX_NOFOLLOW”.
Figure 152 Robots Meta Tags URL rules (admin panel)
When your changes are done click “SAVE CONFIG” in the top-section on the right-hand side.
182
In order to control the tags to be masked on category level access CATALOG / INVENTORY /
CATEGORIES and select a category from the category tree. Open the section SEARCH ENGINE
OPTIMIZATION where you can find the area META ROBOTS. Here you can select the tags to be used.
Figure 153 Setting noindex,nofollow meta tags on category level (admin panel)
When the changes are done click “SAVE” in the upper section on the right-hand side.
In order to control the tags to be masked on product level access CATALOG / INVENTORY /
PRODUCTS and select a product from the product grid. Open the section SEARCH ENGINE
OPTIMIZATION where you can find the area META ROBOTS. Here you can select the tags to be used.
183
Figure 154 Setting noindex,nofollow meta tags on product level (admin panel)
When the changes are done click “SAVE” in the upper section on the right-hand side.
184
3.7.9. Product Meta Tag Generator
Product Meta Data are crucial since it is the initial information which a search engine is given. All of
your products now can be automatically given a default Meta Tag and Meta Description within a few
steps of modifications and settings. This new feature works the same way as Category meta tag
generation.
Figure 155 Product Metatag Generation
In order to use this feature, you firstly have to enable it. Access to STORES / SETTINGS /
CONFIGURATION, expand MAGESUITE and navigate to SEO. Using IS ENABLED field in order to setup
Meta Title and Meta Description settings for your products.
These rules will automatically apply to all your products. On product level, the generated meta tags
can be overwritten.
185
In Magento Admin Panel following configurations can be made:
• IS ENABLED: Set this option to “YES” if you want to generate meta titles and description from
given patterns below. If “NO” is selected, entries in the META TITLE and META DESCRIPTION
textfields are not applied.
• META TITLE: In this textfield you can determine your pattern for the meta title. You can also use
directives, such as {{product_name}} (returns the current product name) and
{{filter_values}} (returns applied attribute value). The directives will automatically change the meta
tag to applied product and attribute value.
• META DESCRIPTION: In this textfield you have the possibility to determine your pattern for the
meta description. You can also use directives, such as {{product_name}} (returns the current
product name) and {{attribute_values}} (returns applied attribute value). The directives will
automatically change the meta tag to applied product and attribute value, e.g. “Purchase your T-
Shirts in black”, “Blue Shorts starting from 9 € - buy now!”.
Figure 156 Generated meta tags on the storefront (source view)
186
3.7.10. Category meta tag generation (based on filters)
Within MageSuite’s SEO meta tag generator you are able to create meta tags based on the user’s
selection of filters. It is an extended configuration, global changes can be made in the chapter
Category meta tag generation.
Meta tags can be found in the header of an HTML document and they are not directly visible to your
website’s visitor. However, a SEO meta tag is crucial since they can contain detailed information and
search engines such as Google use meta data from meta tags to understand additional information
about the webpage. They can also use this kind of information for ranking purposes or to display
snippets in search results.
In order to configure your SEO meta tags go to your desired category. In the Magento admin panel
navigate to CATALAG / INVENTORY / CATEGORIES. Open up your tab SEARCH ENGINE
OPTIMIZATION.
Here you will find a table with your defined rules and a button that allows creation of new rules for
your selected category.
Figure 157 SEO meta tag generation (admin panel)
Create a new rule by clicking on CREATE NEW RULE and a new interface will open up.
Here the following settings can be set.
• RULE NAME: Name your rule in this text field.
In following text fields, two directives can be used. To display current category name use
{{category_name}} or {{filter_values}} to display values of selected filters.
• META TITLE: Entries in this field will be adopted to your category’s meta title.
• META DESCRIPTION: Entries in this field will be adopted to your category’s meta description.
• SORT ORDER: In this field you can set your rules priority. Rules are processed in order specified by
sort order field. It is important to take into account that first valid rule found is applied. Other rules
are not processed anymore if some rule was already matched to current filters selection. For
instance, you set your categories’ “sort order” for this rule as “3” and there is another rule set as
“1” then rule “1” will be applied. If no rule with sort order “1” is found, then a rule with sort order “2”
will be applied. The first matched rule will be used, and all other rules are ignored.
187
• STORE VIEW: Within this selector you can choose in which store views the settings above should
be used in.
Figure 158 SEO meta tag rule creation (admin panel)
Underneath your rules you need to determine conditions for each of your specific rule.
Define your conditions which must be met in order to apply your rule. Here are multiple conditions
possible.
If ALL of these conditions are TRUE: When all of following values are met, the rule will be applied.
If ALL of these conditions are FALSE: When all of following values are not met, the rule will be applied.
If ANY of these conditions are TRUE: When any of following values are met, the rule will be applied.
If ANY of these conditions are FALSE: When any of following values are not met, the rule will be
applied.
In the following two basic types of conditions are to be determined.

FILTER IS SELECTED: This will return true when a specified filter has at least one of the below value
selected
FILTER VALUE: This will return true when defined values were selected within your filter.
The figure above demonstrates an example of above rules for certain categories.
If the filter for “size“ is selected and at least one of these sizes (28, 29, 30, 31, 32, 33, 34, 36, 38) are
selected then your rule will be applied and SEO meta tags are accordingly adjusted.
188
Figure 159 SEO meta tag rule conditions (admin panel)
Figure 160 Applied SEO meta tag based on selection (source view)
Once, you are finished with your conditions and settings click „SAVE“ on the upper part on the right-
hand side.
189
4. User Experience
4.1. ElasticSuite
MageSuite is using the ElasticSuite by smilelab50 as merchandising suite and search engine.
ElasticSuite is an open-source software which is highly flexible and can be adjusted to the specifics of
the shop. In the following the most relevant features will be presented. You can find the full
ElasticSuite documentation here: https://github.com/Smile-SA/elasticsuite/wiki
In order to use ElasticSuite in MageSuite it is necessary to firstly configure the ElasticSearch server
configuration and Magento 2 configuration. It is recommended to stick to the official ElasticSuite
documentation:
• ElasticSearch server configuration: https://github.com/Smile-SA/elasticsuite/wiki/ServerConfig-

6.x
• Magento 2 configuration: https://github.com/Smile-SA/elasticsuite/wiki/ModuleInstall
50
https://github.com/Smile-SA/elasticsuite
190
4.1.1. Search Engine
ElasticSuite’s main feature is the search engine which is used e.g. to display search results in the
search flyout on the storefront. Per default MageSuite does display here:
• Search terms that fit the input and search criteria (auto-suggest)
• Products that fit the input and search criteria
• Categories that fit the input and search criteria
• CMS Pages that fit the input and search criteria
Figure 161 Search flyout using ElasticSuite (storefront)
You can find the ElasticSearch search engine configuration under ELASTICSUITE / SEARCH
RELEVANCE. Here you can configure the full-text search settings, spellchecking as well as the phrase
matching. It is recommended to stick to the official ElasticSuite documentation:
https://github.com/Smile-SA/elasticsuite/wiki/FulltextSearchEngineBasicConfiguration
Also you can set up the thesaurus configuration in ELASTICSUITE / THESAURUS. It is recommended
to stick to the official ElasticSuite documentation: https://github.com/Smile-
SA/elasticsuite/wiki/ThesaurusAdministration
After setting up the basic search engine configuration you can make the search configuration per
attribute. Access STORES / ATTRIBUTES / PRODUCTS and click the attribute you want to edit (use in
191
the search). Choose the tab STOREFRONT PROPERTIES and scroll down to the SEARCH
CONFIGURATION section. Here you can do the following:
• “USE IN SEARCH”: If set to “Yes”, the given attribute will be used in compute results in the search
engine.
• “SEARCH WEIGHT”: The weight of the attribute in the search context is set here. If set to “Yes”, in
the full-text search the input which matches values of the given attribute have higher search
relevance.
• “USED IN SPELLCHECK”: If set to “Yes”, ElasticSearch will compute spellchecking for the given
attribute.
• “DISPLAY IN AUTOCOMPLETE”: If set to “Yes”, the attribute will appear in the search flyout.
• “VISIBLE IN ADVANCED SEARCH”: Typically the advanced search page is not contained in
MageSuite. If set to “Yes”, the attribute would appear in the advanced search.
When the changes have been made click “SAVE ATTRIBUTE” in the top section on the right-hand side.
Figure 162 Search configuration per product (admin panel)
With the basic search configuration and the attribute configuration being made you can configure the
auto-complete dropdown itself. Access STORES / SETTING / CONFIGURATION and then navigate to
ELASTICSUITE and then AUTOCOMPLETE. Here you can do the following:
• POPULAR TERM AUTOCOMPLETE: In the input field you can enter the maximum number of
popular search terms (in the storefront as “search terms”) that should appear search flyout.
• PRODUCT AUTOCOMPLETE: In the input field you can enter the maximum number of products (in
the storefront as “products”) that should appear search flyout.
• CMS PAGE AUTOCOMPLETE: In the input field you can enter the maximum number of CMS pages
(in the storefront as “cms page”) that should appear search flyout.
• PRODUCT ATTRIBUTES AUTOCOMPLETE: In the input field you can enter the maximum number
of attributes that should appear search flyout.
192
• CATEGORY AUTOCOMPLETE: In the input field you can enter the maximum number of categories
(in the storefront as “categories”) that should appear search flyout.
When the changes have been made click “SAVE CONFIG” in the top-section on the right-hand side.
Figure 163 ElasticSearch autocomplete configuration (admin panel)
In certain cases the search input is precise and so it leads to only one product hit. In such cases it
enables a one result redirect to the product detail page. In order to do so access STORES / SETTINGS
/ CONFIGURATION and then navigate to ELASTICSUITE and then CATALOG SEARCH. In the
REDIRECT TO PRODUCT PAGE IF ONLY ONE RESULT dropdown select “YES”. After the change click
“SAVE CONFIG” in the top-section on the right-hand side.
193
Figure 164 One result redirect configuration (admin panel)
194
4.1.2. Facet management
ElasticSuite offers high flexibility in displaying attributes on the storefront. Attributes can be e.g. set as
filters (layered navigation) on product overview pages or search result pages. The configuration can
be made both on attribute and category level.
Figure 165 Layered Navigation on product overview page (storefront)
Facet management on attribute level

In order to configure the facet management on attribute level access STORES / ATTRIBUTES /
PRODUCTS and click an attribute you want to edit. Now select the STOREFRONT PROPERTIES tab on
the left and scroll down to the SEARCH CONFIGURATION section. Some configuration here has been
already explained in sec. 4.1.1. Further you can do the following:
195
• USE IN LAYERED NAVIGATION: Here you can enable the attribute to be displayed as a filter on the
product overview page either with result count in brackets (select “FILTERABLE (WITH
RESULTS)”) or without result count (select “FILTERABLE (NO RESULTS)”).
• USE IN SEARCH RESULTS LAYERED NAVIGATION: Here you can enable the attribute to be
displayed as a filter on the search results page.
• FACET COVERAGE RATE: Here you can enter the minimum coverage rate in percent of results by
this attribute. E.g. if you enter “90”, the attribute will appear as a filter only in case at least 90% of
the products contained in the category (or search engine result page) will have a value for this
attribute. If this is not the case, the attribute will not appear as a filter.
• FACET MAX. SIZE: Here you can enter the maximum amount of values to be displayed as filter
options. In case more values (filter options) are available, they will be displayed using the “show
more” button on the storefront.
• FACET SORT ORDER: Here you can select the sort order of filter options by:
o “RESULT COUNT”: The filter option (attribute value) with the most hits is displayed at the
top.
o “ADMIN SORT”: The filter options are ordered according to their values contained in
STORES / ATTRIBUTES / PRODUCTS.
o “NAME”: The filter options are displayed in alphabetical order.
o “RELEVANCE”: The filter options are ordered according to their relevance.
196
Also ElasticSuite allows using a slider functionality as input type for numerical filters, such as
price. In order to use the slider functionality the attribute has to fulfill two requirements (both
can be checked under STORES / ATTRIBUTES / PRODUCTS and then PROPERTIES):
• The attribute’s values are exclusively numbers

• The INPUT TYPE is either “price” or “Text field” with “Decimal Number” as INPUT
VALIDATION FOR STORE OWNER
If this is the case the SLIDER DISPLAY CONFIGURATION will appear in the STOREFRONT
PROPOPERTIES (under STORES / ATTRIBUTES / PRODUCTS and the given attribute).51 Here
you can do the following:
• DISPLAY PATTERN: Here you can enter the display pattern on the storefront where you
need to use “%s” as the placeholder for the actual value. E.g. the input “%s °C” will provide
“15 °C”.
• DISPLAY PRECISION: Here you can enter the number of digits to display for precision,
e.g. “0” will display only integer values.
Figure 166 Slider Display Configuration (admin panel)
After making the changes click “SAVE ATTRIBUTE” in the top section on the right-hand
side.
51
In case you just created a new attribute, you need to click “SAVE AND CONTINUE EDIT” in the top section on the right-hand
side. After the configuration should appear.
197
Figure 167 Slider input on numerical filters (storefront)
Facet management on category level

You can also override the facet management settings made on attribute level when making changes
on category level. Access CATALOG / INVENTORY / CATEGORIES and select a category from the
category tree on the left-hand side. Expand the DISPLAY SETTINGS section and scroll down to LAYER
NAVIGATION FILTERS. Here you can do the following:
• PINNED: You can make a manual order of filter display by checking the checkbox. Now you can
use the drag & drop button on the very left side to change the order by simple drag & drop.
• DISPLAY MODE: Per default “AUTO” is selected and so the display configuration is used from the
facet management configuration made on attribute level. You can also display the attribute
always by selecting “ALWAYS DISPLAYED”. You can disable the display by selecting “ALWAYS
HIDDEN”.
• FACET COVERAGE RATE: Here you can enter the minimum coverage rate in percent of results by
this attribute. E.g. if you enter “90”, the attribute will appear as a filter only in case at least 90% of
the products contained in the category (or search engine result page) will have a value for this
attribute. If this is not the case, the attribute will not appear as a filter.
• FACET MAX. SIZE: Here you can enter the maximum amount of values to be displayed as filter
options. In case more values (filter options) are available, they will be displayed using the “show
more” button on the storefront.
• FACET SORT ORDER: Here you can select the sort order of filter options by:
o “RESULT COUNT”: The filter option (attribute value) with the most hits is displayed at the
top.
o “ADMIN SORT”: The filter options are ordered according to their values contained in
STORES / ATTRIBUTES / PRODUCTS.
o “NAME”: The filter options are displayed in alphabetical order.
o “RELEVANCE”: The filter options are ordered according to their relevance.
198
Figure 168 Facet management per category (admin panel)
When the changes are made click “SAVE” in the top section on the right-hand side.
199
4.1.3. Manual Sorting in Categories & Search result page
Using ElasticSuite you can arrange the order of products contained on the product overview page and
the search result page manually. This is especially useful in case you want to display e.g. bestseller
products or products that you want to get rid of as the first items.
Manual Sorting on product overview pages

In order to perform manual sorting on category level access CATALOG / INVENTORY / CATEGORIES
and select a category from the category tree on the left-hand side. Now expand the PRODUCTS IN
CATEGORY section. Here you can do the following:
• SEARCH: You can add products to the category manually. In the product grid search for the
product (e.g. by SKU or Name) and mark the checkbox on the very left side.
• MANUAL SORT: In the PRODUCT LIST PREVIEW AND SORTING check the “AUTOMATIC SORT”
checkbox on the product items below. The checkbox name will be now changed to “MANUAL
SORT”. Using the drag & drop button on the top left corner of the product item you can use the
drag & drop approach to perform manual sorting.
• HIDE PRODUCT: In the PRODUCT LIST PREVIEW AND SORTING check the “HIDE” button on the
product items below (top right corner). The product is now hidden in the given category.
200
Figure 169 Manual sorting on product overview page (admin panel)
When the changes have been made click “SAVE” in the top section on the right-hand side.
Manual Sorting on search result pages

In order to perform manual sorting on the search result page access REPORTS / MARKETING /
SEARCH TERMS. Every search term shown here has a potential search result page whose result
display you can modify. Click a search term and click “MERCHANDISER” on the succeeding page.
Here you can do the following:
• MANUAL SORT: Check the “AUTOMATIC SORT” checkbox on the product items below. The
checkbox name will be now changed to “MANUAL SORT”. Using the drag & drop button on the top
left corner of the product item you can use the drag & drop approach to perform manual sorting.
• HIDE PRODUCT: Check the “HIDE” button on the product items below (top right corner). The
product is now hidden in the given category.
201
Figure 170 Manual sorting on search result page (admin panel)
202
4.1.4. Search Optimizers
In ElasticSuite you can use Search Optimizers in order to boost the product ranking on product
overview pages and search result pages. When matching certain criteria, the given products will be
boosted (or penalized) on the display.
In order to do so access ELASTICSUITE / OPTIMIZERS and click “ADD NEW OPTIMIZER” in the top
section on the right-hand side (you can also edit existing Optimizers by clicking “EDIT” in the “ACTION”
column). Firstly you need to do the following:
• ENABLE OPTIMIZER: Tick the checkbox in order to enable the Optimizer.

• STORE VIEW: In this dropdown field you can select the store view where the Optimizer should be
applied in. You can use the given Optimizer only in one store view.
• MODEL: You can ignore this field as “CONSTANT” is the only available option. In future further
options can be used.
• OPTIMIZER NAME: Enter a name for the Optimizer for internal purposes.
• ACTIVE FROM & ACTIVE TO: Here you can enter the time-period where the Optimizer should be
active in.
• REQUEST TYPE: Select the request type in which the Optimizer should apply in. If you choose both
“CATALOG PRODUCT SEARCH” and “CATEGORY PRODUCT VIEW” the Optimizer will apply on
product overview pages and search result pages.
If you selected “CATALOG PRODUCT SEARCH” as the REQUEST TYPE, you can specify a subset of
search terms that should consider the Optimizer. In the CATALOG PRODUCT SEARCH section you can
add the search terms.
If you selected “CATEGORY PRODUCT VIEW” as the REQUEST TYPE, you can specify a subset of
categories that should consider the Optimizer. In the CATEGORY PRODUCT VIEW section you can add
the categories.
In the CONFIGURATION section you need to enter a BOOST VALUE (%) in the input field. The boost
value will apply to products matched by this optimizer. Valid values are between -99 and 10 000.
In the APPLY TO PRODUCTS section you need to specify the conditions for the given Optimizers. The
above boost value will apply only for products that match the conditions set here.
In the PREVIEW section you can test the Optimizer. Firstly choose the REQUEST TYPE (either
CATALOG PRODUCT VIEW or CATALOG PRODUCT SEARCH). Enter a QUERY TEXT (search term) and
click the “PREVIEW” button.
203
Figure 171 Setting Search Optimizers (admin panel)
When the changes have been made click “SAVE” in the top section on the right-hand side.
204
4.1.5. Virtual Categories
ElasticSuite allows to create Virtual Categories. Virtual Categories contain products that are added
based on certain rules set and so Virtual Categories are computed dynamically. You can use this
feature e.g. for a dedicated category for bestseller products or new products which are displayed
automatically.
In order to set up a Virtual Category access CATALOG / INVENTORY / CATEGORIES and click “ADD
SUBCATEGORY” above the category tree on the left-hand side. If you are using a multi-store setup
firstly make sure that you have chosen a specific store in the STORE VIEW switcher (using Virtual
Categories in the ”ALL STORE VIEWS” mode will lead to errors in computing products for the Virtual
Category). Fill out all the standard settings. After this is done, scroll down to the PRODUCTS IN
CATEGORY section and expand it. Now you can do the following:
• VIRTUAL CATEGORY: Tick the checkbox to enable the Virtual Category feature. If the checkbox is
unticked (“NO”) the products from the manual selection are contained in the category.
• VIRTUAL CATEGORY ROOT: Here you can select the category to compute the products based on.
Select the “Default” category in case you want to potentially add all products contained in the
store’s root category. Also the filter configuration will be used based on this root category.
• VIRTUAL RULE: Here you can set the rules that compute the products to be contained in the
Virtual Category. Please note that you can only use product attributes that were configured as
filterable (STORES / ATTRIBUTES / PRODUCTS / STOREFRONT PROPERTIES / SEARCH
CONFIGURATION and then set USE IN LAYERED NAVIGATION to “YES”).
Figure 172 Setting up Virtual Category (admin panel)
205
When the changes are made click “SAVE” in the top section on the right-hand side.
206
4.2. Simple Bundle Products
The Simple Bundle Products feature an option added to the configuration of Magento 2 Bundle
Products. The feature allows to create a Bundle Product with only one option per bundle item
contained within the product. Thus, the customer does not have the possibility to customize the
bundle in the case of Simple Bundle Products. In case the customer does not have to make any
selections on the storefront there is a higher probability of adding the actual Bundle Product to the
cart and complete the checkout which has a positive impact on conversions.
Figure 173 Simple Bundle Product's Product Detail Page (storefront)
In order to set up a Simple Bundle Product access CATALOG / INVENTORY / PRODUCTS and click the
small ARROW DOWN icon next to ADD PRODUCT and select BUNDLE PRODUCT. Now create a usual
Bundle Product.52 When doing so you need to take following points into account:
52
Here you can find the official Magento 2 user guide how to create Bundle Products:
https://docs.magento.com/m2/2.2/ce/user_guide/catalog/product-create-bundle.html
207
• Under ADVANCED PRICING it is recommended to select “AS LOW AS” in the PRICE VIEW. Having
this selection you actually display only one price on the Product Detail page on the storefront
instead of a price range. Since the customer will be given no options to customize displaying a
price range might confuse him.
• When creating the Simple Bundle product it is essential to check if you want to use DYNAMIC
PRICE. Once the checkbox is ticked (or unticked) it is not possible to edit this setting after saving
the product. In case you selected dynamic prices (YES) the prices of the given Simple Bundle
Product change dynamically according to the prices of the attached simple products. If you
deselected dynamic prices (NO) you can control the price of the given Simple Bundle Product
manually. This is especially helpful when setting up discounts for the Simple Bundle Product
under ADVANCED PRICING.
• Under the BUNDLE ITEMS section be sure to include only one item per option. Also set this item to
IS DEFAULT and enter a DEFAULT QUANTITY for the item that should actually be added to the
cart when add the Simple Bundle to the cart. Since the customer should not have any options to
customize the Simple Bundle Product, adding more options per bundle item makes no sense.
When the settings have been done tick the SIMPLIFIED BUNDLE PRODUCT checkbox and click SAVE
on the top section on the right-hand side.
Figure 174 Creating a Simple Bundle Product (admin panel)
208
4.3. Product Variants
The MageSuite allows to offer Product Variants in the shop. Product Variants are similar to
configurable products as they show variations of a given product. However, there are some crucial
differences:
• All Product Variants are located on the same hierarchy level. Unlike configurable products are is
no mother (configurable product type) and child (simple product attached to configurable
product) relation.
• All Product Variants are stand-alone simple products and so they are all displayed on the Product
Overview Page per default. In the case of configurable products only the configurable product
itself is displayed on the Product Overview Page.
• Product Variant products do not have any attribute to be configured. Instead there is only a variant
switcher that allows switching to the related simple product. In case of configurable products the
configurable product (mother) displays certain configurable attributes such as size or color.
Selecting the proper configuration (or variation) will lead to the simple product (child) attached to
the configurable product.
Figure 175 Product Variants on Product Detail Page (storefront)
209
Figure 176 Configurable Product on Product Detail Page (storefront)
In order to set up Product Variants firstly access STORES / SETTING / CONFIGURATION and then
navigate to MAGESUITE and then PRODUCT VARIANTS. In order to enable the Product Variant feature
set the ENABLED dropdown to “YES”. Now enter the attribute code that you want to use for controlling
the Product Variant group in the ATTRIBUTE CODE input field. The default attribute code is
“article_group_id”. In case you want to use another attribute, make sure you enter the correct attribute
code from STORES / ATTRIBUTES / PRODUCT. Finally you can choose the pattern for displaying the
Product Variant name in the Variant switcher on the Product Detail Page:
1. FULL NAME: The full product name of the given Product Variant will be displayed in the Variant
switcher.
2. REMOVE PREFIX: In this case the Variant switcher will contain only the latest strings of the
product name that are differentiating. For example:
a. “Crown Backpack 20L” will be named “20L” in the Variant switcher
b. “Crown Backpack 30L” will be named “30L” in the Variant switcher
3. REMOVE SUFFIX: In this case the Variant switcher will contain only the first strings of the product
name that are differentiating. For example:
a. “35mA battery” will be named “35mA” in the Variant switcher
b. “40mA battery” will be named “40mA” in the Variant switcher
4. REMOVE PREFIX AND SUFFIX: The backend will take both removing suffix and removing prefix
under consideration and will calculate the largest common counter.
210
Figure 177 Product Variant Configuration (admin panel)
Now you can put simple products to Product Variant groups. Access CATALOG / INVENTORY /
PRODUCTS and click EDIT in the product entry to be put into a group. In the ARTICLE GROUP ID input
field (in case you have chosen another ATTRIBUTE CODE in the preceding configuration, another
attribute name will be displayed here) enter an alphanumerical value to define the Product Variant
group you want to put the given simple product in. Now click SAVE on the top area on the right-hand
side. Perform this action for all simple products that you want to put in the Product Variant group.53
Based on the input made here the backend will automatically calculate which simple products to
group. All the simple products grouped here will be displayed as Product Variants in the Product
Variant switcher on the Product Detail Page.
Figure 178 Grouping simple products into a Product Variant group (admin panel)
53
Note: You can also put simple products into Product Variant groups in the Product Grid view via mass action.
211
4.4. Back-In-Stock Subscriptions
With the Back-In-Stock subscription, customers are automatically informed by e-mail as soon as the
goods are back in stock. This allows you to keep your customers up to date in terms of the stock
availability.
Figure 179 Back-In-Stock subscription (storefront)
In order to activate the Back-In-Stock Subscription access to STORES / SETTING / CONFIGURATION

and then navigate to MAGESUITE and BACK IN STOCK SUBSCRIPTIONS. In the “ENABLED” dropdown
select “YES” to enable Back-In-Stock functionality. With its activation an opt-in field can be found on
every product detail page.
In each respective dropdown menu different settings can be selected:

• EMAIL SENDER: Here you can select the e-mail contact in Magento 2 that should be the sender e-
mail adress.
• CONFIRMATION EMAIL TEMPLATE: Here you choose which e-mail template will be sent to each
customer after sign-up.
• AUTOMATIC NOTIFICATION EMAIL TEMPLATE: Here you can select which e-mail template is
automatically sent as soon as the subscribed product is back in stock.
• MANUAL NOTIFICATION EMAIL TEMPLATE: Here you can select the e-mail that should be used
for manual notificaitons.
• CRON SETTINGS: Here you can define the timing of the cronjobs sending e-mail notifications.
212
When the setting have been made, click “SAVE CONFIG” on the right-hand side in the top area.
Figure 180 Back-In-Stock Configuration (admin panel)
213
4.5. DHL Packstation shipping 2.0
While the previous MageSuite version used an external extension, the new MageSuite release uses a
native Packstation feature. You have the advantage of offering your customers the option of shipping
to a DHL packstation and your customers can pick up their orders at packstations beyond usual
business hours. Having an additional shipping method increases flexibility in the checkout for the user
and so there will be a positive impact on the conversion rate.
Figure 181 Shipping methods with Packstation (store front)
Figure 182 Shipping method Packstation (store front)
214
When reaching the first step of the checkout process you can select your preferred shipping method
(See Figure 181).
When selecting Packstation as the desired shipping method, the input fields change appropriately and
the relevant input fields are loaded (see Figure 182). Clicking on SELECT PACKSTATION opens up a
new highlight box in which you can search for your packstation by postcode (see Figure 183). The
address of the given packstation is being used as the shipping address for magento. Also, the user
has to provide is DHL Postnumber, which is comparable to a customer ID for DHL.
Figure 183 Packstation selection (store front)
If you want to access to Packstation DHL configuration, please navigate to STORES / SETTINGS /
CONFIGURATION. Expand SALES on the left-hand side and find SHIPPING METHODS. Unfold
PACKSTATION DHL in order to adjust your settings.
• Enable or disable this feature by choosing the dropdown ENABLE.

• Your value inserted in METHOD NAME will be displayed in the store front (see Figures above).
• Your TITLE can be entered to describe the shipping method, e.g. “Packstation”.
• In the dropdown field MODE you have to select between Sandbox and Live.
i. In the Sandbox mode you can test the process and workflow without disrupting
the underlying live system. It is an isolated area and therefore executed orders will
not forwarded to the actual system environment.
215
ii. In Live mode all orders will be executed to the actual live system. We advice you
to take cautious and test your system in Sandbox mode thoroughly before using
Live mode.
• API LOGIN is required to activate Packstation Shipping. Find your Application ID in your DHL
settings panel. In case you want to use Sandbox mode provide your Developer ID.
• API PASSWORD is required to verify either your Application ID or your Developer ID.
• In the PRICE text field you can define extra costs if Packstation is selected.
• MINIMUM SUBTOTAL FOR FREE SHIPPING. Here you can to set a threshold which is required for
free shipping.
• In this input field an upper limit can be specified. If the MAXIMUM SUBTOTAL is reached then no
Packstation shipping is available for this order.
• Also a MAXIMUM WEIGHT value can be entered. A given weight above your threshold will disallow
Packstation shipping.
• In the SORT ORDER input field you can enter the priority in displaying the free shipping method in
the checkout (0 = highest, 1 = second highest etc.)
• In the dropdown field TYPE you can choose between following settings:
i. Per Order: The selected shipping method is applied to the entire order.
ii. Per Item: The selected shipping method can be applied to several items within the
order separately.
7. SHIP TO APPLICABLE COUNTRIES allows you to specify which countries this shipping method
can make use of.
i. All Allowed Countries: No exceptions are made and every shipping country can be
selected for Packstation as shipping method (defined in GENERAL / GENERAL /
COUNTRY OPTIONS).
ii. Specific Countries: Selecting this option enables SHIP TO SPECIFIC COUNTRIES
multi-selection field. In the multi-selection you can select countries which this
shipping method should be applied to.
8. In SHOW METHOD IF NOT APPLICABLE you can select “Yes”. In this case shipping method
Packstation is always visible. Choosing “No” in the dropdown field hides this specific shopping
method in case the method cannot by applied in the checkout process.
9. In the DISPLAYED ERROR MESSAGE input field, type the message to appear if Packstation
shipping becomes unavailable.
216
Figure 184 Packstation DHL configurations (admin panel)
When your settings have been made click SAVE” in the top section on the right-hand side.
217
4.6. Pagination Input
In MageSuite you can change the default Magento 2 pagination to an input field. This allows to
browse through catalog pages faster as the user does not have to click through page by page.
Figure 185 Pagination input field on Product overview page (storefront)
In order to change the pagination input access STORES / SETTINGS / CONFIGURATION and navigate
to MAGESUITE and PAGINATION. In the USE INPUT SWITCHER input field you can enter the controller
expression of the pagination class. To find out the pagination go to the storefront and navigate to the
page with the pagination and use the inspect function of your web browser (in chrome use right click
and then “inspect”). This class needs to be put in the input field in the admin panel in following format:
{module}_{controller}_{action}
218
Figure 186 Configuring pagination input (admin panel)
When the changes are made click “SAVE CONFIG” in the top-section on the right-hand side.54
54
In order to apply the changes you need to flush the cache in SYSTEM / TOOLS / CACHE MANAGEMENT
219
4.7. Navigation
4.7.1. All Categories Navigation Flyout
MageSuite grants the store owner the possibility to include all the shop categories within an “ALL
CATEGORIES” navigation item. Here all enabled categories form the root category will be displayed.
The All Categories Navigation Flyout is typically used in cases where the shop contains a lot of first
level categories which would not fit in the main navigation bar. The main navigation bar in such cases
features the highlight categories.
Usually the very left column of the All Categories Navigation Flyout features the first level categories.
Depending on the cursor location, the column in the mid section will feature the second level and, if
enabled, third level categories of the corresponding first level category (cursor location). The Image
Teaser contained in the very right column depends on the first level category settings.
Figure 187 All Categories Navigation Flyout (storefront)
In order to enable the All Categories Navigation Flyout access STORES / SETTINGS /
CONFIGURATION and then proceed to MAGESUITE and then NAVIGATION. In the ENABLED select
field select “YES” to enable the feature. In the ALL CATEGORIES LABEL input field enter the text to be
displayed on the All Categories Navigation Item. In the MAXIMUM 3RD LEVEL CATEGORIES input field
enter the number of third level category navigation items to be displayed below the second level
categories. In case the actual amount of third level categories exceeds the input made here, a “more…”
button will be displayed.
220
Figure 188 All Categories Navigation Flyout configuration (admin panel)
When the changes are done click “SAVE CONFIG” in the top-section on the right-hand side.55
Per default all first level categories are displayed in the main navigation bar. In order to disable first
level categories from the main navigation bar access CATALOG / INVENTORY / CATEGORIES and
click the first level category on the category tree. Now in the INCLUDE IN MAIN BAR checkbox select
“NO”. When the changes are done click “SAVE” in the top-section on the right-hand side.
55
MANAGEMENT
221
Figure 189 Excluding first level categories from main navigation bar (admin panel)
222
4.7.2. Disable Categories for mobile and desktop devices
In MageSuite you can display certain categories only on mobile or desktop devices.
In order to disable categories from the navigation bar access CATALOG / INVENTORY / CATEGORIES
and click the category on the category tree. Now in the INCLUDE IN MOBILE NAVIGATION checkbox
select “NO” if you can to disable the category from the navigation on mobile devices. When the
changes are done click “SAVE” in the top-section on the right-hand side.
In order to disable categories from the navigation bar access CATALOG / INVENTORY / CATEGORIES
and click the category on the category tree. Now in the INCLUDE IN DESKTOP NAVIGATION checkbox
select “NO” if you can to disable the category from the navigation on desktop devices. When the
changes are done click “SAVE” in the top-section on the right-hand side. 56
Figure 190 Excluding categories from navigation bar on desktop and mobile devices (admin panel)
56
MANAGEMENT
223
4.7.3. Featured Products in Navigation Flyout
In MageSuite you can promote Featured Products in the Navigation Flyout. By doing so you can give
your customers a teaser of the products contained in the category and attract them to enter the given
category.
Figure 191 Featured Products in Navigation Flyout (storefront)
In order to set up Featured Products in the Navigation Flyout enter CATALOG / INVENTORY /
CATEGORIES and select the category from the category tree on the left-hand side. Scroll down and
expand the FEATURED PRODUCTS section. Here you can add a HEADER title in the input field which
represents a test field above the Featured Products. Next you can search for products using the filter
function in the product grid below. You can add product to the navigation flyout by ticking the
checkbox in the selection column on the very left in the product grid.
224
When the changes are done click “SAVE” in the top-section on the right-hand side. Please note, that
this works only for the first level categories. 57
Figure 192 Setting up Featured Products in Navigation Flyout (admin panel)
57
MANAGEMENT
225
4.8. Filtering
4.8.1. Search box in filters
MageSuite allows to include a search box for filter attributes in case of many available filter options.
Figure 193 Search box for filter attribtues (storefront)
In order to configure the search box for filter attributes access STORES / ATTRIBUTES / PRODUCT
and select the product attributes from the list. Now select “STOREFRONT PROPERTIES” tab on the
left-hand side. In the DISPLAY SEARCH BOX select field choose “YES” in case you want to display
both the search box and the “show more button” on the storefront in case there are more filter options
available than defined in Facet max. size setting.
Figure 194 Configuring search box display on filter attributes (admin panel)
When the changes are done click “SAVE ATTRIBUTE” on the top section on the right-hand side. 58
58
MANAGEMENT
226
4.8.2. Slider configuration on price filters
MageSuite allows switching the input type for price filter attributes on the storefront. There are three
options available how to display price filter attributes:
• Slider with input

• Input only
• Slider only
Figure 195 Slider with input (storefront)
Figure 196 Input only (storefront)
Figure 197 Slider only (storefront)
In order to configure the input display for price filter attributes access STORES / ATTRIBUTES /
PRODUCT. Now either click on an existing attribute or create a new one. However, make sure that the
CATALOG INPUTE TYPE FOR STORE OWNER is set to PRICE. Then click the STOREFRONT
PROPERTIES tab on the left-hand side. Scroll down to the SLIDER DISPLAY CONFIGURATION where
you can select the DISPLAY MODE to one of the above options.
227
Figure 198 Price input configuration (admin panel)
When this is done, click “SAVE ATTRIBUTE”. 59
59
MANAGEMENT
228
4.9. Guest Wishlist
The default Magento functionality allows only logged-in users to add products to their wish list.
MageSuite offers a built-in possibility to provide a wish list functionality for guest users. This feature
increases UX for guest users and since the wish list will persist until they return, the conversion rate
will also benefit.
Figure 199 Guest wish list (store front)
In order to configure the guest wishlist navigate to STORES / SETTINGS / CONFIGURATION. Expand
MAGESUITE on the left-hand side and find GUEST WISHLIST.
Here you can specify the cookie lifetime by adjust your value in the specific textfield GUEST WISHLIST
COOKIE LIFETIME (minutes).
Figure 200 Guest wish list configuration (admin panel)
The functionality of a guest wish list remains similar to a user logged in.
You can find the official user guide to Magento’s default wish list here:
https://docs.magento.com/m2/ce/user_guide/wishlist
https://docs.magento.com/m2/ce/user_guide/marketing/wishlist/configurations
229
4.10. Progressive Web App Features
The integrated PWA (Progressive Web App) feature allows you to give your customers the usability of
a shopping experience and having all benefits of using a native app, but without installing an app. PWA
following the set of guidelines and suggestions to be reliable, fast, and engaging.
This is why the PWA is often described as a combination of a responsive website and an app. PWAs
do not have to be installed on smartphones or tablets, i.e. the operators are independent of app stores
and fees.
In order to configure the PWA features, navigate to STORES / SETTINGS / CONFIGURATION. Expand
MAGESUITE on the left-hand side and find PWA.
Figure 201 Progressive Web App (admin panel)
230
4.10.1. Add to homescreen
By using this PWA feature you offer your customers the option to add your app to the home screen of
their device. You have to provide basic information about your app like name, icon or display. You can
decide if the user can open the app from home screen in full screen mode or if it should be opened in
browser.
Figure 202 Progressive Web App (general settings)
• NAME: Here you can enter the name you want to show below the icon on the start screen
• SHORT NAME: Here you can enter the name you want to show on the home screen or overview of
applications
• DESCRIPTION: Here you can enter a short description for the customer what this app is about
• START URL: Here you can decide which landing page should be entered by customer, when using
the application. This tells the browser where your application should start when it is launched
Figure 203 Progressive Web Apps (on home screen)
231
4.10.2. Offline CMS page
By providing the PWA, you enable your users to visit your site without an internet connection. The
default browser caching can be overridden with custom rules, which is independent of the remote
server.
If the user’s connection got lost, browsing will still remain. For example, you can check previously
visited pages, which will be displayed as a cached page. (no 404 error) Check out is still possible in
offline mode, but the order would be processed after connection is restored.
You can easily select the offline page URL (content page) in admin panel, which should be loaded
when customer opens up the app.
Figure 204 Progressive Web App (offline page URL)
• OFFLINE PAGE URL: Here you can decide which landing page should be entered by customer,
when using the application when device is set to offline mode
• DISPLAY MODE: Here you can select the mode of displaying of the application. For more
information and a detailed description use https://web.dev/add-manifest/#display
• BACKGROUND COLOR: Here you can set the color which is used on the splash screen when the
application is first launched on mobile.
• THEME COLOR: Here you can set the color of the tool bar and may be reflected in the app's
preview in task switchers. It should match the meta theme color specified in your document head.
• DEBUG MODE ENABLED: Here you can enable/disable the option to have the service workers
function.
232
4.10.3. Shipment push notification
Push notifications are possible to be used. The current push notifications which are supported for
order status changes (order shipped) and back in stock notifications for simple products.
With successful order the customer will be able to ‘enable’ the push notifications on the order success
page. With enabling the push notifications and the browser will ask for permission. This has to be
confirmed by customer, to receive notifications.
Figure 205 Push notifications on order success page
With confirmation of browser query the customer will see a new label, which will be visible on the
same page.
233
Figure 206 confirmed push notifications on order success page
From now on the customer will receive push notifications for order status changes (order shipped)
and back in stock notifications for simple products. This will be displayed on the right side in his
browser.
Figure 207 Push notification on browser level
234
5. Administration
5.1. E-Mail Tester
MageSuite does offer the possibility to generate e-mail previews with actual data. Using this feature
you can e.g. preview order confirmation mails with actual data. For this the Yireo E-Mail Tester
extension is the preferred extension (https://www.yireo.com/software/magento-
extensions/emailtester2). In order to use this extension you firstly need to purchase a license and
install it.60
You can configure the extension under STORES / SETTINGS / CONFIGURATION and then navigate to
ADVANCED and YIREO EMAILTESTER. Now you can do the following:
• DEFAULT EMAIL TARGET: Here you can enter a default e-mail address that should be used for
generating the e-mail preview.
• DEFAULT TRANSACTIONAL EMAIL: Here you can select a default e-mail template that should be
used for generating the e-mail preview.
• DEFAULT PRODUCT: Here you can enter a default SKU that should be used for generating the e-
mail preview.
• DEFAULT CUSTOMER: Here you can enter a default customer ID that should be used for
generating the e-mail preview.
• DEFAULT SALES ORDER: Here you can enter a default order ID that should be used for generating
the e-mail preview.
• LIMIT PRODUCT LIST: Here you can enter an integer that will set limit for the amount of products
that can be used for the e-mail preview.
• LIMIT CUSTOMER LIST: Here you can enter an integer that will set limit for the amount of
customers that can be used for the e-mail preview.
• LIMIT SALES ORDER LIST: Here you can enter an integer that will set limit for the amount of
orders that can be used for the e-mail preview.
• CUSTOM PRODUCT LIST: Here you can enter SKUs (comma separated) that will be used for the e-
mail preview.
• CUSTOM CUSTOMER LIST: Here you can enter customer IDs (comma separated) that will be used
for the e-mail preview.
• CUSTOM SALES ORDER LIST: Here you can enter order IDs (comma separated) that will be used
for the e-mail preview.
• ENABLE JQUERY UI: Here you can disable jQuery UI in case it is already loaded.
• DEBUG: Here you can enable the debug mode.
60
See here the installation guide: https://www.yireo.com/software/magento-extensions/emailtester2#quickstart
235
When the settings are made click “SAVE CONFIG” in the top section on the right-hand side.
Figure 208 Yireo E-Mail Tester configuration (admin panel)
Now you can access MARKETING / COMMUNICATIONS / YIREO EMAIL TESTER in order to generate
the e-mail previews. Under GENERIC OPTIONS you can now do the following:
• STORE SCOPE: Here you can select the store view the e-mail should be generated in.
• MAIL TO: Here you can enter the e-mail address the e-mail should be addressed to.
• EMAIL TEMPLATE: Here you can select the e-mail template that should be used for the e-mail
generation.
236
Next under CUSTOMER VALUE you can define the customer that should be used for the e-mail by
either CUSTOMER ID or by entering a search term in the CUSTOMER SEARCH input.
In PRODUCT VALUE you can define the products that should be used for the e-mail by either
PRODUCT ID (SKU) or by entering a search term in the PRODUCT SEARCH input.
In ORDER VALUE you can define the orders that should be used for the e-mail by either ORDER ID or by
entering a search term in the ORDER SEARCH input (customer name or e-mail).
Figure 209 Generating E-Mail preview (admin panel)
With the input being made you can now preview the email by clicking “PREVIEW EMAIL”. In case you
want to send the e-mail, click “SEND EMAIL”.
237
5.2. E-Mail Attachements
In MageSuite you can attach documents to your order confirmation mails. This is especially useful to
include e.g. the general terms and conditions to sales e-mails.
In order to add attachements to you sales e-mails access STORES / SETTINGS / CONFIGURATION
and then navigate to SALES and then SALES EMAILS. Now expand the NEW ORDER CONFIRMATION
EMAIL ATTACHEMENTS section. Here you can upload PDF, DOC, DOCX or ODT files as
• FIRST ATTACHEMENT
• SECOND ATTACHEMENT
• THIRD ATTACHEMENT
Also you can remove existing files by checking the DELETE FILE checkbox.
When the changes are made click “SAVE CONFIG” in the top section on the right-hand side.
Figure 210 Adding e-mail attachements (admin panel)
238
5.3. Google Tag Manager Integration
MageSuite does use the Magepal Google Tag Manager extension

(https://github.com/magepal/magento2-google-tag-manager). This open-source extension does allow
integrating the Google Tag Manager account with the MageSuite shop. The Google Tag Manager
allows tracking of specific events and passing these data to Google analytics. By doing so you can
e.g. track the transaction (conversion rate) and implement tracking pixels.
In order to integrate MageSuite with the existing Google Tag Manager account access STORES /
SETTINGS / CONFIGURATION and then MAGEPAL and GOOGLE TAG MANAGER. Open the GOOGLE
TAG MANAGER section and select “YES” in the ENABLE dropdown. In the succeeding ACCOUNT
NUMBER input field you can enter the Google Tag Manager Container ID.
When the changes are made click “SAVE CONFIG” in the top section on the right-hand side.
Figure 211 Google Tag Manager integration (admin panel)
239
5.4. Flush Cache by Tag / URL
MageSuite does allow more granular cache management such as flushing cache by URL or by tag.
This allows e.g. flushing cache of specific CMS pages, categories, products.
In order to use this feature access SYSTEM / TOOLS / CACHE MANAGEMENT. Scroll down to the
FLUSH CACHE BY TAG / URL section. Here you can do the following:
• TAG: Here you can flush the cache by tag. You can find the tags used for CMS pages under
CONTENT / ELEMENTS / PAGES in the CMS page grid (make sure you added the attribute “Tags”
via “Columns”)
• URL: Here you can flush the cache by URL. Here you can e.g. add the full URL of a CMS page.
When this is done click “FLUSH” on the very bottom of the page.
Figure 212 Using flush cache by tag and URL (admin panel)
240
5.5. Full Reindex
In MageSuite you can perform a full reindex from the admin panel. For this purpose the MagePal
reindex extension is used (https://github.com/magepal/magento2-reindex).
In order to perform a full reindex access SYSTEM / TOOLS / INDEX MANAGEMENT. In the selection
column on the very left column and you select all indexers in the header row by selection “SELECT
ALL” in the dropdown. With all the indexers being ticked you can click the “ACTION” dropdown field
and select “REINDEX”. Now you can click “SUBMIT” next to the “ACTION” field.
Finally you are required to flush the cache to make the changes apply on the storefront. Access
SYSTEM / TOOLS / CACHE MANAGEMENT and click “FLUSH MAGENTO CACHE” in the top section on
the right-hand side.
Figure 213 Full Reindex (admin panel)
241
5.6. Cache Warmer
MageSuite is using an own cache warm-up system. Out-of-the box Magento 2 is using full-page cache
which is frequently flushed e.g. when somebody makes changes in categories and products. In such
cases the cache has to be loaded again which increases the page load. The cache warmer however
uses a robot which warms up the cache for the given user. This in turn decreases the page loading
time which has a positive impact on the SEO performance.
You can configure the cache warmer in STORES / SETTINGS / CONFIGURATION under MAGESUITE
and CACHE WARMER. Under ENABLED you can enable the feature by selecting “YES”. In CUSTOMER
GROUP you can select the customer groups where the cache warmer should apply in. In STORE VIEW
you can select the store view where the cache warmer should be used in.
When the settings are made click “SAVE CONFIG”.
Figure 214 Cache Warmer configuration (admin panel)
242
With the basic configuration being made you can set the warm-up priority per product, category and
CMS page.
In order to set the priority on product level access CATALOG / INVENTORY / PRODUCTS and then
click “EDIT” in the product entry you want to set the priority in. Scroll down and expand the CACHE
WARMUP section. In the WARMUP PRIORITY dropdown you can select the priority:
• NO: The given page will not be considered for cache warm-up.
• YES, LOW PRIORITY: The given page will be considered for the cache warm-up with low priority,
i.e. the bot will warm-up cache when all pages with high priority have been warmed up.
• YES, HIGH PRIORITY: The given page will be considered for the cache warm-up with high priority,
i.e. the bot will warm-up cache of these pages before starting with low priority pages.
When the settings are done click “SAVE” in the top-section on the right-hand side.
Figure 215 Setting Cache Warm-up priority (admin panel)
In order to set the priority on category level access CATALOG / INVENTORY / CATEGORIES and then
click the category from the category tree you want to set the priority in. Scroll down and expand the
CACHE WARMUP section. In the WARMUP PRIORITY dropdown you can select the priority:
In order to set the priority per CMS page access CONTENT / ELEMENTS / PAGES and then click the
click “EDIT” in the CMS page you want to set the priority in. Scroll down and expand the CACHE
WARMUP section. In the WARMUP PRIORITY dropdown you can select the priority:
243
244
6. Security
6.1. Admin Activity Log
MageSuite is using the Amasty Admin Actions Log extension (https://amasty.com/admin-actions-log-

for-magento-2.html) for monitoring the activity in the admin panel. This extension allows to e.g.
• Track the admin login attempts

• Monitor active admin user sessions
• Track and restore the changes made in the admin panel
See the official user guide here:

https://amasty.com/docs/doku.php?id=magento_2:admin_actions_log#actions_log
According to GDPR art. 5 (1) f it is necessary to use technology which allows documenting the data
processing activities.
In order to use the extension you firstly need to obtain a license.
Figure 216 Admin Activity Log (admin panel)
245
Figure 217 Tracking changes in admin activity log (admin panel)
246
6.2. IP Restriction for Admin Panel
MageSuite is using the MageSpecialist IP restriction extension

(https://github.com/magespecialist/m2-MSP_AdminRestriction). This extension allows to log in only
known IP addresses into the admin panel. This enhances security and according to GDPR art. 5 (1) the
data processing company should use the highest security standards possible.
In order to setup the IP restriction extension access STORES / SETTINGS / CONFIGURATION and then
navigate to SECURITY SUITE and BACKEND IP RESTRICTION. In the ENABLED dropdown select “YES”
to enable the IP restriction. In the AUTHORIZED IP LIST input enter the IP addresses (comma-
separated) that should grant admin panel access. After this is done click “SAVE CONFIG”.61
Figure 218 Configuring Backend IP restriction for admin panel (admin panel)
61
In order to apply the changes you need to flush the cache in SYSTEM / TOOLS / CACHE MANAGEMENT
247
6.3. Admin Panel Anonymization
In MageSuite you can anonymize the sales data in the admin panel. This enhances security and
according to GDPR art. 5 (1) the data processing company should use the highest security standards
possible. GDPR data anonymization is enabled by default for default Magento admin users.
Figure 219 Anonymized Sales area in admin panel (admin panel)
In order to enable or disable data anonymization in the admin panel access to SYSTEM /
PERMISSIONS / ALL USERS. In the user overview click on the user you want to enable the data
anonymization. In the “USER INFO” tab enter the admin account’s password in YOUR PASSWORD.
Next access the “USER ROLE” tab and select the user role “GDPR”. When the changes are done click
“SAVE USER” in the top section on the right-hand side.
248
Figure 220 Configuring Admin Panel Anonymization
In order to apply the changes you need to sign out and sign in the changed user account.
249
7. ERP Reporting
7.1. Import Log
In MageSuite you can monitor the import processes to external ERP systems. This allows to verify if
imports successfully passed or if they failed. Also you can detect the errors from logs.
In order to see the import log access SYSTEM / DATA TRANSFER / IMPORT LOG. Now you will have a
full overview of all import processes that were configured in the MageSuite shop, such as product
data import, price import, stock import etc. In the verify right column “STATUS” you can verify if the
import successfully passed.
Figure 221 Import log (admin panel)
You can also receive more details on the specific import by clicking the import entry. Here you can see
the following:
• STEP IDENTIFIER: Here you can see the status of an import process more granular. Usually the
import process takes several steps such as downloading the file, parsing, validating etc.
• STARTED AT: Here you can see at which time the import process started.
• FINISHED AT: Here you can see at which time the import process ended.
• STATUS: Here you can the status, i.e. “done” in case the step was successful, “pending” in case
the step is still ongoing and “error” in case there was an error and the step failed.
• OUTPUT: Here you receive more details on the import process, such as checked rows, errors,
invalid entries etc.
250
Figure 222 Import log details (admin panel)
251
7.2. Order Export Log
MageSuite offers a solution to monitor the order export process. This allows to verify if the order has
been successfully exported to the external system.
In order to access the order export log go to SYSTEM / DATA TRANSFER / ORDER EXPORT LOG. Now
you have a full overview of the orders exported.
• EXPORTED FILENAME: Here you can find the filename of the order export file that was generated.
• EXPORTED ORDERS AMOUNT: Here you can see how many orders were contained in the specific
order export file.
• STARTED AT: Here you can see at which time the export process started.
• FINISHED AT: Here you can see at which time the export process ended.
Figure 223 Order export log (admin panel)
You can also access further details by clicking one order export entry. Additionally to the information
above you can find here:
• EXPORTED IDS: The order IDs that are contained in the given order export file.
• UPLOADED FILES STATUS: Here you can see the status of the order export.
252
Figure 224 Order export log details (admin panel)
253

MageSuite User Guide.

Uploaded by

Copyright:

Available Formats

MageSuite User Guide.

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

MageSuite User Guide.

Uploaded by

Copyright:

Available Formats

User Guide

Published May 2021

2. CONTENT MANAGEMENT ............................................................................................6

2.1. CREATING CMS PAGES USING CC COMPONENTS ................................................................7

3. MARKETING ............................................................................................................. 125

3.1. DAILY DEAL .............................................................................................................. 125

4. USER EXPERIENCE ................................................................................................... 190

4.1. ELASTICSUITE .......................................................................................................... 190

5. ADMINISTRATION .................................................................................................... 235

5.1. E-MAIL TESTER ........................................................................................................ 235

6. SECURITY ................................................................................................................. 245

6.1. ADMIN ACTIVITY LOG................................................................................................. 245

7. ERP REPORTING ....................................................................................................... 250

7.1. IMPORT LOG ............................................................................................................. 250

You can find instructions how to install MageSuite in GitHub:

• Magento version: 2.4.21

Figure 1 Add CC components

The following sections explain how to setup the above CC components.

• HEADLINE: located at the top of the CC component

Figure 3 CC Headline component (admin panel)

Figure 5 CC Button component (admin)

• CMS Page Link

When the desired settings have been made click SAVE.

Figure 8 CC Static block (admin panel)

When the settings have been made click SAVE.

• A headline displayed on the hero image

Figure 9 CC Hero carousel (admin panel)

When the settings have been made, click SAVE.

• A headline displayed on the image teaser

Figure 11 CC Image teaser component (storefront)

When the settings have been made, click SAVE.

Figure 13 Image Teaser 2.0 (storefront)

Next you can determine the MOBILE LAYOUT:5

Figure 15 CC Product carousel component (admin panel)

When the settings have been made, click SAVE.

Figure 19 CC Brand Carousel component above CC Headline component (admin panel)

Figure 20 CC Brand carousel component (storefront)

Figure 21 CC Category links component (admin panel)

When the settings have been made, click SAVE.

Next you need to define the layouts for specific devices:

Figure 23 Product grid image settings (admin panel)

When the settings have been made, click SAVE.

The CC Custom HTML component allows including custom HTML markup.

Figure 26 CC Custom HTML component (admin panel)

• Text vertically centered on the left

On the DESKTOP LAYOUT you can choose:

On the MOBILE LAYOUT you can choose:

When the settings have been made, click SAVE.

Figure 29 CC Product Finder component (admin panel)

When the settings have been made, click SAVE.

Figure 31 Icon Component (storefront)

In the tab STYLE two additional customizations can be made.

• The product image including a Daily Deal badge

Figure 33 CC Daily Deal Teaser component (admin panel)

When the settings have been made, click SAVE.

Figure 34 CC Daily Deal Teaser component underneath CC Headline component (storefront)

Figure 35 CC Teaser and text (storefront)

The new featured contrast optimizer contains following options: