Content tab
Configure the menu source, layout, and mobile behavior based on the chosen menu type.

Displays a menu based on your store's category structure.
Source
Menu
Select 'Category Tree' to automatically generate a menu from your product categories.
Category Menu Thumbnails
Enable to display thumbnail images next to category links (if thumbnails exist).
Category Tree Options
Category Root
Choose the starting point: Home, Current, Parent, Current/Parent, or a Custom Category.
Select Category (Custom)
Select the specific category root when 'Category Root' is 'Custom Category'.
Maximum Depth
Set the maximum number of category levels to display (0 for unlimited).
Sort
Choose category sorting: By Position or By Name.
Sort Order
Choose sorting direction: Ascending or Descending.
Navigation Layout
Layout
Set the orientation of the main menu items: Horizontal, Vertical, or Dropdown.
Align
Align the main menu items horizontally: Left, Center, Right, or Stretch.
Pointer
Select the visual indicator for hover and active menu items.
Animation (Pointer)
Choose the animation effect based on the selected pointer type.
Submenu Indicator
Select an icon to indicate items with submenus.
Submenu Align
Align the submenu dropdown to the left or right of its parent item.
Show Submenu
Choose whether submenus appear on hover or require a click.
Mobile Dropdown
Settings for the menu appearance on smaller screens when Layout is not 'Dropdown'.
Breakpoint
Choose the screen width (Tablet or Mobile) to switch to the mobile dropdown view.
Align
Align the text within the opened mobile menu: Aside or Center.
Animation
Select the animation for expanding submenus: Toggle or Accordion.
Toggle Button
Choose to display a Hamburger icon or no button for the mobile menu.
Toggle Align
Align the toggle button horizontally: Left, Center, or Right.
Full Width
Enable to make the opened mobile menu stretch to full viewport width.

Uses link blocks configured in PrestaShop's 'Link List' (ps_linklist) module.
Source
Menu
Select 'Link List' to use link blocks managed by the ps_linklist module.
Hook
Select the specific hook associated with the Link List module instance you want to display.
Navigation Layout
Layout
Set the orientation of the main menu items: Horizontal, Vertical, or Dropdown.
Align
Align the main menu items horizontally: Left, Center, Right, or Stretch.
Pointer
Select the visual indicator for hover and active menu items.
Animation (Pointer)
Choose the animation effect based on the selected pointer type.
Submenu Indicator
Select an icon to indicate items with submenus.
Submenu Align
Align the submenu dropdown to the left or right of its parent item.
Show Submenu
Choose whether submenus appear on hover or require a click.
Mobile Dropdown
Settings for the menu appearance on smaller screens when Layout is not 'Dropdown'.
Breakpoint
Choose the screen width (Tablet or Mobile) to switch to the mobile dropdown view.
Align
Align the text within the opened mobile menu: Aside or Center.
Animation
Select the animation for expanding submenus: Toggle or Accordion.
Toggle Button
Choose to display a Hamburger icon or no button for the mobile menu.
Toggle Align
Align the toggle button horizontally: Left, Center, or Right.
Full Width
Enable to make the opened mobile menu stretch to full viewport width.
Style tab
Customize the appearance of the main menu, dropdowns, and mobile toggle button.

On desktop, styles apply to submenus. On mobile (below breakpoint) or when Layout is 'Dropdown', styles apply to the entire menu.
Dropdown Menu
Typography
Control the font settings for the text within the dropdown/mobile menu.
Text Color (Normal, Hover & Active)
Set the text color for items within the dropdown/mobile menu in their default, hover, and active states.
Background Color (Normal, Hover & Active)
Set the background color for items within the dropdown/mobile menu in their default, hover, and active states.
Border
Define the border type, width, and color for the dropdown container.
Border Radius
Adjust the roundness of the corners for the dropdown container.
Box Shadow
Apply a shadow effect to the dropdown container.
Horizontal Padding
Adjust the horizontal space inside each dropdown item.
Vertical Padding
Adjust the vertical space inside each dropdown item.
Divider
Border Type
Choose the style for the divider line between dropdown items (e.g., solid, dashed).
Color
Set the color of the divider line.
Border Width
Control the thickness of the divider line.
Distance
Adjust the vertical distance between the main menu item and its submenu dropdown.

Styles apply when 'Toggle Button' in the Content tab is set to 'Hamburger'.
Toggle Button
Color (Normal & Hover)
Set the color of the toggle button icon in its default and hover states.
Background Color (Normal & Hover)
Set the background color of the toggle button in its default and hover states.
Size
Adjust the size of the toggle button icon.
Border Width
Control the thickness of the border around the toggle button.
Border Radius
Adjust the roundness of the corners for the toggle button.
Advanced tab
Access advanced layout, motion, and custom CSS options.

Layout
Margin
Set the outer spacing around the widget's container, with options for PX or % units, and individual control for Top, Right, Bottom, and Left.
Padding
Set the inner spacing within the widget's container, with options for PX, EM, or % units, and individual control for Top, Right, Bottom, and Left.
Width
Control the width of the widget: Default, Full Width (100%), Inline (auto), Custom (numeric value), or Calculate (CSS calc function).
Full width
- Vertical align : Align the widget vertically within its parent column to start, center, end, or stretch.
- Size : Control how the widget grows to fill available space within its container (None, Grow, Custom).
- Grow : Define the flex-grow factor when 'Size' is set to 'Custom'.
Inline
- Vertical align : Align the widget vertically within its parent column to start, center, end, or stretch.
- Size : Control how the widget grows to fill available space within its container (None, Grow, Custom).
- Grow : Define the flex-grow factor when 'Size' is set to 'Custom'.
Custom
- Custom Width : Set a specific width for the widget using a slider with PX, %, or VW units.
- Vertical align : Align the widget vertically within its parent column to start, center, end, or stretch.
- Size : Control how the widget grows to fill available space within its container (None, Grow, Custom).
- Grow : Define the flex-grow factor when 'Size' is set to 'Custom'.
Calculate
- Calc : Define the widget's width using a CSS calc() expression (e.g., "100% - 20px").
- Min Width : Set a minimum width for the widget, ensuring it doesn't become narrower than this value using a slider with PX, %, or VW units.
- Vertical align : Align the widget vertically within its parent column to start, center, end, or stretch.
- Size : Control how the widget grows to fill available space within its container (None, Grow, Custom).
- Grow : Define the flex-grow factor when 'Size' is set to 'Custom'.
Order
Set the display order of this widget relative to other widgets within the same column using Flexbox (Start, End, Custom).
Custom
- Custom Order : Enter a specific numerical order value when 'Order' is set to 'Custom'.
Position
Set the CSS position property for the widget: Default (Static), Absolute, or Fixed.
Absolute/Fixed
- Horizontal Orientation: Set the horizontal reference point (Left or Right) for custom positioning within its nearest positioned ancestor.
- Offset : Specifies the distance using PX, %, VW, or VH units between the element and the left or right edge of its containing block.
- Vertical Orientation: Set the vertical reference point (Top or Bottom) for custom positioning within its nearest positioned ancestor.
- Offset : Specifies the distance using PX, %, VW, or VH units between the element and the top or bottom edge of its containing block.
Z-index
Control the stacking order of the widget if it overlaps with other elements; higher values appear on top.
CSS ID
Assign a unique custom ID to the widget's wrapper, allowing for specific CSS targeting or JavaScript interaction (without the '#' prefix).
CSS Classes
Add custom CSS class names (space-separated) to the widget's wrapper, allowing for custom styling or JavaScript targeting (without the '.' prefix).
Element Cache
Improves loading times by storing a static version of this element.

Scrolling Effects
Enhance elements with various dynamic effects triggered by the user's scrolling behavior.
- Vertical Scroll: Configure the scroll direction, speed, and viewport range for vertical scrolling effects.
- Horizontal Scroll: Set the scroll direction, speed, and viewport range for horizontal scrolling effects.
- Transparency: Adjust the transparency based on the direction, level, and viewport range.
- Blur: Apply a blur effect with customizable direction, level, and viewport range.
- Rotate: Rotate the element using direction, speed, and viewport settings.
- Scale: Scale the element with direction, speed, and viewport controls.
- Apply Effects on: Choose whether to apply scrolling effects on desktop, tablet, or mobile devices.
- Effects Relative to: Define whether the effects are relative to the default container, the viewport, or the entire page.
Mouse Effects
Enable mouse based effects for added interactivity.
- Mouse Track: Adjust the direction and speed of the effect as the user moves the mouse across the page.
- 3D Tilt: Enable 3D tilt effects with controllable direction and speed for a more immersive experience.
Sticky Effects
Fix elements at the top or bottom of the viewport as the user scrolls for persistent visibility.
- Sticky on: Apply sticky effects on desktop, tablet, or mobile devices.
- Offset: Set the offset in pixels to trigger the sticky effect after scrolling.
- Dynamic Offset: Use a CSS selector to dynamically set the offset based on other elements on the page.
- Effects Offset: Configure the pixel offset to control when additional effects apply.
- Stay in Column: Choose whether the sticky element remains within its column during scrolling (yes or no).
- Hide on Scroll: Set the offset and transition duration for hiding the sticky element when scrolling down.
Entrance Animation
Apply predefined animations to elements when they appear on screen.
- Fading: Elements gradually fade in or out of view.
- Revealing: Create smooth reveal effects as elements come into view.
- Sliding & Revealing: Combine sliding motion with reveal effects.
- Scaling & Revealing: Adjust the size of elements as they are revealed.
- Zooming: Apply zoom in or out effects during element appearance.
- Bouncing: Elements enter with a bouncing motion for attention-grabbing effects.
- Sliding: Elements slide into view from different directions.
- Rotating: Apply rotation effects as elements enter or leave the viewport.
- Attention Seekers: Highlight elements with exaggerated, noticeable animations.
- Specials: Unique animations for elements that require special effects.

Opacity
Adjust the transparency level of the element to create fade effects during normal or hover states.
Rotate
Rotate the element along the X, Y, or Z axes for dynamic visual effects. Use deg (degrees) values or apply 3D rotation.
Offset
Shift the position of the element horizontally (X-axis) or vertically (Y-axis) to control its exact placement within the layout.
Scale
Resize the element, with the option to keep proportions (yes or no) and adjust the scale factor to enlarge or shrink the element.
Skew
Skew the element along the X and Y axes to tilt its appearance.
Flip Horizontal/Vertical
Flip the element horizontally or vertically by selecting the anchor points (X: left, center, right; Y: top, center, bottom) for precise control over the flip transformation.
Trigger by (On hover)
Choose whether the hover transformation is triggered by interaction with the widget, column, or section.
Transition Duration (On hover)
Set the time duration in milliseconds that the hover transition effect takes to complete.
Transition Delay (On hover)
Specify a delay in milliseconds before the hover transition effect begins.

Background
Background Type
Select the background type: None, Classic, or Gradient.
Classic
- Color
- Set a solid background color to provide a consistent base for your design.
- Image
- Upload an image to use as the background. Additional settings include:
- Loading: Choose whether to load the background image lazily or immediately.
- Position: Define the image's position within the background (e.g., center, top-left).
- Attachment: Set the background image to scroll with the page or remain fixed.
- Repeat: Determine if the image repeats or stays single across the background area.
- Size: Control the size of the background image, such as cover, contain, or custom dimensions.
- Backdrop Filters
- Apply visual filters to the background, such as blur, brightness, or contrast, enhancing its appearance.
- Transition Duration (On hover)
- Set the time duration in milliseconds that the hover transition effect takes to complete.
Gradient
- Color
- Select the primary color for the gradient background.
- Location
- Define the starting position of the primary color in the gradient effect.
- Second Color
- Select the secondary color to blend into the gradient.
- Location
- Set the starting point of the secondary color within the gradient.
- Angle
- Adjust the angle at which the gradient flows (e.g., horizontal, vertical, diagonal).
- Backdrop Filters
- Apply visual filters to the gradient background for added depth and effects.
- Transition Duration (On hover)
- Set the time duration in milliseconds that the hover transition effect takes to complete.
Classic

Border
Border Type (Normal & Hover)
Select the style for the widget container's border (e.g., None, Solid, Dashed, Dotted, Double).
Border Width (Normal & Hover)
Set the thickness of the border on each side (Top, Right, Bottom, Left) in PX.
Border Color (Normal & Hover)
Define the color of the element's border.
Border Radius (Normal & Hover)
Adjust the roundness of the widget container's corners, with options for PX or % units.
Box Shadow (Normal & Hover)
Apply a shadow effect to the widget container, with controls for color, position, blur, and spread.
Transition Duration (On Hover)
Set the speed (in seconds) of the transition animation for border and shadow hover effects.

Scheduled and Customer Group settings apply if 'Extended Visibility Section' is enabled in Creative Elements > Settings > Experiments.
Visibility
Responsive Visibility
Control the display of elements across different devices.
- Hide On Desktop: Enable to hide this element specifically on desktop screen sizes.
- Hide On Tablet: Enable to hide this element specifically on tablet screen sizes.
- Hide On Mobile: Enable to hide this element specifically on mobile screen sizes.
Scheduled Visibility
Enable to set a specific time range during which this element will be visible.
- From : Set the start date and time for the element's visibility when 'Schedule' is enabled.
- To : Set the end date and time for the element's visibility when 'Schedule' is enabled.
Customer Group Visibility
Filter the visibility of this element based on customer groups: All, Show for specific groups, or Hide for specific groups.
- Groups: Select the specific customer groups to include or exclude for visibility when 'Customer Group' filter is active.

Custom CSS
Apply custom CSS to style the widget beyond the default settings.
Note: This requires CSS knowledge—use carefully, as incorrect syntax can impact other areas of the site.
/* For main element */ selector { color: red; } /* For child element */ selector .child-element { margin: 10px; } /* Or use any custom selector */ .my-class { text-align: center; }
If you want to learn the basics of CSS, W3Schools is a great resource for that.