Slider

The Slider section in Banners displays multiple banner slides that can include images, text, videos, buttons, and countdowns.

This block is designed to create visually engaging homepage presentations or hero sections with flexible layout, animation, and responsive positioning options. You can configure both the general slider behavior and the design of each individual slide. The following table lists all available options in the order provided.

Location: Sections -> Templates -> Banners → Slider

---

Slider - Options Overview

Option	Description
Layout	Defines the general layout appearance and structure of the banner slider.
Top spacing: None, Small, Medium, Normal	Sets vertical spacing above the slider. Use None to align tightly with other sections or Medium/Normal for more breathing space.
Width: Default, Boxed, Wide, Fullwidth	Controls how wide the slider spans across the page. Wide works best for screens of 1440 px and larger. Fullwidth stretches edge-to-edge, while Boxed keeps content centered within a fixed container.
Height: Auto, Landscape 4:3, Landscape 16:9, Fixed, Fullheight	Defines the height of the main image or video on desktop. Fixed and Fullheight apply only to desktop view (screens wider than 577 px).
Desktop fixed height (200–1000 px)	Allows setting a custom fixed pixel height for the desktop version when Height is set to Fixed.
Height mobile: Auto, Landscape 4:3, Landscape 16:9, Fixed, Fullheight	Adjusts banner height for mobile screens. Values Fixed and Fullheight apply to larger mobile devices (width above 1024 px).
Mobile fixed height (200–1000 px)	Defines custom fixed height for mobile devices when the Height mobile option is set to Fixed.
Logo	Group of options related to displaying a logo on top of the slider.
Show logo	Enables or hides the logo on the banner slider.
SVG code	Allows inserting a logo as vector (SVG) code instead of an image. The SVG must include width and height attributes for proper display.
Logo width (10–100%)	Controls the proportional width of the logo inside the banner.
Desktop X (0–100%) / Desktop Y (0–100%)	Positions the logo horizontally (X) and vertically (Y) on desktop screens.
Tablet X (0–100%) / Tablet Y (0–100%)	Sets the logo position for tablet devices.
Mobile X (0–100%) / Mobile Y (0–100%)	Defines the logo position for mobile screens to ensure correct alignment and visibility.
Slider settings	Controls animation and navigation behavior of the slider.
Transition effect: Slide, Fade, Flip	Determines how slides change during transitions. Slide moves horizontally, Fade crossfades between slides, and Flip rotates for a 3D look.
Image parallax	Adds a parallax scrolling effect to images for dynamic depth while sliding.
Enable autoplay	Automatically cycles through slides at the set interval.
Change slides every	Specifies the time interval for autoplay transitions (in seconds). Does not function inside the theme editor; preview live to test.
Desktop navigation: Disable, Dots, Arrows, Dots and arrows	Defines navigation controls visible on desktop. Choose from dots, arrows, both, or none.
Dots alignment	Sets the alignment of navigation dots (left, center, or right).
Arrows alignment	Controls the horizontal or vertical position of navigation arrows on desktop.
Mobile navigation: Disable, Dots, Arrows, Dots and arrows	Controls navigation type on mobile devices for better user interaction.
Dividing line → Show	Displays a separating line between slides or between the banner slider and adjacent sections.
Colors → Base / Accent / Lines	Defines color settings for the dividing line or other decorative slider elements. Base controls background color, Accent and Lines affect highlights and borders.
Media button	Styling controls for video or media play buttons displayed over the slide.
Background	Sets the button background color in default state.
Icon	Adjusts the icon color inside the button.
Background hover	Changes the button background color when hovered.
Icon hover	Sets the icon color on hover interaction.
Slider dots	Controls color appearance of navigation dots.

Slider Item Options (Slide-Specific Settings)

Option	Description
Type: Image / Video	Defines whether the slide contains a static image or a video background.
Image	Uploads the main banner image used for the slide.
Image alignment: Top / Center / Bottom	Positions the image within its container vertically.
Image overlay opacity	Adds a transparent color overlay to darken or lighten the image background, improving text readability.
Content	Content area of the slide (text, headings, button).
Link	Adds a clickable link for the entire slide or button. Can point to collections, products, or custom URLs.
Heading	Main title text displayed on the banner.
Description	Additional supporting text shown below or above the heading.
Heading after description	Changes order of elements — displays the heading below the description.
Button	Adds a call-to-action button linking to a chosen page or product.
Settings	Control typography and responsive positioning of text.
Heading size / Heading size tablet / Heading size mobile	Defines text size for different devices to maintain readability.
Underline on hover	Adds an underline animation when the text or button is hovered.
Desktop X / Desktop Y / Tablet X / Tablet Y / Mobile X / Mobile Y	Positions text block coordinates for each device, allowing full responsive alignment.
Text align: Left / Center / Right	Defines horizontal alignment of text elements.
Description width / Description width tablet / Description width mobile	Controls maximum width of description text on various devices.
Show text box	Displays a background box behind text to improve contrast with images.
Countdown → Show countdown	Adds a countdown timer to the slide, useful for sales or limited-time events.
Colors	Controls color appearance for each content element.
Heading / Heading hover	Sets text color for heading and its hover state.
Description / Description hover	Defines description text color and hover state.
Countdown	Sets countdown text color.
Button	Controls button text and background color.
Show background	Enables a background area behind the text and button.
Background / Background gradient	Sets solid color or gradient background for the text box.
Border / Text	Defines border and text colors for content areas.
Show background on hover	Adds a hover background effect for the text area or button.
Background hover / Background gradient hover	Controls hover background and gradient colors.
Border hover / Text hover	Defines hover styles for borders and text.
Enable shadow	Adds drop shadow to the content box or text for better separation from the background.
Shadow / Shadow hover	Defines shadow color and intensity for normal and hover states.
Box → Background / Background hover	Controls background appearance of the content container.
Other → Image overlay color	Sets overlay color applied over the slide image or video to enhance contrast for text.