Slideshow

A dynamic section to display multiple images or slides in a carousel format. Each slide can include text and a button, perfect for showcasing multiple promotions or featured products.

Adjust Slideshow section

These settings allow you to customize the appearance and functionality of the slideshow section, ensuring it fits seamlessly within your store’s design and effectively showcases your images or media content.

Within the Slideshow settings, the following fields can be adjusted:

Desktop media size

• Choose the size of the media displayed on desktop devices. Options include:
  • Small: Small-sized media.
  • Medium: Medium-sized media.
  • Large: Large-sized media.

Media is automatically optimized for mobile devices.

Layout

• Container: Display the slideshow within a container, maintaining margins on the sides.

• Full width: Display the slideshow full width, extending to the edges of the screen.

Autoplay

• Check this box to enable the slideshow to play automatically without user interaction.

Show arrows

• Check this box to display navigation arrows on the slideshow, allowing users to manually navigate between slides.

Show bullets

• Check this box to display navigation bullets on the slideshow, indicating the number of slides and the current slide.

Bullets style

• Choose the style for the navigation bullets. Options include:
  • Lines: Bullets displayed as lines.
  • Dots: Bullets displayed as dots.

Bullets color

• Choose the color for the navigation bullets. Options include:
  • Dark: Dark-colored bullets.
  • Light: Light-colored bullets.

Section padding

• Top padding: Adjust the space at the top of the slideshow section. Measured in pixels (px), this allows you to control the vertical spacing above the section for better layout and design consistency.

• Bottom padding: Adjust the space at the bottom of the slideshow section. Measured in pixels (px), this allows you to control the vertical spacing below the section for better layout and design consistency.

Custom CSS

• Add custom CSS to further style and customize the slideshow section according to your specific design needs and preferences.

Available blocks

Slide

Within the Slide, the following fields are available:

Image

• Select image: Click here to upload or select an image for the slide.

• Explore free images: Browse and select from free images available for use in the slide.

Heading

• Enter a heading for the slide. This heading will be displayed prominently on the slide (e.g., "Image slide").

Subheading

• Provide a subheading for the slide. This text will provide additional context or details related to the heading (e.g., "Tell your brand's story through images").

Content

• Provide the main text content for the slide. Use the text editor tools to format the text, including bold, italic, lists, and links. This section can be used for descriptions or any relevant information.

Button label

• Enter the text for the button displayed on the slide. If you leave this field blank, the button will be hidden.

Button link

• Set the URL or page the button will link to. You can paste a link or search for a specific page within your store.

• Open link in new window: Check this box if you want the link to open in a new browser window or tab.

Text theme

• Choose the theme for the text color on the slide. Options include:
  • Dark: Dark text on a light background.
  • Light: Light text on a dark background.

Image overlay opacity

• Adjust the opacity of the image overlay. Measured as a percentage (%), this allows you to control the transparency of the overlay on the slide image.