The layout of the product page is unlimited, create one suit for your business, oh, not one, as many as you want, you can create a product page for every product.
1. Add 3rd party PrestaShop modules to the product page.
Use the PrestaShop module widget to add 3rd-party PrestaShop modules to the product page. Check the Widgets > PrestShop module widget for more info.
If a module adds fields to the buy from, then it may need to be integrated, check #0 on the module integration page.
If a module needs to be updated when the combination is changed, then go to the Advanced tab of the PrestaShop module widget to set the Cache to No, refresh after changing product combinations on the product page.
2. How to add a thumbnail slider for the main slider.
- Add two Product gallery widgets to the product page.
- Set the Type to Thumbs gallery - main for one widget, set the Type to Thumbs gallery - thumbs for another.
3. How to add the product description to the tab.
- The tab is created by the Tab & Megamenu widget, so click to set the Tab widget.
- Change a tab item's title to Description
- Add the Product description to the tab's container.
4. How to display custom tabs out?
5. How to add custom tabs?
- Add it to some selected products.
- Add it to all the products of a selected category.
6. How to remember the viewed products
Add the Viewed products block module (ps_viewedproduct) to the product page by using the PrestaShop Modules widget to remember the viewed products.
Use the Product widget to show viewed products.
If the Viewed products block module is added before the Product widget, then the current product will show in the Product widget; otherwise, the current product won't show right away, it will show when another page is opened.
7. Product details
PrestaShop puts basic product info in a div, the ID of the div is product-details. Some modules retrieve product info from the div, so if you have one of those modules, then use the Custom template widget to add the product-details div to the product page by loading the built-in product-details-data-only.tpl file.Â
8. Gallery images don't show out?
It often happens when the product is imported/copied. Go check the Image type setting under the Layout section in the Product gallery widget, it's probably empty, then set a value to it. The source of the issue is that your site doesn't have the image type that is used on the site where the gallery is imported/copied from.
9. The page template being used isn't the correct one.
The page template is wrong when editing the product description. In this case, you must have multiple product page templates, and some of them are disabled.Â
To fix the issue, set the priority for the disabled ones to 0 (This step is important), and set proper priorities to the other ones.
10. Add a loader while changing combination
Add a loader to indicate that the product info is getting updated, and also block clicks.
Check the demos:
https://elementflow.io/second/109-886-solid-rib-yoga-crop-top.html#/3-size-l/10-color-red
https://elementflow.io/fourth/901-1086-ethereal-blossom.html
Use the JS events feature to achieve that.
- Add a loader; it can be anything. In the above demos, I added a container and put one loading icon inside.
- Go to the container's Advanced tab, find the JS events section.
Set the Type to be Listener,
Set the Listener to Show the widget when the product info is getting updated. - The loader needs to be hidden; it only shows out when the product is getting updated. So add a stsb_display_none classname to the container.
