Layout

The Layout tab is where you configure the slider's core dimensions, responsive behavior, and placement. These settings determine the size and type of your slider, which is the first step in the design process.

The Layout Tab

Module Position

This setting allows you to assign your slider to a predefined "hook" location within your PrestaShop theme. Hooks are placeholders where modules can display content. Selecting a hook here (e.g., `displayHome`) is the primary method for publishing your slider.

Slider Type & Dimensions

These settings control the slider's size and how it adapts to different screen sizes. Start by selecting one of the four main layout types, and then configure the specific dimensions for that type.

Fixed Size

The slider will maintain a fixed width and height, regardless of the screen size.

Responsive

The slider will scale down proportionally to fit the screen width, maintaining its aspect ratio. This is the recommended mode for most use cases.

Full Width

The slider will always stretch to fill the full width of the browser window, while the height remains fixed.

Full Size

The slider will stretch to fill both the full width and full height of the browser window, creating a fullscreen hero slider.

Common Settings

The following settings are available for all layout types:

Canvas Width / Canvas Height

Set the base dimensions (in pixels) of your slider's canvas. This is the ideal size you will be designing for in the editor.

Max-width

Set the maximum width the slider is allowed to stretch to. This is useful to constrain the slider's size within a wide page layout.

Allow fullscreen mode

When enabled, visitors can double-click the slider to enter their operating system's native full-screen mode for an immersive viewing experience.

Layout-Specific Settings

Full Width

Responsive under

Enable responsive behavior for the slider only when the screen width is below a specified pixel value. This is useful for maintaining a fixed layout on large desktops while ensuring responsiveness on smaller devices.

Fit to screen width

When enabled, the slider will always have the same width as the viewport, even if your theme uses a boxed layout. Disable this if you want the slider to stay within the theme's boxed container.

Full Size

Mode

Select the sizing behavior for the full-size slider:

• Normal: Standard fullscreen slider that covers the entire viewport.
• Hero Scene: Creates a hero scene effect that intelligently resizes the slider to fill the remaining screen space below other elements, such as your website's header.
• Fit to parent height: The slider will adjust its height to match its parent container, which can be useful within complex theme structures.

Fit to screen width

When enabled, the slider will always have the same width as the viewport. Disable this to have it fit within your theme's boxed layout container.

Advanced Settings

To access these settings, you must first enable the "Show Advanced Settings" toggle in the top-right corner of the editor.

Maximum responsive ratio

When the slider scales down, this ratio prevents layers from becoming overly large. A value of '1' will prevent layers from ever scaling up beyond their original size.

Move the slider by

This advanced feature allows you to use JavaScript to move the slider's HTML to a different part of the page. You can select a jQuery manipulation method (e.g., 'prepending to', 'appending to', 'inserting before', 'inserting after') and a target CSS selector.

Clip slide transition

Choose whether to hide content that animates outside the slider's boundaries during a slide transition. You can clip the overflow on the horizontal axis, vertical axis, both axes, or not at all.

Prevent slider clipping

This setting (available in Full Width & Full Size modes) helps ensure that the theme does not cut off parts of the slider when used in a boxed layout.