Swipe-able product images on Origin theme

Store Design
,
1

Hey all,

Currently, on my store’s product page, mobile view, the only option to go through product images is to press on small thumbnails below. Is there a way to enable swipe on the product images? This feature would increase the flow of the page and potentially boost CVR.

norvil_0-1730190827599.png
norvil_0-1730190827599.png750×1358 148 KB

Theme: Origin

Site: https://soul-scape.com/products/blossom

Will be infinitely grateful for any help! :folded_hands:

2

hi @norvil ,

you can use java script library like Flickity or Swiper.js to add swipe functionality.

Include the library in your theme files, usually in theme.liquid or in your product page’s template.

Locate the product image gallery in your product template file (likely in product.liquid or main-product.liquid ) .

Wrap your product image thumbnails in a div and apply the swipe library’s class to it.

Initialize the library with JavaScript on your product page template. Here’s an example using Swiper.js:

Update your CSS to ensure the gallery and swipe elements are displayed correctly on mobile.

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

regards

Akshay Bhatt

3

Hi @norvil ,

This is Amelia from PageFly - a Landing Page Builder App

I think that you can try to use a JavaScript Library like Swiper.js to add swipe functionality. It’s easy to integrate and highly customizable.
There are other ways to update that but this can be hard like:

  1. Theme Customization: Edit your theme’s JavaScript and Liquid files to include the Swiper.js library and initialize it on your product images.
  2. CSS Adjustments: Ensure your CSS is adjusted to accommodate the new swipe functionality, making sure the images display correctly

I hope that my solution works for you.

Best regards,

Amelia | PageFly

4

Hi, Akshay,

I appreciate your input!

Could you please guide me step by step?

I’m a newbie when it comes to code : )

5

hi @norvil ,

I have already told you all step by step.

follow those steps. your issue will be resolved.