Smooth Scrollbar + Shopify

[martinatthedesk]

Hey, I have a store on shopify and I need help on how to use the smooth scrollbar in shopify please. I'm just a little bit familiar with coding.

[sadeghbarati]

Can you share your shopify website?

Are you familiar with bundlers like Vite, or Webpack?

[martinatthedesk]

Unfortunately not, sorry, not sure if the company will be ok with that.
I'm not familiar, but I learn fast so I'd appreciate your help very much. The shopify theme's is 'Prestige', if it helps. Thanks in advance.

[sadeghbarati]

What I understand from Shopify Theme, it uses ES Modules and Web Components. more info about ESM Syntax here and here

So you can either use Web Components or simple HTML elements like div
I don't have knowledge about Custom Web Components so I explain with simple HTML elements

import Scrollbar from 'smooth-scrollbar'

document.addEventListener('DOMContentLoaded', () => {
    Scrollbar.init(document.getElementById('scrollbarElement'), {})
})

// or

window.addEventListener('load', () => {
    Scrollbar.init(document.getElementById('scrollbarElement'), {})
})

If you use Web Component you can use Custom Element lifecycles like connectedCallback

[martinatthedesk]

Sorry for sounding maybe dumb, but what exactly should I do? Create a .js file in shopify and paste the code that you sent me? Or create a <script></script> in theme.liquid and paste the code there?

[sadeghbarati]

Sorry I explain it so hard

Search <script type="importmap"> in your project and update your importmap base on this link 👇

JSPM Playground

---

If you can't find any importmap in your project, share at least one of your JS source from Shopify Theme

GL 👋