I want to show related products and/or products to upsell in a thumbnail slider on product page. I am using a child theme derived from Luma.
How should I achieve this? Is there anyway to integrate Flex slider in my theme?
magento2related-productssliderup-sells
I want to show related products and/or products to upsell in a thumbnail slider on product page. I am using a child theme derived from Luma.
How should I achieve this? Is there anyway to integrate Flex slider in my theme?
Best Answer
I assume that you are using a custom theme name Vendor_customtheme
You can follow the below steps to implement
OwlCarousel
Slider forRelated Product
in the product detail page.Note: Below example describe
OwlCarousel
implementation forRelated Products
in the product detail page.You need to update
app/design/frontend/Vendor/customtheme/Magento_Theme/Magento_Catalog/templates/product/list/items.phtml
file to implementOwlCarousel
forRelated Products
.Step 1: Download OwlCarousel from here: Owl Carousel
Please put all
OwlCarousel
JS filesowl.carousel.min.js
andowlcarousel.js
in this directoryapp/design/frontend/Vendor/customtheme/Magento_Catalog/web/js
After that put all
OwlCarousel
CSS filesowl.carousel.css
andowl.theme.default.css
etc... in this directoryapp/design/frontend/Vendor/customtheme/web/css/owlcarousel/assets
Step 2: Include
OwlCarousel
CSS files usingdefault_head_blocks.xml
layout XML file.For that create
app/design/frontend/Vendor/customtheme/Magento_Theme/layout/default_head_blocks.xml
file.You can check default_head_blocks.xml file code as below.
Step 3: Include
OwlCarousel
JS usingrequirejs
config file.For that create file
app/design/frontend/Vendor/customtheme/Magento_Catalog/requirejs-config.js
file.You can check requirejs-config.js file code as below.
Step 4: Update
items.phtml
file.Copy file
/vendor/magento/module-catalog/view/frontend/templates/product/list/items.phtml
and paste hereapp/design/frontend/Vendor/customtheme/Magento_Theme/Magento_Catalog/templates/product/list/items.phtml
Now update the
item.phtml
file to implementOwlCarousel
You can check items.phtml file code as below.
Step 5: Now run following CLI commands from your Magento root.