Skip to main content

Hide the Search Radius or other sections of the Store Locator

While many options offer a simple toggle on or off we also have simple ways to hide certain elements of the store locator map page using css

Updated over 3 weeks ago

By default, Store Locator will display common elements at the top of your map with selections that customers can make for their search. This section includes the option to select the Search Radius, Search Radius Measurement and Filter Tags

The options for can be removed to give a more minimal and personalized look to your Store Locator page.

To hide the search radius and results dropdown menus, please follow the steps below.

Here’s the complete CSS to hide all of the following sections cleanly and seamlessly:

  • 🟣 “Search Radius”

  • 🟣 “Search Radius Measurement”

  • 🟣 “Filter Tags” (the checkboxes list)

✅ Full CSS Snippet

/* ============================= */
/* 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 any empty .form-input containers */
/* ============================= */
.scasl-see-more-content .form-input:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

💡 Where to Add

You can place this CSS:

  • At the bottom of your main stylesheet (theme.css, custom.css, or storelocator.css),

  • 🧭 How to Add This CSS in Shopify

    There are two reliable methods depending on how you manage your theme.

    🩵 Option 1: Add via Theme Editor (for quick changes)

    1. In your Shopify admin, go to Online Store → Themes.

    2. Next to your live theme, click Customize.

    3. In the left sidebar, open the Theme Settings (gear icon ⚙️).

    4. Scroll down to Custom CSS (if your theme supports it — many do, like Dawn).

    5. Paste the CSS snippet above directly into the Custom CSS box.

    6. Click Save (top right).

    7. Refresh your storefront — the Search Radius, Measurement, and Tags sections should now be hidden.

    💚 Option 2: Add via theme files (for permanent or code-level edits)

    1. From your Shopify admin, go to
      ​Online Store → Themes → Actions → Edit Code.

    2. In the left sidebar, open:
      ​/assets/theme.css, base.css, or custom.css — depending on your theme.

    3. Scroll to the bottom of the file, then paste the CSS block above.

    4. Click Save.

    5. Visit your storefront and refresh to confirm.

    🧩 Tip: If your theme uses a different stylesheet (e.g. main.css or storelocator.css), it’s totally fine — just paste the snippet in that one instead.

    ⚡ Optional: Test & Debug

    • If you still see the fields, clear your browser cache or use a private/incognito tab.

    • You can also inspect the page (Right-click → Inspect) to confirm the scasl- IDs exist — Shopify sometimes caches older versions of embedded apps.
      ​
      ​
      ​

Related Articles
Working with Tags on the Store Locator App
Did this answer your question?