I would like to add mobile image swipe to my product pages.

Only on the product page where you see the gallery slider beneath and the product image above I want users to be able to drag their finger across the main product image and see the next one in the list from the carousel while also being able to use the carousel.

I need to either modify the existing product image code to load these images up and allow swipe through jQuery OR possibly embed an existing jQuery library to handle this.

I have found 1 link and dont know where to put all these codes


Can you help me?

1 Answer 1


You indeed need JavaScript to get this done. Just pick the one that suits you best. Upload the JavaScript file to your theme and add the file to your theme via your layout.xml file.

After that you'll need to modify the app/design/frontend/[package]/[theme]/catalog/product/view/media.phtml file, so it can be used for the jQuery/JavaScript functionality you're using. Since this differs per jQuery extension, you'll have to get the source code from the extension's webpage.

If you want to make it possible to easily reuse the feature in other projects, it might be a good idea to create a Magento extension for it, so you can configure stuff.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.