Apparence

Adaptez le widget à votre marque avec quatre préréglages, des sélecteurs de couleurs, Google Fonts et une isolation du CSS du thème.

Préréglages

Choisissez une mise en page dans Réglages → Square Booking → Appearance. L'attribut shortcode theme peut surcharger ce choix sur une page.

Onglet Appearance : les quatre préréglages.
Onglet Appearance : les quatre préréglages.

Luxury

Look éditorial sombre, titres serif, espacement généreux. Préréglage par défaut.

Calendrier de réservation avec le thème Luxury

Card

Mise en page claire avec cartes de service ombrées et coins arrondis.

Calendrier de réservation avec le thème Card

Flat

Interface minimale et étapes compactes.

Calendrier de réservation avec le thème Flat

Square Classic

Checkout clair aligné sur Square Appointments. Si les polices Luxury par défaut sont encore sélectionnées, Square Classic les remplace par Inter.

Calendrier de réservation avec le thème Square Classic

Couleurs

Chaque couleur est une valeur hex du sélecteur (pas une variable CSS) :

Couleurs.
Couleurs.
  • Primary (gold) — boutons et étape active
  • Background — conteneur du widget
  • Text — textes et libellés
  • Accent — mises en avant

Typographie

Les polices titre et corps se choisissent dans des listes Google Fonts (Cormorant Garamond, Inter, Jost, et les autres familles listées). Il n'y a pas d'option inherit du thème.

Typographie (Google Fonts).
Typographie (Google Fonts).

Dimensions

Max width accepte par exemple 860px ou 100%. Border radius est un curseur de 0 à 16px.

Dimensions.
Dimensions.

Libellés d'étapes

Les libellés Session, Date & Time et Confirmation se règlent dans l'onglet Booking flow (Widget Content), pas dans Appearance. Laissez les champs vides pour garder ces défauts.

Isolation du CSS du thème

Depuis la version 1.3.2, un CSS d'isolation est imprimé dans le pied de page pour que le thème et les constructeurs de pages (titres, boutons, champs) ne restylent pas le widget. Ce pied de page passe aussi après le CSS additionnel du Personnalisateur.

Enregistrez Appearance, puis vérifiez la page de réservation. Testez avec le shortcode sur une page de staging avant publication.