A Shopify store owner discovered their shop page was missing the vertical scrollbar, making navigation difficult for customers.
Root Cause:
The theme’s CSS contains code that hides the scrollbar while still allowing content scrolling. This is likely a deliberate theme design choice rather than accidental deletion.
Solutions Provided:
Multiple support teams offered similar fixes:
theme.css or theme.scss file and modify the scrollbar-related CSS code</head> tag in the theme.liquid filetheme.cssAll solutions involve accessing the theme code through: Online Store > Theme > Edit Code
Resolution:
The issue was successfully resolved. The store owner confirmed the solution worked and expressed gratitude to the helpers.
Hi,
I’m trying to bring back the vertical scroll bar to my shop page and it does not show on the website at all. I wonder if I may have deleted something when selecting a theme of if it’s just a part of this specific theme and needs to be added.
I will appreciate your help. I’m trying to add a simple scroll bar so customers will be able to scroll down the products and blogs in an easier way.
Thank you!
Hi @Tayloa , You can solve this problem by following steps:
1- Online Stores > More action > edit code > Find theme.css or theme.scss file
2- Search for the following code inside your file
and replace it with the following
Kindly accept the solution, if this helps you.
Hello @Tayloa
It’s GemPages support team and glad to support you today.
Your store does not show vertical scroll bar because this code code from theme (hide scroll bar but still allow to scroll content on page)
If you want to show vertical scroll bar, Please check out my suggestion below:
Go to Online Store → Theme → Edit code → Layout
Open file theme.liquid then add this code to above the tag
If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team
Hi [email removed]Tayloa,
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.css.
Step 3: Paste the below code at bottom of the file → Save
::-webkit-scrollbar{
display:block !important
}
Hope my solution works perfectly for you!
Best regards,
Victor | PageFly
perfect, thank you!!
Thank you!!
