Masquer le rayon de recherche ou d'autres sections du localisateur de magasins

Si de nombreuses options permettent simplement d'activer ou de désactiver une fonctionnalité, nous proposons également des moyens simples de masquer certains éléments de la page de la carte de localisation des magasins à l'aide de CSS

Par défaut, le localisateur de magasins affiche en haut de votre carte des éléments courants, avec des options que les clients peuvent sélectionner pour effectuer leur recherche. Cette section comprend les options suivantes : « Rayon de recherche », « Unité de mesure du rayon de recherche » et « Filtres ».

Vous pouvez désactiver ces options pour donner un aspect plus épuré et personnalisé à votre page « Localisateur de magasins ».

Pour masquer le rayon de recherche et les menus déroulants des résultats, veuillez suivre les étapes ci-dessous.

Voici le code CSS complet permettant de masquer toutes les sections suivantes de manière propre et fluide:

• 🟣 « Rayon de recherche »
• ��� « Mesure du rayon de recherche »
• ��� « Balises de filtrage » (la liste des cases à cocher)

---

✅ Extrait CSS complet #

/* ============================= */
/* 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;
}

---

💡 Où ajouter #

Vous pouvez ajouter ce code CSS :

• À la fin de votre feuille de style principale (theme.css, custom.css, ou storelocator.css),
• 🧭 Comment ajouter ce CSS dans ShopifyIl y a deux méthodes fiables selon la façon dont vous gérez votre thème.🩵 Option 1 : Ajouter via l'éditeur de thème (pour des modifications rapides)
  1. Dans votre interface d'administration Shopify, rendez-vous dans Boutique en ligne → Thèmes.
  2. À côté de votre thème actif, cliquez sur « Personnaliser ».
  3. Dans la barre latérale gauche, ouvrez les paramètres du thème (icône en forme d'engrenage ⚙️).
  4. Faites défiler vers le bas jusqu'à « CSS personnalisé » (si votre thème le prend en charge — c'est le cas de nombreux thèmes, comme Dawn).
  5. Collez le bout de code CSS ci-dessus directement dans le champ « CSS personnalisé ».
  6. Cliquez sur « Enregistrer » (en haut à droite).
  7. Actualisez la page d'accueil de votre boutique : les sections « Rayon de recherche », « Dimensions » et « Étiquettes » devraient désormais être masquées.
  💚 Option 2 : Ajouter via les fichiers du thème (pour des modifications permanentes ou au niveau du code)
  1. Dans votre interface d'administration Shopify, rendez-vous dans
     Boutique en ligne → Thèmes → Actions → Modifier le code.
  2. Dans la barre latérale gauche, ouvrez :
     ​/assets/theme.css, base.css, ou custom.css — en fonction de votre thème.
  3. Faites défiler jusqu'au bas du fichier, puis collez le bloc CSS ci-dessus.
  4. Cliquez sur Enregistrer.
  5. Rendez-vous sur votre boutique en ligne et actualisez la page pour vérifier.
  🧩 Conseil : Si votre thème utilise une feuille de style différente (par exemple main.css ou storelocator.css), ce n'est pas grave — il suffit de coller le bout de code là-bas à la place.⚡ Facultatif : tester et déboguer
  • Si ces champs s'affichent toujours, videz le cache de votre navigateur ou utilisez un onglet privé.
  • Vous pouvez également inspecter la page (Clic droit → Inspecter) pour confirmer le scasl- Ces identifiants existent — Shopify met parfois en cache d'anciennes versions des applications intégrées.