Product card slideshow settings

Overview #

The Product card slideshow settings control the overall appearance and behavior of product slideshows across the site. These settings are essential for defining how product slideshows are displayed, providing a cohesive look and feel throughout the shop. While these settings are generally applied universally, they can be customized at the section or block level for more specific needs.

Key components and functionality #

Animation style

The animation style setting determines the transition effect used between slides in a slideshow. This setting allows you to choose between different animation styles to enhance the visual appeal of your product displays.

• Options:
  • Default: default
  • Fade: fade
• Default: default

Autoplay slideshow

The autoplay slideshow setting enables the slideshow to automatically transition between slides without user interaction. This feature is useful for keeping the content dynamic and engaging.

• Default: false

Autoplay delay

The autoplay delay setting specifies the time interval between automatic slide transitions when autoplay is enabled. This allows you to control the pacing of the slideshow.

• Range: 0 to 10 seconds
• Default: 4 seconds

Animation speed

The animation speed setting controls the speed of the transition animation between slides. This affects how quickly or slowly the slides change.

• Range: 0.1 to 5 seconds
• Default: 0.8 seconds

Loop slides

The loop slides setting enables the slideshow to loop back to the first slide after reaching the last one, creating a continuous viewing experience.

• Default: false

Show navigation

The show navigation setting adds navigation controls to the slideshow, allowing users to manually navigate between slides.

• Default: true

Show pagination

The show pagination setting displays pagination indicators, showing the number of slides and the current slide position. This feature is not shown when the fade animation style is used.

Pagination style

The pagination style setting allows you to choose the style of pagination indicators used in the slideshow.

• Options:
  • Dynamic: dynamic
  • Fraction: fraction
  • Progress bar: progressbar
  • Scrollbar: scrollbar

Desktop slideshow column count

The desktop slideshow column count setting specifies the number of product cards displayed per slide on desktop devices. This allows for customization of the slideshow layout to suit different screen sizes.

• Range: 1 to 5
• Default: 1

Mobile slideshow column count

The mobile slideshow column count setting specifies the number of product cards displayed per slide on mobile devices. This ensures the slideshow is optimized for smaller screens, allowing for different settings compared to desktop for better user experience.

• Range: 1 to 5
• Default: 1

Usage examples #

1. Creating a dynamic product showcase: You might consider enabling autoplay and setting a moderate autoplay delay to create a dynamic product showcase that automatically cycles through featured products, capturing the attention of visitors.

2. Customizing slideshow appearance: Consider using the animation style and speed settings to match the slideshow transitions with your brand's aesthetic. For a smooth and subtle effect, you might consider choosing the fade animation with a slower speed.

3. Optimizing for different devices: Adjust the column count settings to ensure that the slideshow displays an appropriate number of product cards on both desktop and mobile devices, providing a consistent user experience across platforms.