Step 1: Convert the Gallery into a Slider

1. Return to the app dashboard.
2. Open the Settings tab.
3. Enable Pagination.
4. Set Maximum Visible Rows to 1.
5. • This places all images in a single row, enabling slider functionality.
5. Save your changes.
6. Confirm the gallery now appears as a single-row slider.

Step 2: Add Navigation Arrows

1. Open the Nav-Filter-Sort tab.
2. Drag the Right Arrow into the right navigation drop zone.
3. Drag the Left Arrow into the left navigation drop zone.
4. Save the gallery.
5. Refresh the live preview to verify the navigation arrows are working.

Step 3: Enable Autoplay and Touch Swipe

1. Return to the Pagination settings.
2. Enable Autoplay to automatically cycle through slides.
3. Enable Touch Swipe to allow swipe gestures on touch devices.
4. Save the gallery.
5. Refresh the storefront to confirm autoplay is functioning.

Step 4: Change the Slider Animation

1. Open the Animation tab.
2. Choose an animation effect.
3. Select Horizontal Slide (or any preferred animation).
4. Save the gallery.
5. Refresh the live preview to verify the new animation.

Choose the animation that best matches your store’s design.

Optional Step 5: Adjust Image Spacing

1. Return to Settings tab.
2. Set Item Spacing to approximately 10–15 pixels.
3. Save the gallery.
4. Refresh the live preview.

This adds spacing between images for a cleaner appearance.

Optional Step 6: Make the Slider Full Width

1. In Grid Settings, change Layout Box to Full Width.
2. Save the gallery.
3. Refresh the storefront.

Your slider will now span the full width of the page.

Updated on: 19/10/2026