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 #
-
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.
-
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.
-
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.
Align v1.7 is out now! Learn more about our best release yet →