Single product gallery layout different on mobile and desktop ?
-
Hi
I need to have product gallery on single product to be different on desktop and mobile
On desktop : gallery layout = Grid
On mobile : gallery layout = thumbnails bottom
how can i do that ?
thank you
Hello,
Try to Use Theme Presets for Mobile, navigate to Theme Settings > Presets and create a preset specifically for mobile devices and set the condition to custom and choose “Is mobile device”.
In this preset, go to Theme Settings > single product > gallery > choose the gallery layout for mobile.
Here is our documentation on how to use theme presets. https://xtemos.com/docs-topic/theme-settings-presets/
Best Regards,
Thanks a lot it works fine, i was not aware of those presets, very useful
another solution would have been to duplicate product gallery elementor widget, and in widgets settings > advanced > responsive : show one for desktop and show the other one only on mobile
what do you think of this alternative solution ? theme presets is a better solution ?
thanks
Hello,
Yes, your alternative method using Elementor’s responsive visibility settings would also work fine, it’s a valid approach if you’re building the product layout entirely in Elementor.
Otherwise, if you are using default WooCommerce pages, I suggest you use the theme preset feature for this, Because It’s managed globally through the theme settings, so it doesn’t require manual duplication of widgets.
Best Regards,
Hi
Ok and as we use Elementor, what would be the method you recommend ? (and why)
Hello,
If you are using Elementor with our custom layout, then use the Elementor’s responsive option for this.
Best Regards
.
