0

I want to make the product detail into 2 Columns with images at the side and description on the other side...

I want the right side containing the detail to be sticky while scrolling and left side containing the images ayou

3

As per your requirement i suggest set your product page layout as 1 column, set your HTML code in left (it contains Images section) & right (product details information) container.

For sticky right part i suggest go with Sticky-Kit JavaScript, below is the source code from GitHub & working demo example from jsFiddle. Kindly check below URLs.

Source Code : Sticky Kit GitHub source

Working Demo : jsfiddle working example

4
  • Do I need to include Jquery in my Magento theme or by default It is included – Anonymous Record Feb 27 '20 at 13:49
  • You can use default theme's jQuery, but check that jQuery version it should be latest one and also include sticky-kit.js in your theme web directory. – Nayan Baraiya Feb 28 '20 at 4:28
  • Failed to load resource: the server responded with a status of 403 (Forbidden) sticky.js:2 Uncaught ReferenceError: $ is not defined at sticky.js:2 jquery.sticky-kit.js:12 Uncaught TypeError: $ is not a function at jquery.sticky-kit.js:12 at jquery.sticky-kit.js:251 pub/static/version1582812171/frontend/Pronko/consulting/en_US/fonts.googleapis.com/css?family=Creepster:1 Failed to load resource: the server responded with a status of 403 (Forbidden) facing these errors – Anonymous Record Feb 28 '20 at 6:30
  • That must be jQuery loading dependency issue, try to load jQuery library before sticky js. there maybe jQuery conflict issue you may face. – Nayan Baraiya Feb 28 '20 at 11:45
1

@Nayan Baraiya, Thanks for the reference link, i exactly want this type of sticky part in my detail page. KUDOs to you.

1
  • Thank you, let me know if you need any help. – Nayan Baraiya Feb 27 '20 at 9:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.