Grobe Beschreibung, wofür das Plugin gut ist.
Stichpunkt-Liste der Features
Shopware 6.3 and all associated system requirements must be met.
No third-party accounts or API access is required.
Vorgehen bei Erstinstallation
To install the plugin, the following steps are required:
Download the plugin
In the Admin Dashboard navigate to Settings → System → Plugins and click on the button “Upload Plugin”.
Select the file and upload it
Once the plugin is uploaded, the plugin still needs to be installed & activated. Please note that only installed plugins can be activated. To install the plugin, select the install item in the right column (button with 3 gray dots). After successful installation, you can activate the plugin and then proceed with further configuration.
The plugin offers different elements like the menu or menu items and provides them with their styling. The styling component is the same for all elements and offers the following settings:
Font color (color picker): Sets the font color of the element.
Text alignment (selector): sets the text alignment of the element. The choices are:
left
centered
right
justified
Font (text input): Name of the font(s) to be used. Note: Embedding Google Fonts
Font weight (selection): Sets the font weight of the element.
Default: Make no change. The default of the theme will be used.
Thin
Normal
Bold
Font style (selection): Sets the font style of the element.
Default: Make no change. The default of the theme is used.
Italic: Italic font, i.e. italic variant of the font.
Skew: Font programmatically skewed by the browser.
Font size (text input): Sets the size of the font. Examples: 16px
or 1rem
Text transformation (selection): Sets the text transformation of the element.
Default: Make no change. The default of the theme will be used.
Capitalized: Forces the initial letter of each word to be capitalized. Example: A Text Where Each Initial Letter Is Capitalized.
Capitalized: The text is displayed in capital letters. Example: A TEXT WITH CAPITAL LETTERS ONLY.
Lowercase: The text will be displayed in lowercase letters. Example: a text with lowercase letters only.
Character spacing (text input): sets the character spacing of the font. Example: 4px
or 0.25rem
Background color (color picker): Sets the background color of the element.
Background image (media selector): Sets a background image for the element.
Background image size (selector):
Cover: keeps the aspect ratio of the background image and scales it so that it is as small as possible, but completely covers the background positioning area.
Contain: keeps the aspect ratio of the background image and scales it so that it is as large as possible but fully contained within the background positioning area.
Automatic: scales the background image in the appropriate direction so that the original aspect ratio is maintained.
Background Image Repeat (Selection):
Repeat: Repeats the background image horizontally and vertically.
repeat horizontally: The background image is repeated horizontally only.
repeat vertically: The background image is repeated vertically only.
no-repeat
inherited: The value of the parent element is inherited.
Background image position (text input): Determines the position of the background image.
Example: 50% 50% for a horizontally and vertically centered image.
Margin (text input): Sets the outer spacing of all four sides of the element.
Padding (text input): Sets the inside spacing of all four sides of the element. The inner spacing is the area between the content and the frame.
Border width (text input): Sets the width of the border. Example:2px
Border style (selection):
none
dotted: a series of round dots
dashed: a series of short strokes with square ends or line segments
solid: a single, straight, filled line
double: two straight, filled lines
Groove: a frame that results in an incised effect. Opposite of edge
Edge: frame with a 3D effect, as if coming out of the page. Opposite of groove
inside: displays a frame that makes the box look as if it were inset. Opposite of outside
outside: Displays a frame that shows the box in 3D as embossed. Opposite of inside
inherited: The value of the parent element is inherited.
Frame color (color picker): Sets the frame color of the element.
Frame radius (text input): Sets the corner radius of the frame to display rounded corners. Example: 4px
Width (text input): The width of the element. Example:125px
Height (text input): The height of the element. Example:60px
Font color (hover) (color picker)
Background color (color picker)
Border width (text input)
border-style (selector):
none
dotted
dashed
solid
double
groove
edge
inside
outside
inherited
Frame color (color selector):
class (text input): Sets own CSS classes for the element. Example: Klasse-1 Klasse-2
Custom CSS (text input): Custom CSS properties (e.g. display or position) for this element.
With own CSS only CSS properties and values may be added and NO own selectors, since this content is inserted with the appropriate selectors! If you want to make larger adjustments, please use the CSS styling settings of the menu. |
Each menu item can have an icon. The icon component provides the following settings:
Icon (text input): the name/key of the icon in the Shopware icon font. An overview of all icons can be found here:: https://www.8mylez.com/shopware-6-iconset/
Custom Icon (Media Selection): Sets a custom image to be used as an icon.
Icon Position (Selection): Specifies whether the icon should be displayed to the left or right of the text.
Left
Right
Display (selection)
Icon/image only: Displays only the icon/image and hides the text of the menu item.
Text + icon/image: Displays both the text and the icon/image of the menu item.
The desktop menu can be edited under Contents → Desktop Menu. |
Sticky (Yes/No): Specifies whether the menu should be sticky or not.
Active (Yes/No): Specifies whether the menu should be active or not. If the menu is not active, the Shopware custom menu will be displayed instead.
Menu Container Width (Selection):
Full Width: The menu container spans the full width of the screen.
Container / Boxed: The menu container spans the maximum content width (container, content-box).
Content-based: The menu container is as large as its content needs it to be, but at most as large as the maximum content width (see: Container / Boxed option).
Menu Content Width (Selection):
Full Width: The menu content spans the entire width of the screen.
Container / Boxed: The content of the menu extends over the maximum content width (container, content-box).
Menu item alignment (selection):
The default value (set by the theme).
Centered: Centers the menu items within the menu container.
Start of the menu: Aligns the menu items to the left edge of the menu container.
End of the menu: Aligns the menu items to the right edge of the menu container.
With space between Distribute the elements evenly. The first item to the start, the last to the end.
With space around: Distribute the items evenly. Elements have equal spacing around them.
The Menu Content Width setting is available only when Full Width is selected as the Menu Container Width.
The Menu Content Width setting is available only when Full Width is selected as the Menu Container Width.
The styling options are applied to the menu container. The available styling options can be found under Styling.
The styling options will be applied to the dropdown container or dropdown menu items. The existing styling options can be found under Styling.
The styling options will be applied to the menu items. The available styling options can be found under Styling.
Individual CSS customizations can be used to include Google Fonts. Example:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap'); |
In the font field of the styling options 'Roboto', sans-serif
is now available.
New menu items can be added to the menu and placed using drag-drop. The menu supports the following types/widgets:
Link: A simple link in the menu
Categories: A selection of categories presented in a dropdown. Provides different display options (see Kategorie Widget).
Columns: A widget that displays a dropdown with multiple columns, that can be populated with widgets.
HTML: A widget that allows using HTML/Twig content in the menu item and/or in the dropdown content.
Shows the menu along with all menu items/widgets. Child items (e.g. columns in the column widget) are indented and lightened to indicate which widget they belong to.
Widgets can be edited or deleted here. The arrangement of the menu items can also be changed via drag-drop.
– TODO: START –
The mobile menu is based on and uses many of the features of Shopware's standard off-canvas menu. Like the desktop menu, however, it supports various widgets to customize the menu.
The mobile menu can be edited under Content → Mobile Menu. |
Active (Yes/No): Specifies whether the menu should be active or not. If the menu is not active, the Shopware custom menu will be displayed instead.
The styling options will be applied to the menu container. The available styling options can be found under Styling.
The styling options will be applied to the dropdown submenu items. The existing styling options can be found under Styling.
The styling options will be applied to the menu items. The available styling options can be found under Styling.
Individual CSS customizations. Can be used, for example, to include Google Fonts. Example:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap'); |
In the font field of the styling options 'Roboto', sans-serif
is now available.
New menu items can be added to the menu and placed using drag-drop. The menu supports the following types/widgets:
Link: A simple link in the menu
Categories: A selection of categories that are displayed in a submenu. Provides different display options (see Kategorie Widget)
Columns: A widget that displays a submenu with several columns, that can be filled with widgets. The "columns" are displayed below each other and not next to each other! It can also be set whether the content of the columns should be displayed directly or in a separate submenu.
HTML: A widget that allows using HTML/Twig content in the menu item and/or in the submenu.
Shows the menu including all menu items/widgets. Child items (e.g. columns in the column widget) are indented and lightened to show which widget they belong to.
The widgets can be edited or deleted here. The arrangement of the menu items can also be changed via drag-drop.
Title (text input): The title of the menu item.
Active (Yes/No): Indicates whether the menu item is active or not.
Link Type (Selection):
category
customizable link
Category (selection): Selection of the category to link to.
Link to (text input): URL to link to.
Link destination (selection):
Same window: Opens the link in the same window/tab.
New window: Opens the link in a new tab.
Right-aligned (Yes/No): If active, the element will be moved to the right side of the menu.
The category setting is available only when the “category” is selected as the link type. Similarly, the “linked to” setting is only available when the link type is a “customizable link”.
The category setting is available only when the “category” is selected as the link type. Similarly, the “linked to” setting is only available when the link type is a “customizable link”.
Title (text input): The title of the menu item.
Active (Yes/No): Indicates whether the menu item is active or not.
Dropdown Width (Selection):
Full Width: The dropdown container spans the full width of the screen.
Container / Boxed: The dropdown container spans the maximum content width (container, content-box).
Content-based: The dropdown container is as large as its content needs to be, but at most as large as the maximum content width (see: Container / Boxed option).
Dropdown content width (selection): Only available with full dropdown container width!
Full Width: The content of the dropdown spans the entire width of the screen.
Container / Boxed: The content of the dropdown extends over the maximum content width (container, content-box).
Category (Selection): Selection of the category to link to and whose subcategories are to be displayed.
Link destination (selection)
Same window: Opens the link in the same window/tab.
New window: Opens the link in a new tab.
Right-aligned (Yes/No): If active, the item will be moved to the right side of the menu.
The dropdown content width setting is only available when the full width is selected as the dropdown width.
The dropdown content width setting is only available when the full width is selected as the dropdown width.
Show Category Title (Yes/No): Specifies whether the title of the selected category should be displayed in the dropdown or not.
Show Category Image (Yes/No): Specifies whether or not the category image should be displayed in the dropdown.
Show Category Description (Yes/No): Specifies whether or not the category description should be displayed in the dropdown.
Category Image Position (Select): Specifies whether the category image should be displayed either to the right or to the left of the category description.
Max. Number of Subcategories (Number): Specifies the maximum number of subcategories to display. -1 for unlimited and 0 for none.
Show Subcategory Images (Yes/No): Specifies whether or not to display the subcategory images.
Show Subcategory Description (Yes/No): Specifies whether the subcategory descriptions should be displayed or not.
Max. Number of Sub-Subcategories (Number): Specifies the maximum number of sub-subcategories to display. -1 for unlimited and 0 for none.
Example Simple: Show category links only
Example Complex: Show category information and subcategory links and images.
The Columns widget has two additional items in the sidebar: "New Menu Item" and "Navigator", which work the same way as in the menu. The Columns widget supports the following menu widgets:
Link
HTML
Categories
Title (text input): The title of the menu item.
Active (Yes/No): Indicates whether the menu item is active or not.
Dropdown Width (Selection):
Full Width: The dropdown container spans the full width of the screen.
Container / Boxed: The dropdown container spans the maximum content width (container, content-box).
Content-based: The dropdown container is as large as its content needs to be, but at most as large as the maximum content width (see: Container / Boxed option).
Dropdown content width (selection): Only available with full dropdown container width!
Full Width: The content of the dropdown spans the entire width of the screen.
Container / Boxed: The content of the dropdown extends over the maximum content width (container, content-box).
Link-type (selection):
Category
Customizable link
Category (selection): Selection of the category to link to and whose subcategories are to be displayed.
Linked to (text input): URL to be linked to
Link destination (selection)
Same window: Opens the link in the same window/tab.
New window: Opens the link in a new tab.
Right-aligned (Yes/No): If active, the item will be moved to the right side of the menu.
The category setting is only available if the “category” is selected as the link type. Likewise, the linked-to setting is only available when the link type is a customizable link.
The category setting is only available if the “category” is selected as the link type. Likewise, the linked-to setting is only available when the link type is a customizable link.
Here the individual columns are displayed along with their menu item widgets. The settings of a column, such as a name or active, can be accessed via the sidebar item "Navigator".
Title (text input): The title of the menu item.
Active (Yes/No): Indicates whether the menu item is active or not.
Dropdown Width (Selection):
Full Width: The dropdown container spans the full width of the screen.
Container / Boxed: The dropdown container spans the maximum content width (container, content-box).
Content-based: The dropdown container is as large as its content needs to be, but at most as large as the maximum content width (see: Container / Boxed option).
Dropdown content width (selection): Only available with full dropdown container width!
Full Width: The content of the dropdown spans the entire width of the screen.
Container / Boxed: The content of the dropdown extends over the maximum content width (container, content-box).
Link Type (Selection):
Text Only: The entry is displayed as text and not as a link
Category
Customizable link
Category (selection): Selection of the category to link to.
Linked to (text input): URL to link to.
Link destination (selection)
Same window: Opens the link in the same window/tab.
New window: Opens the link in a new tab.
Right-aligned (Yes/No): If active, the item will be moved to the right side of the menu.
The category setting is only available if “category” is selected as the link type. Likewise, the linked-to setting is only available when the link type is a customizable link.
The category setting is only available if “category” is selected as the link type. Likewise, the linked-to setting is only available when the link type is a customizable link.
The dropdown content width setting is only available when the full width is selected as the dropdown width.
The dropdown content width setting is only available when the full width is selected as the dropdown width.
Custom HTML or Twig content is used instead of the title of the menu item.
Custom HTML or Twig content that is displayed inside the dropdown of the menu item.
The plugin does not require an interface to an ERP system.
Dieser Bereich beschreibt den Umgang mit dem Plugin im Alltag.
Falls das Plugin bestimmte Begrifflichkeiten für die Beschreibung des Betriebs benötigt, sollten diese hier geklärt werden.
Beschreibung des Betriebs im Shop (z.B. Backend-Übersichten, Aktionen, die dort durchführbar sind, etc.)
Ggf. Beschreibung, wie im ERP-System mit dem Plugin umzugehen ist.
The plugin can be modified accordingly in the frontend.
The plugin template files, use various blocks, which can be used to customize the appearance or behavior of the mega menu. The files are located in the plugin folder src/Resources/views/storefront/
.
If you make changes in the plugin's own files, they will be irrevocably overwritten during an update! |
The plugin offers up to the use of inline CSS many possibilities to customize the display in the storefront. Changes that go beyond the configuration options in the administration are possible via Shopware's template system in your own storefront template.
If you make changes in the plugin's own files, they will be irrevocably overwritten during an update!
You can easily customize the text blocks used via the administration interface of your Shopware installation. Under Settings, select "Text blocks" in the first tab "Shop", then click "edit" in the right column for the text block set for which you want to make changes. After that, you can search for "s360-megamenu." at the top and find all the text modules that are relevant to the plugin.
Dieser Abschnitt soll dem Kunden ermöglichen, vielleicht schon allein Probleme lösen zu könne. Wo findet er Logs, worauf sollte er achten?
To find out where a problem lies, the logs will help you and us. Depending on the error pattern, one of the following 3 logs is more or less relevant for this.
The browser log is mostly relevant if something in the frontend of the store behaves strangely or does not react. (Example: You click a button and apparently nothing happens).
You can see the browser log by pressing F12 in the browser and then switching to Console.
The store log is always interesting if unexpected error messages are displayed in the frontend or if the plugin reacts to input in the frontend but does not deliver the expected result. Sometimes the browser log also shows that the information is more likely to be found in the store log.
The webserver log becomes relevant if you encounter an Error 500 (= white page) somewhere.
Your hoster can provide you with the webserver log.
Attention: Edit the config file of the store only if you know what you are doing! Incorrect adjustments here can make your store inaccessible or (encrypted) data unusable. If in doubt, ask your hoster or service partner for help. |
Google Fonts can be integrated into CSS using the import rule. To do this, the respective code snippet you received from Google must be entered in the CSS field of the styling settings.
In the font field of the styling options 'Roboto', sans-serif
is now available.
The plugin uses a default spacing on the right and bottom for the subcategory images. This can be changed via CSS by adding the following to the CSS tab in the menu styling settings:
.s360-megamenu-sub-category { padding-right: 10px; /* Hier den Abstand rechts angeben */ padding-bottom: 10px; /* Hier den Abstand unten angeben */ } |
The plugin uses a column size of 25% for the subcategories. This can be changed via CSS by adding the following to the CSS tab in the menu styling settings:
.s360-megamenu-sub-category { -ms-flex-preferred-size: 25%; /* Hier die Größe der Spalte angeben */ flex-basis: 25%; /* Hier die Größe der Spalte angeben */ } |
Initial Release
Reach our Support und Kontakt