Megamenü English Version (Shopware 6)

Owned by Indra Lorber (Unlicensed)
Last updated: Jan 20, 2021
14 min read

Introduction

Features

Installation / Update

System requirements

Shopware 6.3 and all associated system requirements must be met.

Other requirements

No third-party accounts or API access is required.

Plugin installation

Plugin update

To install the plugin, the following steps are required:

Manual upload

  1. Download the plugin

  2. In the Admin Dashboard navigate to Settings → System → Plugins and click on the button “Upload Plugin”.

  3. Select the file and upload it

Activation

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.

Configuration

Store

Styling

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:

Typography

  • 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

  • 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.

Box

  • 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

Hover/Active

  • 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):

Other

  • 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.

Icon

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.

Desktop menu

The desktop menu can be edited under Contents → Desktop Menu.

Einstellungen

  • 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.

Styling

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.

CSS

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 item

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.

Mobile-Menü

– 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.

 

Settings

  • 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.

Styling

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.

Menüeintrag

The styling options will be applied to the menu items. The available styling options can be found under Styling.

CSS

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 item

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.

General

  • 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.

Categories

General

  • 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.

Category Settings

  • 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.

Columns

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

General

  • 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.

Columns

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".

HTML

General

  • 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.

HTML Content

Custom HTML or Twig content is used instead of the title of the menu item.

HTML Dropdown Content

Custom HTML or Twig content that is displayed inside the dropdown of the menu item.

ERP-System

The plugin does not require an interface to an ERP system.

Operation

Glossary

Store

ERP-System

Individualization

The plugin can be modified accordingly in the frontend.

Templates

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/.

CSS

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!

Text blocks

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.

Troubleshooting

Check logs

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.

Browser log

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.

Store log

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.

Webserver log

The webserver log becomes relevant if you encounter an Error 500 (= white page) somewhere.

Your hoster can provide you with the webserver log.

FAQ

How do I integrate Google Fonts?

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.

How to change the spacing of subcategory images in the category widget?

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 */ }

How to change the number of subcategories per row in the category widget?

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:

Changelog

v1.0.0 (Month Year)

  • Initial Release

Support and Contact

Reach our Support und Kontakt