Skip to main content

Enabling the Swiper Manipulation Module

If you're using the Product Video module by Smart Modules in a PrestaShop theme that uses Swiper Slider, you might encounter an issue where the video thumbnail fails to appear alongside your product images.

This usually happens when the Manipulation module from Swiper has not been enabled. The module is essential for allowing dynamic elements (like video slides) to be inserted into the slider at runtime.

🧠 When Do You Need This?​

You may see an error like this in your browser console:

danger

Uncaught TypeError: slider.addSlide is not a function

Why this happens

This error means that the Swiper slider on your theme is not initialized with the Manipulation module, which is required by the Product Video module to dynamically add video thumbnails as slides.

The good news? Fixing this only requires a small edit in your theme's Swiper initialization code.


πŸ› οΈ Step-by-Step: How to Enable the Manipulation Module​

1. Locate the Swiper Initialization Code​

In your theme's files, locate the JavaScript file that initializes the product image slider.
This is typically located in:

/themes/your-theme/assets/js/product.js
/themes/your-theme/js/product.js
/themes/your-theme/js/custom.js

Search for a Swiper setup like this:

var swiper = new Swiper('.swiper-container', {
// your Swiper options
});

2. Add the Manipulation Module​

Inside the Swiper config, find the modules property. Add Manipulation to the list.

Example before:

modules: [Navigation, Pagination],

Update to:

modules: [Navigation, Pagination, Manipulation],

If the modules property doesn’t exist yet, add it like this:

modules: [Manipulation],
Keep existing modules

Don’t remove any existing modules β€” just add Manipulation to the list.


3. Clear PrestaShop Cache​

After saving your changes:

  1. Go to your Back Office
  2. Navigate to Advanced Parameters > Performance
  3. Click Clear Cache

This ensures your updated JavaScript is loaded correctly.


4. Test the Result​

Reload any product page with an attached video.
If everything is correct, the video thumbnail will now appear as part of the product image gallery, fully integrated into the Swiper slider.



πŸ’¬ Still Need Help?​

If you're unsure where this code is located or how to modify it, feel free to contact our support team. You can also send us the file where the Swiper is initialized, and we’ll gladly guide you through the change.


By following these steps, you'll ensure full compatibility between your theme's Swiper slider and the Product Video module by Smart Modules, keeping your video thumbnails working smoothly and avoiding any JavaScript errors.