Where to Add Custom CSS
Go to your Custom CSS page, paste in your CSS, and hit Save. Your styles override the widget's defaults, so you can tweak just about anything.
Always test changes in the Widget Preview before checking your live site.
Common Recipes
Change the Search Button Color
.sr-btn-search {
background-color: #FF5733 !important;
color: #ffffff !important;
}
Change Popup Background Color
This one comes up a lot with Mapbox widgets where the popup can look transparent. Force a solid background:
.sr-popup-content {
background-color: #ffffff !important;
}
Change the Font Family
.storerocket * {
font-family: 'Inter', sans-serif !important;
}
Hide the Radius Selector
.sr-radius-select {
display: none !important;
}
Make the Widget Full Width
.storerocket {
max-width: 100% !important;
width: 100% !important;
}
Change Link and Button Colors
.storerocket a,
.sr-btn {
color: #2563EB !important;
}
Tips
Use your browser inspector. Right-click any part of the widget, choose Inspect, and you'll see the exact class names. This is the fastest way to figure out what to target.
Specificity matters. If your CSS isn't taking effect, add !important or make your selector more specific. The widget's built-in styles can sometimes win the specificity battle.
Save and preview. After pasting your CSS on the Custom CSS page, make sure you click Save. Then check the Widget Preview to confirm it looks right.
Troubleshooting
CSS not applying on the live site. Clear your browser cache with Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac). If your site uses Cloudflare or WP Rocket, clear that cache too.
CSS works in preview but not on my site. Your website's own styles might be overriding yours. Try adding more specific selectors or !important to your rules.
Accidentally broke the widget styling. Delete everything on the Custom CSS page, save, and you're back to defaults.
Questions? Hit us up on live chat.