Modèles storefront
La section Modèles storefront vous permet de contrôler l'apparence des éléments d'interface liés aux réservations sur votre boutique. Cela inclut le minuteur de réservation, les états expirés, les messages d'avertissement et les indicateurs de stock faible.
Cette section est uniquement axée sur le comportement visuel et l'expérience client et n'affecte ni la logique de réservation ni les règles de stock.
Accéder aux modèles storefront
Allez dans Paramètres → Modèles storefront → Personnaliser l'apparence.
Actions de la page
- Annuler — annuler toutes les modifications non enregistrées
- Enregistrer les modifications — appliquer les personnalisations à votre storefront
Préréglages de modèles
Choisissez parmi trois thèmes de minuteur prédéfinis :
Default
Thème violet avec des états feu tricolore. Couleur d'accent violette qui transitionne à travers les états d'avertissement et urgent.
C'est l'apparence Cart Reserve standard.
Minimal
Design subtil et discret avec des bordures fines. Une apparence épurée qui s'intègre à la plupart des thèmes.
Marqué comme POPULAIRE — l'option la plus fréquemment choisie.
Bold
Design à fort contraste, conçu pour attirer l'attention. Utilise des arrière-plans pleins et des couleurs vives pour garantir la visibilité du minuteur.
Sélectionnez un préréglage en cliquant sur sa carte. Une coche indique le préréglage actuellement actif.
Personnalisation du minuteur
Personnalisez l'apparence du compte à rebours pour chaque état.
États du minuteur
Le minuteur s'affiche différemment selon le temps restant :
| État | Description |
|---|---|
| Sain | Beaucoup de temps restant, apparence calme |
| Avertissement | Temps en baisse, attire l'attention |
| Urgent | Très peu de temps restant, haute visibilité |
| Expiré | La réservation est terminée |
Cliquez sur chaque onglet d'état pour personnaliser son apparence individuellement.
Aperçu en direct
Visualisez les changements en temps réel pendant que vous ajustez les paramètres. L'aperçu montre comment le minuteur apparaîtra aux clients avec le texte « Items Reserved » et un compte à rebours d'exemple.
Paramètres du conteneur
Personnalisez l'apparence du conteneur du minuteur :
Rayon des coins
Définissez l'arrondi des coins en pixels (par ex. 6 px). Des valeurs plus élevées créent des coins plus arrondis.
Afficher la bordure
Active ou désactive la bordure du conteneur. Lorsque activée, le minuteur a un contour visible selon vos couleurs de bordure.
Paramètres de couleur
Chaque état du minuteur a quatre couleurs personnalisables :
Arrière-plan
Couleur principale de l'arrière-plan du conteneur. Utilisez le sélecteur de couleur ou saisissez une valeur hexadécimale (par ex. #F5F3FF).
Bordure
Couleur de la bordure, visible lorsque « Afficher la bordure » est activé.
Texte
Couleur du libellé et du sous-titre (par ex. « Items Reserved », « Complete checkout to secure your items »).
Icône/Accent
Couleur des chiffres du compte à rebours, de l'icône et de la barre de progression.
Recommandations par état
État sain
Utilisez des couleurs calmes et neutres. Le minuteur doit être visible sans être alarmant.
- Suggéré : arrière-plans clairs avec accents discrets
État d'avertissement
Introduisez des tons plus chauds pour attirer l'attention.
- Suggéré : accents jaunes ou orangés
État urgent
Utilisez des couleurs très contrastées qui créent un sentiment d'urgence.
- Suggéré : arrière-plans rouges ou orangés avec du texte blanc
État expiré
Communiquez clairement que la réservation est terminée.
- Suggéré : tons gris ou neutres indiquant un état inactif
Aperçu et test
Après avoir enregistré les modifications :
- Visitez la page panier de votre boutique avec des articles réservés
- Vérifiez que le minuteur s'affiche correctement
- Attendez que le minuteur passe par les différents états (ou ajustez temporairement la durée de réservation)
- Confirmez que tous les états s'affichent comme prévu
Sections associées
- Minuteur — configurez le comportement et les messages du minuteur
- Expiration de réservation — personnalisez les messages d'état expiré
- Bannière de stock faible — configurez les avertissements de stock faible