Hello Magento Friends,

In this Magento tutorial blog, I am going to illustrate How to make Sidebar Sticky in Magento 2.

Sticky Sidebar is the same as Sticky Header that will be displayed all-time on the display window. Check our previous article where I have discussed How to Add Sticky Header Component in Magento 2.

With a sticky sidebar, you can display important elements of the product including add to cart button, or product options. The customer can freely explore your Magento 2 store and add the product to the cart anytime they wish.

Let’s start with How to make Sidebar Sticky in Magento 2.

Steps to make Sidebar sticky in Magento 2:

Step 1: Create _extend.less file as given below path and add code.

app\design\frontend\Themes\Yourtheme\web\css\source\

Step 2: Create catalog_product_view.xml file as give below path and add code.

app\design\frontend\Themes\Yourtheme\Magento_Catalog\layout\

Step 3: Create sidebar_sticky.phtml file as give below path and add code.

app\design\frontend\Themes\Yourtheme\Magento_Catalog\templates\product\view\

Step 4: Create requirejs-config.js file as give below path and add code.

app\design\frontend\Themes\Yourtheme\

Step 5: Create a sticky-sidebar.js file as give below path and add code.

app\design\frontend\Themes\Yourtheme\web\js\

Check final result as shown below:

sticky sidebar

Conclusion:

Hence, implementing the above steps will help you to make Sidebar Sticky in Magento 2. In case you face any difficulty, leave a comment below. I will be right back to you. Also, do not forget to share the solution with your Magento co-workers. Stay tuned for more updates!

Happy Reading!

[Total: 4   Average: 5/5]