Edit the color and size of the store vertical scrollbar on mobile view at Dawn theme

lyman · ‎09-21-2024

Hello,

I'd like to edit the color and size of the store vertical scrollbar (all pages) on mobile view at Dawn theme

I can do it on PC view but couldn't on mobile

Thank you

Here to help and get help 🙂

Kyle_Poieo-Dev · ‎09-21-2024

1. Access your theme’s code:

In your Shopify admin, go to Online Store > Themes.
Find the Dawn theme and click Customize.
In the top left corner, click on the Theme settings dropdown, then select Edit code.
Open the theme.liquid file located under the Layout section.

2. Insert custom CSS in the <head> tag:

In the theme.liquid file, look for the <head> section.
Add your custom scrollbar CSS inside the <style> tags.

<head>
  <!-- Existing code for head section -->
  
  <style>
    /* Customize the scrollbar */
    ::-webkit-scrollbar {
        width: 12px; /* Set scrollbar width */
    }

    /* Track of the scrollbar */
    ::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Background color of the scrollbar track */
    }

    /* Thumb of the scrollbar (the moving part) */
    ::-webkit-scrollbar-thumb {
        background-color: #888; /* Color of the scrollbar */
        border-radius: 10px; /* Optional: to make it rounded */
    }

    /* Hover effect on the scrollbar thumb */
    ::-webkit-scrollbar-thumb:hover {
        background-color: #555; /* Darker color when hovering */
    }

    /* Scrollbar for Firefox */
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
  </style>

  <!-- Continue with the rest of the head section -->
</head>

Should change the styling of the scrollbars on the site GLOBALLY. Let me know if you need additional help!

-

Need a Shopify developer? Send me an Email

- CEO & Lead Developer at Poieo Dev
- Shopify Design Changes | Shopify Custom Coding | Custom Modifications | SEO | E-Commerce Management
Poieo Dev

lyman · ‎09-21-2024

Thank you very much Kyle
Unfortunately the code works for PC view but not on the mobile view

Here to help and get help 🙂

Kyle_Poieo-Dev · ‎09-21-2024

Can you post a screenshot of what it looks like on mobile? And a bit of description of what you're trying to do? Is this mobile on iOS or android?

-

Need a Shopify developer? Send me an Email

- CEO & Lead Developer at Poieo Dev
- Shopify Design Changes | Shopify Custom Coding | Custom Modifications | SEO | E-Commerce Management
Poieo Dev

lyman · ‎09-21-2024

I want to edit the store vertical scrollbar and make it thicker and change its color on both IOS and android

please check how it looks like now ( normal look)

Here to help and get help 🙂

Kyle_Poieo-Dev · ‎09-21-2024

Looks as though custom scrollbars on iOS 14 and above isn't supported . The only way to do it would be to write custom code to create your own scrollbar, but not possible to style the native scrollbar.

-

Need a Shopify developer? Send me an Email

- CEO & Lead Developer at Poieo Dev
- Shopify Design Changes | Shopify Custom Coding | Custom Modifications | SEO | E-Commerce Management
Poieo Dev

lyman · ‎09-21-2024

Well, actually I have 6s and it have 5.8 ios, tomorrow will check the code on android and see if it will work and let you know

Thank you for you care and support I appreciate it

Here to help and get help 🙂

Kyle_Poieo-Dev · ‎09-23-2024

No problem! Keep us updated on what you find!

-

Need a Shopify developer? Send me an Email

- CEO & Lead Developer at Poieo Dev
- Shopify Design Changes | Shopify Custom Coding | Custom Modifications | SEO | E-Commerce Management
Poieo Dev

lyman · ‎09-24-2024

Hi Kyle, the solution is working only on pc, not on IOS or Android

Hope to get help with this issue as it important for our store

Thank you

Here to help and get help 🙂

Edit the color and size of the store vertical scrollbar on mobile view at Dawn theme