Obtenez Shopify pour 1€ par mois

Guide des paramètres généraux (typographie, couleurs, favicon, etc.)

Envie de personnaliser l’apparence globale de ta boutique ? Ce guide t’explique comment modifier la typo, les couleurs, le favicon et plus encore.


Les paramètres généraux de Story Theme te permettent de personnaliser l'apparence globale de ta boutique : les polices, les couleurs, le favicon, et quelques petits détails qui font toute la différence. Voici un petit tour d’horizon pour t’aider à prendre les commandes. 😉


⚙️ Général


Pour commencer, tu dois renseigner le nom de domaine de ta boutique sur ton espace membre.

🎬 Voici une vidéo pour t'aider : https://www.youtube.com/watch?v=7Lb7-jO7R2I&feature=youtu.be


C'est également ici que tu pourras choisir de laisser ou non la possibilité aux visiteurs de faire des clics droits et sélectionner les textes sur ta boutique.

Enfin, si tu vends sur plusieurs marchés, tu dois renseigner dans "nom de domaine" ton domaine principal.


🎨 Couleurs


🎬 Voici une vidéo pour t'aider : https://www.youtube.com/watch?v=LKUtMQWgk4A


Tu peux définir dans tes nuanciers :

  • Les polices (titres, texte, dégradé)
  • Les arrières-plan (Arrière-plan, arrière-plan secondaire, dégradé)
  • Les accents (accent 1, accent 2, dégradé bouton)

🔁 La modification des couleurs d'un nuancier affectera toutes les sections qui utilisent ce nuancier.


Tu peux également définir tes variantes couleur dans cette section :


✍️ Typographie


Tu peux choisir les polices principales de ton site :

  • Police pour les titres
  • Police pour le corps de texte


🎬 Voici une vidéo pour t'aider : https://www.youtube.com/watch?v=LQbKz78Tnns


💻 Mise en page


C'est ici que tu pourras définir la largeur de la page et des tableaux (espaces horizontal et vertical).


✨ Animations


Dans cette section tu pourras activer ou désactiver les animations, les transitions de page et définir l'image de chargement.


💰 Prix


Tu pourras définir la couleur du prix de vente (texte ou accent), le mettre en gras et activer ou désactiver le code de ta devise.


⭐ Étoiles


Cette section te permet de définir la couleur des étoiles qui s'afficheront sur ta boutique, leur taille et la couleur du texte des étoiles également.


🔢 Quantité


Pour le composant quantité, tu peux personnaliser l’arrière-plan secondaire des boutons et des champs, retirer l’espacement, choisir le style de bordure et même définir un effet au survol.


➡️ Sliders


Pour les sliders, tu peux ajuster la pagination (style et couleur), choisir le look de la navigation, modifier leur couleur, et même définir leur positionnement par rapport à la navigation.


🔲 Bordures


Pour les bordures, tu peux définir la couleur et l’épaisseur, avec la possibilité de créer jusqu’à trois styles différents à utiliser selon les blocs.


⚫ Ombres


Pour les ombres, tu peux définir la couleur, le flou, l’opacité, les décalages horizontal et vertical, et créer jusqu’à trois styles personnalisés. Tu peux aussi activer une ombre au survol pour donner du relief à tes éléments.


📝 Titres


Pour les titres, tu peux définir un style général dès le départ — comme l’utilisation de majuscules ou l’espacement des lettres ou séparateurs. Ensuite, tu as 3 styles personnalisables où tu choisis le niveau (H1, H2, H3), la taille de police et l’ajout éventuel de séparateurs.


🔘 Boutons


Pour les boutons, tu peux commencer par définir un style général : police, taille, espacement, rayon, épaisseur du texte, mais aussi l’effet de transition, l’ombre et la couleur au survol. Ensuite, tu peux créer 3 styles différents avec leur propre palette de couleurs, bordure et ombre.

C’est aussi dans cette section que tu peux activer des options sur certaines sections du thème, comme l’affichage d’une image ou d’un texte sous le bouton, les badges de paiement (ou badges de confiance), ainsi que le style des étoiles d’avis et le texte associé.


🎬 Voici une vidéo dédiée : https://youtu.be/5CSLQaw2hk0


🧩 Icônes


Pour les icônes, tu peux en ajouter jusqu’à 5, chacun avec un texte personnalisé et un icône que tu choisis parmi ceux proposés… ou bien tu peux utiliser ton propre pictogramme pour un rendu encore plus unique.


🔽 Contenu réductible


Pour le contenu réductible (pratique pour les FAQ ou les blocs pliables), tu peux personnaliser les espacements, l’icône, la police, le rayon, la bordure (et son positionnement), et activer ou non l’effet de couleur secondaire au survol. Tu peux aussi définir les ombres pour chacun des 3 styles disponibles, pour un rendu à la fois pratique et esthétique.


✏️ Sous-titres


Pour les sous-titres dans les sections, tu peux activer l’affichage en majuscules, ajuster la graisse de la police, sa taille, l’espacement des lettres, et choisir le style des séparateurs pour structurer ton contenu.


👉 Entrées


Pour les entrées (champs de formulaire, recherche, etc.), tu peux définir un style général en ajustant la taille du rayon, l’ombre, la bordure, ainsi que le comportement au focus (quand l’utilisateur clique ou tape dedans).


💾 Conteneur de média


Pour le conteneur de média (images, vidéos, etc.), tu peux personnaliser le rayon, l’ombre et la bordure, afin d’adapter parfaitement le style visuel de tes contenus médias à l’esthétique globale de ta boutique.


📦 Conteneur de contenu


Comme pour les médias, le conteneur de contenu peut être personnalisé avec un rayon, une ombre et une bordure. Ça te permet d’encadrer joliment tes blocs de texte ou d’informations, tout en gardant une cohérence avec le reste du design.


🛍️ Carte de produit


Pour les cartes de produit, tu peux d’abord définir un style général avec des options comme la ligne au survol, le zoom, le décalage vertical, l’affichage du prix ou de la mention "à partir de", et la couleur du prix. Ensuite, tu peux configurer la partie texte : alignement, emplacement, et taille maximale.

Tu as aussi la main sur l’étiquette de vente (texte, style et position), ainsi que sur l’affichage du bouton (activer ou non, texte, style).


🗂️ Cartes de collection


Pour les cartes de collection, tu peux personnaliser le style général de la carte, son rayon, son ombre, sa bordure, ainsi que l’alignement du texte. Tu peux aussi modifier le texte du bouton et son style, pour créer des aperçus de collection cohérents et attrayants.


📖 Cartes de blog


Pour les cartes de blog, tu peux définir un style général, activer un effet visuel comme une ligne au survol, un zoom ou un décalage vertical, et ajuster l’affichage du texte (position, taille, alignement) pour une lecture fluide et stylée de tes articles.


🗄️ Tiroirs


Pour les tiroirs (menus ou panneaux latéraux), tu peux personnaliser la bordure, l’ombre, le comportement de l’arrière-plan (par exemple foncé ou flouté quand le tiroir est ouvert), ainsi que leur largeur sur mobile pour une navigation fluide et adaptée.


🛒 Panier


Le panier est ultra personnalisable dans Story Theme. Tu peux commencer par choisir le type de panier (classique ou tiroir), utiliser une icône personnalisée, afficher ou non le prix unitaire, activer la note de commande, définir une URL pour le panier vide, et choisir une palette de couleurs.


Ensuite, tu peux personnaliser les modules du panier avec la bordure et l’alignement du contenu, activer une estimation de livraison (couleur, icône, texte, jour d’expédition), et même ajouter un compte à rebours (texte, durée, couleur).


Tu peux aussi afficher une livraison gratuite à partir d’un certain montant (avec un texte avant et après l’objectif), un texte marketing (activable et personnalisable), un champ de code promo, et une section upsell pour recommander un produit, une collection ou une garantie (avec son propre style, couleurs et texte).

Pour finir, tu peux ajuster les paramètres liés au total (sous-total, économies, bouton de paiement) ainsi que ceux du pied de page, avec du texte et l’option d’afficher les badges de paiement. Tout est pensé pour optimiser l’expérience client et booster tes conversions!


🎬 Voici une vidéo dédiée : https://youtu.be/3yGrL6vEG4Q


⏱️ Timer


Pour le timer, tu peux choisir entre un compte à rebours daté (jusqu’à une date précise) ou automatique (relancé à chaque visite). Tu peux aussi personnaliser le texte à afficher à la fin du compte à rebours, et ajouter un lien de redirection si tu veux envoyer l’utilisateur vers une autre page une fois le temps écoulé.


🎬 Voici une vidéo dédiée : https://youtu.be/GUdMfsSkp4Q


💖 Liste de souhaits


Tu peux activer ou désactiver la liste de souhaits selon ton besoin. Il te suffit ensuite de renseigner le lien vers la page dédiée et de choisir la couleur principale pour l’icône ou le bouton associé. Une fonctionnalité simple et efficace pour améliorer l’expérience utilisateur.


🌐 Favicon


Pour le favicon, il te suffit simplement d’ajouter une image (de préférence carrée, en .png ou .ico). Elle s’affichera dans l’onglet du navigateur, juste à côté du nom de ta boutique.


📱 Réseaux sociaux


Tu peux ajouter les liens vers tes profils réseaux sociaux directement dans les paramètres du thème. Les plateformes disponibles sont : Facebook, Instagram, YouTube, TikTok, Twitter, Snapchat, Pinterest, Tumblr et Vimeo. Les icônes s’afficheront automatiquement si un lien est renseigné.


💳 Passage à la caisse


Pour le passage à la caisse, tu peux personnaliser une bannière avec une image de fond, ajouter ton logo (image, position et taille), et activer un effet de zoom sur le contenu principal (avec image de fond, couleur, et choix entre des champs de formulaire blancs ou transparents). Tu peux aussi personnaliser le résumé de commande (image, couleurs), la typographie (titres et corps), les couleurs globales et même la mise en page complète du processus de paiement.


⭐ CSS personnalisé

Si tu veux aller encore plus loin en ajoutant des styles personnalisés à toute ta boutique en ligne.

Pour en savoir plus