Hide Search Radius, Filters, or Sections (With Visual Examples)
Learn how to remove specific elements from your Store Locator interface—like the Search Radius, Distance Unit selector, or Tag filters—using simple CSS.
This is useful when you want a cleaner, more minimal search experience for customers.
What You Can Remove
On the default locator (as shown in the live demo), the top section includes:
Search Radius dropdown
Distance Unit selector (KM / Miles)
Tag filters (with “More / Less” toggle)
This guide shows how to hide each one individually—or all together.
Visual Examples
1) Hide Search Radius
Removes the “Search Radius” dropdown from the search form.
Before: Radius dropdown visible
After: Cleaner search input only
label[for="scasl-radius-container"],
#scasl-radius-container {
display: none !important;
visibility: hidden !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
2) Hide Distance Unit (KM / Miles)
Removes the unit selector next to the radius field.
Before: KM / Miles selector visible
After: Unit selector removed
label[for="scasl-lengthUnit"],
#scasl-lengthUnit {
display: none !important;
visibility: hidden !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
3) Hide Tag Filters
Removes the Tags filter section entirely.
Before: Tag filters with “More / Less” toggle
After: No filter section displayed
label[for="scasl-tag-list-container"],
#scasl-tag-list-container,
.bh-sl-filters-container.scasl-tag {
display: none !important;
visibility: hidden !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
4) Minimal Layout (Hide Everything)
Combine all three for a streamlined locator header.
This also removes empty spacing left behind after hiding elements.
label[for="scasl-radius-container"],
#scasl-radius-container,
label[for="scasl-lengthUnit"],
#scasl-lengthUnit,
label[for="scasl-tag-list-container"],
#scasl-tag-list-container,
.bh-sl-filters-container.scasl-tag {
display: none !important;
visibility: hidden !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
.scasl-see-more-content .form-input:empty {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
Result:
A simplified top section with only the essential search input.
Additional Customization: Hide Map & Show List Only
You can configure RP Promap to display only the store list view without showing the map. This is useful for directory-style layouts or when embedding in tighter page designs.
Use Case
Cleaner, list-only UI
Mobile-optimized layouts
Embeds where maps are not needed
CSS Implementation
Add the following CSS to your site or custom styling area:
.scasl-location-list { width: 100% !important; } .scasl-map { display: none; }What This Does
Expands the store list to full width
Completely hides the map component
Result
Users will only see a scrollable list of stores
Layout behaves like a directory instead of a map interface
Where to Add This Code
Add your CSS in one of the following places:
Shopify
Online Store → Themes → Customize → Theme Settings → Custom CSS
Or inside your theme file
theme.cssbase.cssor
theme.liquidinside<style>tags
Tips
You can combine or remove only what you need—each section works independently.
Always use
!importantto ensure the locator styles are overridden.If spacing looks off after hiding elements, use the cleanup rule included in the minimal example.
When to Use This
Use these tweaks when you want to:
Simplify the UI for mobile users
Remove unnecessary filters
Create a more branded, focused search experience
Match a minimal storefront design
Need More Customization?
You can continue customizing your locator with:
Map color themes
Custom markers
Layout styling
👉 See related guides in the RP Promap Help Series
© Rose Perl Technology