Articles on: Grid Settings

How to Transform Your Gallery into a Slider in Mobile devices

How to Transform Your Gallery into a Mobile Slider


This guide walks you through converting your existing Essential Grid Gallery into a smooth, swipeable slider optimized for mobile devices — complete with navigation arrows, autoplay, and slide animations.



Prerequisites


Before you begin, make sure you have:


  • An existing gallery already created in the Essential Grid Gallery app
  • If you haven't created a gallery yet, follow our Add Essential Grid Gallery Images tutorial first



Part 1 — Enable Pagination & Set Mobile Row



From your Shopify Admin, open the Essential Grid Gallery app to access your gallery dashboard.



Step 2: Go to the Grid Settings Tab


Click the Settings tab at the top of the gallery editor.



Step 3: Enable Pagination


Scroll down in the Grid Settings panel and locate the Pagination option. Toggle or select the Enable option to turn on pagination for your gallery.


[!IMPORTANT]
Pagination must be enabled for the slider functionality to work on mobile devices.



Step 4: Enable Max Row Mobile


Locate the Max Row Mobile option (just below Pagination) and enable it. Set the maximum visible row value from 3 to 1.


This ensures only one image is displayed per row on mobile, which is the key setting that turns your gallery into a slider.




Click the Save Gallery button to save your changes.




Step 6: Check the Live Preview


Open the Live Preview to see your changes. At this point, you'll notice that only one image is displayed, but the slider may not be fully functional yet — this is expected. We'll fix it in the next steps.



Part 2 — Add Slider Navigation Arrows


Step 7: Go to the Nav-Filter-Sort Tab


Navigate to the Nav-Filter-Sort tab in the gallery editor.



Step 8: Add Left and Right Arrows


Locate the Left Arrow and Right Arrow controls. Drag and drop them into their designated Left and Right Drop Zones to add navigation arrows to your slider.


[!TIP]
The navigation arrows allow users to manually swipe through images on mobile. Without them, the slider won't have visible controls.




Click the Save Gallery button to save your changes.




Step 10: Check the Live Preview


Open the Live Preview again. The slider should now be working, and the left/right control arrows should be visible on mobile devices.



Part 3 — Configure Autoplay & Swipe Settings


Step 11: Go Back to Settings


Navigate back to the Settings tab.



Step 12: Enable Autoplay


Scroll down and locate the Autoplay option. Toggle it to Enable so the slider automatically cycles through images.



Step 13: Adjust Autoplay Timing


Set the autoplay timing (in milliseconds) to control how long each slide is displayed before transitioning to the next one.


[!TIP]
A value of 3000–5000 ms (3–5 seconds) works well for most galleries. Shorter intervals may feel rushed, while longer intervals keep viewers engaged.



Step 14: Enable Swipe


Enable the Swipe option to allow mobile users to swipe through images with touch gestures. There are several swipe options available — feel free to experiment with them to find the style that fits your store best.





Click the Save Gallery button to save your changes.



Part 4 — Choose a Slider Animation


Step 16: Go to the Animation Tab


Navigate to the Animation tab in the gallery editor. You'll find a variety of slider animation effects to choose from.



Step 17: Select an Animation Effect


Browse the available animation options and select one. For example, choose Horizontal Slide for a classic left-to-right sliding effect.


Other animation effects are available for you to explore and try out.



Step 18: Save and Preview


Click the Save Gallery button one final time, then open the Live Preview to verify everything is working. Your gallery should now display as a fully functional slider on mobile devices with:


  • ✅ Single-image view per row
  • ✅ Left/right navigation arrows
  • ✅ Autoplay with custom timing
  • ✅ Touch swipe support
  • ✅ Smooth slide animation



Troubleshooting


Issue

Solution

Slider not working after enabling pagination

Make sure Max Row Mobile is set to 1 and the gallery is saved.

No navigation arrows visible

Go to the Nav-Filter-Sort tab and drag the left/right arrows into their Drop Zones.

Autoplay not starting

Ensure autoplay is enabled in Grid Settings and that you have navigation arrows added first.

Swipe not responding on mobile

Verify the Swipe option is enabled in Grid Settings and test on an actual mobile device (not just browser resize).

Animation not applying

Confirm you selected an animation in the Animation tab and clicked Save Gallery.



Summary


With just a few configuration changes across Grid Settings, Nav-Filter-Sort, and Animation tabs, you've transformed your standard gallery into a sleek, mobile-friendly slider. Explore more features and animation options to make your content stand out!



Need Help?


If you run into any issues, please contact our support team and include:

  • Your store URL
  • The Gallery ID you're using
  • A screenshot or screen recording of the issue

Updated on: 06/08/2026