What is a Scrollbar and Cursor Widget?
Customizing your store’s scrollbar and cursor can significantly enhance the user experience and reflect your brand’s identity. With Debutify Theme, you can easily modify scrollbar styles, colors, and thickness, as well as upload a custom cursor icon for a unique, on-brand browsing experience.
Disclaimer for Using Debutify Theme Widgets
When using widgets in the Debutify Theme, you are fully responsible for their configuration, content, and compliance with applicable laws and regulations. Debutify is not liable for any outcomes or consequences resulting from their use.
For the full disclaimer and additional details, please read the complete article here: Disclaimer for Using Debutify Theme Widgets.
Your commitment to transparency and ethical practices is crucial for building trust and maintaining a compliant online presence.
How to Enable/Disable Scrollbar and Cursor Widget?
The enablement or disablement of widgets depends on the version of your Debutify Theme. Please follow the correct guide based on your theme version:
How to Enable or Disable the Debutify Theme Widgets on versions 7.1 and above?
STEP 1
Access your Shopify Admin's Theme Library to open the theme customizer.
STEP 2
Click on the Theme settings icon.
STEP 3
Scroll down and locate the Debutify Widgets tabs. You’ll find the following categories:
Debutify Free Widgets
Debutify Paid Widgets
Expand the relevant widget category by clicking on the arrow next to the tab name.
STEP 4
To enable a widget, check the box next to the widget name. To disable it, simply uncheck the box.
How to Enable or Disable the Debutify Theme Widgets between versions 6.0 and 7.0.2?
STEP 1
Sign in to your Debutify Theme Login Portal at platform.debutify.com, and navigate to the Widgets section.
STEP 2
Choose your widget from the Widgets menu, either by searching or filtering by category.
STEP 3
To enable or disable your chosen widget, click on the toggle switch.
STEP 4
To enable the widget, confirm by clicking Enable in the confirmation message that appears.
To disable the widget, confirm by clicking Disable in the confirmation message that appears.
Note: Enabling or disabling widgets on Debutify Login Portal is available only in Debutify Theme versions 6.0 to 7.0.2. Please make sure your theme is within this version range to access this feature.
How to Manage Scrollbar and Cursor Settings?
STEP 1
Access your Shopify Admin's Theme Library to open the theme customizer.
STEP 2
Go to Theme settings, scroll down, and then locate Scrollbar & Cursor.
STEP 3
Under Desktop scrollbar and style, select your preferred style:
Default: Uses the browser’s default scrollbar.
Customized: Allows you to adjust colors, width, and shape.
💡 Pro Tip: If you want a seamless brand experience, use Customized to match your store’s color palette and aesthetic. Stick with Default if you prefer a consistent look across different browsers and devices.
STEP 4
When using Customized scrollbar style, locate the Color picker options. Choose your desired colors for the scrollbar thumb (the draggable part) and the scrollbar track (the background channel).
💡 Pro Tip: Use brand colors that stand out but don’t distract from your products. A subtle contrast between the thumb and track improves usability while maintaining a polished look.
STEP 5
Use the slider to set the scrollbar width.
💡 Pro Tip: Keep the scrollbar width reasonable—too thin can make it hard to click, too thick may be visually overwhelming. A moderate width ensures functionality and maintains a clean design.
STEP 6
Go to Scrollbar edge shape and select Square or Rounded edges.
💡 Pro Tip: Rounded edges convey a more modern, friendly feel, while square edges appear sleek and professional. Pick the shape that best aligns with your brand’s personality.
STEP 7
Under Custom cursor, click to upload your preferred icon. Use a high-resolution image (at least 50x50) in SVG, PNG, JPG, JPEG, or WEBP format.
💡 Pro Tip: A custom cursor can add character to your site. Choose an icon that’s simple, recognizable, and on-brand. Avoid overly complex shapes that may confuse users.
STEP 8
Use the slider to modify the cursor’s size.
💡 Pro Tip: Keep the cursor size moderate. Too large can distract shoppers, too small may be hard to see. Aim for a balanced size that’s functional and complementary to your store’s design.
Final Step: Save Your Changes
After completing your customizations, click Save to apply the changes.