Hide the Search Radius or other sections of the Store Locator

While many options offer a simple toggle on or off, you can also hide specific elements of the Store Locator using CSS. By default, the Store Locator displays search controls at the top of the map, including:

Search Radius (Distance)
Search Radius Measurement (Km/Mi)
Filter Tags
Full Search Form / Header

You can hide any or all of these for a cleaner, more minimal layout.

What this CSS can hide

Depending on what you apply, you can hide:

Search Radius
Search Radius Measurement
Filter Tags
Entire Search Form (header + inputs) → store list + map only

Full CSS Snippet (hide individual fields)

/* ============================= */
/* 1. Hide "Search Radius" */
/* ============================= */
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 "Search Radius Measurement" */
/* ============================= */
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 "Filter Tags" section */
/* ============================= */
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. Collapse empty containers */
/* ============================= */
.scasl-see-more-content .form-input:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

CSS Snippet (hide entire search header + form)

Use this if you want to remove the entire search UI and show only:

👉 Store list + Map

/* RosePerl custom CSS (2026-04-15) */
/* Hide search form — show store list + map only */

#scasl-app-container #page-header {
  display: none !important;
}

#scasl-app-container .bh-sl-form-container {
  display: none !important;
}

/* End RosePerl */

Where to add this CSS

You can choose one of the following methods depending on your setup.

Option 1: Add via Theme Editor (Custom CSS)

Go to Online Store → Themes
Click Customize
Open Theme settings
Find Custom CSS
Paste your CSS
Click Save

Option 2: Add via theme files (recommended for full control)

Go to Shopify Admin → Online Store → Themes
Click Edit code
Open:
```
assets/base.css
```
Scroll to the bottom
Paste your CSS (either snippet above)
Click Save

Option 3: Apply only on the Store Locator page (Custom Liquid section)

Use this method if you want the CSS to apply only on the page where the Store Locator is installed.

Go to Online Store → Themes → Customize
Open the page template that contains your Store Locator
Click Add section
Select Custom liquid
Paste:

<style>
/* Hide full search header + form */
#scasl-app-container #page-header {
  display: none !important;
}

#scasl-app-container .bh-sl-form-container {
  display: none !important;
}
</style>