Personnaliser l'affichage de votre site de réservation avec du CSS

Vous souhaitez masquer certains éléments sur les cartes de logements de votre site de réservation (l'adresse, le prix, les détails, etc.) ? Voici la marche à suivre, étape par étape.

Étape 1 — Accéder à votre site de réservation

Dans le menu de gauche de SuperHote, cliquez sur Site de réservations. La liste de vos sites de réservation s'affiche alors. Cliquez sur le site que vous souhaitez personnaliser (par exemple « Réservez votre séjour »).

Étape 2 — Ouvrir l'onglet Style

Une fois sur la page de votre site, plusieurs onglets apparaissent en haut : Contenu, Hébergements, Style et Paramètres et intégration. Cliquez sur l'onglet Style.

Étape 3 — Accéder à la section CSS personnalisé

Dans la colonne de gauche de l'onglet Style, vous trouverez trois sections : Modèle du site, Couleurs et CSS personnalisé. Cliquez sur CSS personnalisé : un éditeur de code s'ouvre avec le message « Ajoutez du CSS pour personnaliser l'apparence de votre site ».

Étape 4 — Coller votre code CSS

Dans l'encadré prévu à cet effet, collez les règles CSS correspondant aux éléments que vous souhaitez masquer. Par exemple, pour cacher l'adresse des logements :

.sh-rental-address {display: none !important;}

Vous pouvez combiner plusieurs règles selon ce que vous voulez masquer sur les cartes d'hébergements :

/* Masquer le type de logement et la ville */
.sh-rental-type {display: none !important;}

/* Masquer le nom du logement */
.sh-rental-name {display: none !important;}

/* Masquer l'adresse */
.sh-rental-address {display: none !important;}

/* Masquer les détails (chambres, lits, voyageurs) */
.sh-rental-details {display: none !important;}

/* Masquer le prix */
.sh-rental-price {display: none !important;}

💡 Astuce : le bouton Voir les classes CSS en haut à droite de l'éditeur vous donne accès à la liste complète des classes disponibles sur le site.

Étape 5 — Enregistrer vos modifications

Une fois votre code saisi, cliquez sur le bouton orange Enregistrer en haut à droite de la section CSS personnalisé. Si vous changez d'avis avant d'enregistrer, le bouton Annuler (à gauche d'Enregistrer) vous permet de revenir en arrière.

Étape 6 — Vérifier le rendu

Pour contrôler le résultat, cliquez sur Voir le site en haut à droite de la page. Votre site de réservation s'ouvre dans un nouvel onglet et vous pouvez constater que les éléments ciblés sont bien masqués sur les cartes de logements.

Et voilà, votre moteur de réservation est personnalisé ! Vous pouvez à tout moment revenir dans cette section pour ajuster, ajouter ou supprimer des règles CSS.

Mis à jour le : 21/05/2026