Prestashop product videos module For PrestaShop 1.7 and PrestaShop 1.6
It's a popular and fancy way to use videos to present your items to your customers, using videos to present products can increase your conversion rate. Displaying videos on the main image gallery is the most nature way and most accessible way for your customers to watch them.
Seven ways to display videos.
- Display a play button on the main image section, a player will show out when the user clicks on the button. This module will only show one video per product when in this option. This module will be albe to be compatible with all themes with this option.
- Display a play button on the first image and its thumbnail. This module will only show one video per product when in this option. This module will be albe to be compatible with all themes with this option.
- Add video thumnails to the beginning of product thumbnail gallery. If a vidoe does not have thumbnail, then product cover image will be used.
- Add video thumnails to the end of product thumbnail gallery. If a vidoe does not have thumbnail, then product cover image will be used.
- Add play icons to the beginning of product thumbnail gallery. Custom video thumbnails will be shown out.
- Add play icons to the end of product thumbnail gallery. Custom video thumbnails will be shown out.
- Add videos to the top or bottom of product description.
1. By using the two ways of displaying videos, this module is compatible with all themes.
2. By using the rest four ways of displaying videos, this module is compatible with most PrestaShop themes including
- Panda theme v1, v1 for thirtybees and Panda theme v2.
- Transformer theme v4
- PrestaShop 1.7's Classic
- PrestaShop 1.6's Default theme
- Alysum for PrestaShop 1.7
- Warehouse for PrestaShop 1.7
Because of Warehouse theme and Alysum theme don't show thumbnail gallery out, if a product just have one image, so you need to edit one file to make this module work fine.
For Warehosue theme, edit the \themes\warehouse\templates\catalog\_partials\_product_partials\product-thumbnails.tpl file, remove this code gt 1 from it.
For Alysum theme, I guess you need to edit the \themes\alysum\templates\catalog\_partials\product-cover-thumbnails.tpl. file.
Panda theme and Transformer theme have an option to show thumbnail gallery out when a product just have one image, so no need to edit files.
3. This module can't work fine for products which have no images.
4. This module can't work with the displaying thumbnails in "Grid view" option of Transformer theme and Panda theme.
It might not be compatible with some highly customized PrestaShop themes, but we can provide free help for integration, if you can't make it work with your theme, you will get full refund.
Self-hosted .mp4 video and YouTube video.
Self-hosted .mp4 video
- - For short videos, videos less than 1 minute
- - Fit perfect, by using slef-hosted videos, you can crop you videos to be the same ratio/size as product images, so the can fix perfect fine.
- - Don't worry to much of self-hosted are too large to be loaded. For example the size of panda theme's main gallery images is 370x423, the size of 1 minute video in 370x423 and in media quality can be very small about 6M.
- - Self-hosted videos will start to be downloaded when they are started to play, no video frames will be downloaded at the beginning, so your site won't be slowed down, don't worry.
- - Generally videos can be loaded faster than self-hosted videos.
- - No related videos when a YouTube video ends, in order to don't distract your customers.
- - YouTube videos are all in landscape, so in most cases they can't fit well.
If your videos have audio descriptions, then the Multi-language feature will be useful to display different versions in different languages.
Highly customizable video player.
Five predefined skins for video player, beside that there are dozens of options to change colors of play button and video controllers.
Autoplay feature is NOT a guarantee that your videos will autoplay, because of some browsers do not allow autoplay for some reason, sometimes slow network connection may also cause autoplay not working. Know more about autoplay
There is a section called "Advanced settings" on the back office of this module. If this module is not compatible with your theme by default, then advanced settings can be used to make the module be compatible with your theme without editing files, generally don't touch advanced settings, do changes under our instructions.
- "Autoplay", "loop" and "mute" these settings can be different on every video.
- Ability to use YouTube native controllers for YouTube videos.
- Show videos on the Quick view window.
- Custom CSS code
How to install and upgrade.
How to install? Use the "Upload a module" button on "BO > Modules" page to install the module. Here is a video guide: PrestaShop product videos module.
How to upgrade?
Use the "Upload a module" button on "BO > Modules" page to upload the new version to your site, it's the same as how to install, don't worry all your data will be safe, prestashop will just upload updated files to your site, it won't reinstall this module.
How to get support.
If you have any questions with the module, post them out on the prestashop module support forum, we'll help you out.
Videos are often too large to be uploaded via browser, so upload them by via ftp, it's recommended to upload video to the /upload/ folder of your website.
MP4 is the best, because all browsers support MP4. If your video are not in .mp4, then use this great tool to convert them to be in .mp4 MiroVideoConverter.
Because of the dimension of your videos are not the same as your product images, in this case, videos will be placed in middle center, that's why there are spaces on left&right side or top&bottom side. You can change player background to change the color of those spaces.
This may happens if a product has no images, because your "no-image" placeholders are in the wrong dimensions, which causes videos to be in the wrong dimensions, regenerating thumbnails for product images may be able to fix the problem.
You need to set the "Thumbnail container" setting to