Slideshow banner settings

Setting Description
Color scheme

Apply Color Scheme:

  • After creating your color schemes in theme settings — 'Colors' tab, you can apply them to different sections of your store.
  • In each section or block, you'll see a Color scheme dropdown.
  • Select the appropriate color scheme for each section, ensuring consistency with your brand's identity.
Layout 
  • Full width: The image banner will span the full width of the page.
  • Grid: The image banner will be sized to match the container of other sections.
Slide height

Choose slide height from the dropdown list:

  • Adapt to first image: All images in the carousel will match the height of the first image.
  • Small
  • Medium
  • Large
Loop

The Loop setting makes your slider scroll continuously, creating a seamless, infinite effect.

For the loop function to work correctly, you need at least 1.5 times the number of slides as the number of visible slides.

Example:

In our demo store, we want to display 3 visible slides (1 whole slide and a portion of 2 nearby). To achieve this, we added 5 slides to ensure proper functionality.

How to Adjust the Portion of the Slide to Show:

Combine this option with the Slides per View setting.
Auto-rotate slides (if enabled) Set the carousel to play automatically.
Auto-rotate slides (if disabled) The images are static, and you can rotate slides using slideshow navigation (arrows).
Slides per view Controls how many slides are fully visible in the viewport at the same time.
Change slides every

Adjust the interval at which slides automatically change.

The range is from 5 to 9 seconds.
Desktop content position

Middle:

  • Left: Aligns content to the middle-left.
  • Center: Centers the content in the middle of the banner (most commonly used for balance).
  • Right: Positions the content in the middle-right area of the banner.

Animations


Setting Description
Image behavior 

Choose how the image behaves:

  • None
  • Ambient movement: This creates a subtle, slow movement effect, making the image appear dynamic.

Mobile layout 


Setting Description
Show content below images on mobile Enabling this option will display text after the image on mobile screens. Disabling it will place the text directly on top of the image on mobile screens.

Accessibility


Setting Description
Slideshow description Enhance accessibility by providing a description for your slideshow, catering to visually impaired customers.

Section padding


Setting Description
Top padding The 'Top padding' setting allows you to adjust the amount of space at the top of the section using a slider. 
Bottom padding The 'Bottom padding' setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section. 
Top padding mobile The 'Top padding mobile' setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the section for mobile devices.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us