Paramètres de thème

Vous pouvez utiliser les paramètres de thème pour modifier la typographie, les couleurs, les liens de médias sociaux et les paramètres de paiement de votre boutique en ligne. Lorsque vous modifiez les paramètres de votre thème, les changements s’appliquent à la totalité de votre boutique en ligne.

Vous pouvez ajouter le logo de votre entreprise à votre boutique en ligne. Votre logo s’affiche aux endroits suivants :

  • dans votre en-tête, sur toutes les pages
  • sur votre page de mot de passe

La largeur des images de logo ne doit pas dépasser 300 px.

  1. Cliquez sur Theme settings (Paramètres du thème).
  2. Cliquez sur Logo.
  3. Dans la zone Largeur du logo sur ordinateur, déplacez le curseur jusqu’à la largeur de pixel que vous souhaitez.

Favicon

Vous pouvez ajouter une icône de favoris ou un favicon qui peut vous aider à personnaliser votre boutique en ligne. Un favicon s’affiche dans les endroits suivants :

  • l'onglet de votre navigateur web
  • l'historique de votre navigateur web
  • les icônes présentes sur votre bureau
  • à côté du nom de votre boutique en ligne lorsqu’il est enregistré dans les favoris

En savoir plus sur les favicons.

Personnaliser votre favicon

Couleurs

Vous pouvez créer jusqu’à 21 nuanciers de couleurs uniques et les appliquer à différentes sections de votre boutique en ligne. En savoir plus sur les options de couleurs, les nuanciers de couleurs et les dégradés de couleurs.

Personnaliser vos paramètres de couleur

  1. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
  2. Cliquez sur Personnaliser à côté du thème que vous souhaitez personnaliser.
  3. Cliquez sur Paramètres du thème, puis sur Couleurs.
  4. Dans la section Nuanciers, cliquez sur un nuancier existant ou sur l’option Ajouter un nuancier pour créer un autre nuancier de couleurs.
  5. Cliquez sur l’échantillon de couleur pour modifier les couleurs des types de contenu suivants :

    • Arrière-plan
    • Dégradé de l’arrière-plan
    • Texte
    • Arrière-plan plein du bouton
    • Texte de bouton plein
    • Bouton en relief
    • Ombre
  6. Pour définir votre couleur, saisissez un code de couleur hexadécimal à partir du sélecteur de couleurs. Pour que la couleur soit transparente, supprimez le code hexadécimal du champ de texte.

  7. Cliquez sur Save (Enregistrer).

Typographie

Vous pouvez définir le style et la taille de la police pour le texte de votre boutique en ligne. Vous pouvez choisir une police système ou une police personnalisée.

Il est conseillé d’utiliser les polices système dans votre boutique. Les polices système sont des polices déjà installées sur l’ordinateur d’un utilisateur. L’utilisation de polices système évite de télécharger de nouvelles polices sur l’ordinateur de vos clients, ce qui peut ralentir la vitesse de chargement de votre boutique. La police qui s’affiche sur l’ordinateur de vos clients dépend de leur système d’exploitation.

Personnaliser vos paramètres de typographie

Consultez la bibliothèque de polices de Shopify pour obtenir une liste de polices disponibles.

Personnaliser les tailles de polices

Vous pouvez définir les tailles de police par défaut de votre titre et du corps du texte dans le paramètre du thème Typography.

Étapes

Mise en page

La mise en page vous permet de définir la largeur maximale d’affichage de votre boutique en ligne et de définir l’espace vertical et horizontal entre les sections.

Animations

Les animations vous permettent d’ajouter du mouvement et de l’intérêt visuel à votre boutique en ligne. Vous pouvez activer une animation fondue qui révèle les sections de votre boutique lorsque le visiteur fait défiler la page, ainsi qu’un effet de survol pour vos cartes et vos boutons.

Étapes

  1. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
  2. Cliquez sur Personnaliser à côté du thème que vous souhaitez personnaliser.
  3. Cliquez sur Paramètres du thème, puis sur Animations.
  4. Facultatif : pour activer une animation qui révèle les sections de votre boutique en ligne lorsque le visiteur fait défiler la page, sélectionnez Afficher les sections lors du défilement.
  5. Facultatif : pour ajouter une animation avec effet de survol à vos cartes et boutons, choisissez l’une des options suivantes dans le paramètre Effet de survol :

    • Levée verticale : lorsqu’un client survole une carte ou un bouton avec sa souris, l’élément se déplace vers le haut.
    • 3D Lift : lorsqu’un client survole une carte ou un bouton avec sa souris, l’élément se déplace vers l’avant, ce qui crée un effet 3D. Un léger halo lumineux traverse aussi l’élément, ce qui lui donne une dimension supplémentaire.
  6. Cliquez sur Save (Enregistrer).

Bordures et ombres

Vous pouvez ajuster les bordures et les ombres de certains types de contenu interactif, tels que les boutons, les variantes ou les entrées de quantité.

Les options personnalisables pour les bordures sont les suivantes :

  • Épaisseur, qui modifie le contour de l’article.
  • Opacité, qui définit la visibilité du contour de l’article.
  • Rayon de coin, qui arrondit les coins de vos articles.

Les options pour les ombres sont les suivantes :

  • Opacité modifie la visibilité de l’ombre de l’article. Une opacité d’ombre de 0 % supprime entièrement l’ombre de l’article.
  • Les curseurs de plage de décalage horizontaux ou verticaux déplacent l’emplacement de l’ombre autour de l’article.
  • Utilisez le curseur de plage Flou pour modifier l’opacité de l’ombre de l’article.

Boutons

Vous pouvez personnaliser les paramètres des boutons d’appel à l’action sur votre boutique en ligne en ajoutant des ombres, en modifiant l’espacement ou l’opacité, et en ajustant la forme de vos boutons.

Exemple de boutique en ligne avec bouton d’appel à l’action

Personnaliser les boutons

Options de variantes avec échantillons

Exemple de boutique en ligne avec des options d’échantillon sélectionnables

Les échantillons sont une représentation visuelle des variantes de produits. Pour afficher des échantillons, vous avez besoin de la dernière version de Dawn et des champs méta de catégorie connectés à vos variantes. Avec Dawn, les options de variantes peuvent être affichées soit dans une liste déroulante, soit sous la forme d’un échantillon. Si vous affichez des options de variantes sous forme d’échantillon, vous pouvez choisir que ces échantillons s’affichent sous forme de cercle ou de carré ou sous aucune forme, qui affiche la valeur de l’option en tant que texte.

Exemples de paramètres pour les échantillons de nuances

Configurer des échantillons avec des champs méta de catégorie

  1. Depuis votre interface administrateur Shopify, cliquez sur Produits.
  2. Cliquez sur un produit.
  3. Dans la section Organisation des produits, saisissez la catégorie de votre produit dans le champ Catégorie de produit, puis sélectionnez le résultat le plus précis dans la liste Catégorie de produit. La catégorie de produits doit inclure un champ méta de catégorie Couleur.
  4. Dans la section Variantes, cliquez sur Ajouter des options comme la taille ou la couleur.
  5. Cliquez sur Color (Couleur).
  6. Cliquez sur le champ Ajouter une couleur et sélectionnez toutes les entrées de couleur par défaut dans le menu déroulant.
  7. Pour ajouter une entrée de couleur personnalisée :

    1. Cliquez sur Ajouter une couleur, puis sur Ajouter une nouvelle entrée.
    2. À la page Ajouter une entrée, remplissez les champs Étiquette et Couleur.
    3. Si vous souhaitez un motif au lieu d’une couleur, remplissez le champ Image. Si vous ajoutez à la fois une couleur et une image, l’image sera utilisée pour l’échantillon.
    4. Sélectionnez une couleur de base et un motif de base.
    5. Cliquez sur Save (Enregistrer).
  8. Cliquez sur Enregistrer pour enregistrer votre produit.

Personnaliser les échantillons dans Dawn

  1. Depuis l’interface administrateur Shopify, allez à Online Store (Boutique en ligne) > Themes (Thèmes).
  2. Assurez-vous d’avoir installé la dernière version de Dawn, puis cliquez sur Personnaliser.
  3. Accédez au produit auquel vous avez ajouté des options de couleur.
  4. Facultatif : pour personnaliser les échantillons, cliquez sur le bloc Sélecteur de variante. Vous pouvez modifier l’affichage des échantillons en choisissant entre Cercle, Carré ou Aucun.
  5. Cliquez sur Enregistrer pour enregistrer le thème.

Boutons pilules de variante

Les pilules de variantes vous permettent d’afficher les variantes d’un produit sur une page de produit ou une section de produit en vedette. Les client(e)s peuvent sélectionner la variante souhaitée pour ajouter le produit à leur panier sans avoir à modifier les pages de produits.

Exemple de boutique en ligne avec des pilules de variante sélectionnables

Personnalisation des pilules de variantes

Entrées

Les entrées sont des zones interactives, qui nécessitent une entrée client(e), par exemple un sélecteur de quantité, un formulaire d’inscription à la liste de diffusion ou des notes de panier. Vous pouvez ajuster l’apparence des entrées de votre boutique en ligne dans les paramètres de thème.

Exemple de boutique en ligne avec entrée de quantité

Personnalisation des entrées

Cartes

Les paramètres des cartes de produit, des cartes de collection et des cartes de blog vous permettent de personnaliser le style de chaque type de zone distincte affichée dans les sections. Vous pouvez modifier la couleur, l’alignement, les marges intérieures des images, les bordures et les ombres de ces trois types de cartes de section.

Personnalisation des cartes

Conteneurs de contenu

Les conteneurs constituent la partie de texte des sections de contenu, par exemple, la zone de texte d’un diaporama, une bannière avec image ou les colonnes des sections multicolonnes. Vous pouvez personnaliser l’apparence des conteneurs de contenu de votre boutique en ligne.

Personnalisation des conteneurs de contenu

Support multimédia

Le support multimédia est l’élément visuel des sections, par exemple, le support multimédia du produit ou l’image dans les sections « Image avec texte ». Vous pouvez ajouter des bordures et des ombres à vos supports multimédia.

Personnalisation du support multimédia

Menus déroulants et fenêtres pop-up

Modifiez l’apparence des menus déroulants de la navigation, des fenêtres modales pop-up et des fenêtres pop-up de panier.

Personnalisation des menus déroulants et des fenêtres pop-up

Tiroirs

Les tiroirs sont des conteneurs interactifs masqués, qui apparaissent lorsque l’on appuie ou clique sur un menu de navigation réductible ou des options de filtre, par exemple.

Personnalisation des tiroirs

Badges

Les badges En solde (ou Promo) et Épuisé sont automatiquement ajoutés aux images de vos produits lorsque leur prix descend ou lorsque l'inventaire atteint 0. Vous pouvez ajuster la position, la forme et la couleur de vos badges.

Exemple de boutique en ligne avec des badges promotion et épuisé

Les badges Page et Blog apparaissent sur les résultats de recherche pertinents. Vous pouvez personnaliser la position et la forme de ces badges, mais pas la couleur.

Personnalisation des badges

Icônes

Les icônes sont de petites images, qui peuvent être ajoutées à certaines sections ou blocs. Définissez les nuanciers de couleurs de vos icônes dans les paramètres de thème.

Exemple de boutique en ligne avec des icônes en rangées réductibles

Personnalisation des icônes

Informations sur la marque

Vous pouvez inclure des informations à propos de votre marque. Vous pouvez ajouter le bloc d’informations sur la marque dans votre pied de page.

Personnaliser les informations relatives à votre marque

Médias sociaux

Vous pouvez ajouter des boutons de partage social à vos produits et à vos articles de blog ainsi que des liens vers vos comptes de médias sociaux. Les liens vers vos comptes de médias sociaux s’affichent dans le pied de page de votre boutique en ligne.

Personnaliser vos paramètres de médias sociaux

Comportement de recherche

La boutique en ligne comprend la recherche prédictive, indiquant les suggestions de produits lorsque les client(e)s commencent à taper dans le champ de recherche. Les suggestions de recherche peuvent aider les client(e)s à formuler et affiner leurs recherches, et leur offrir de nouvelles façons d’explorer une boutique en ligne. Elles peuvent également permettre aux client(e)s de parcourir rapidement les résultats sans avoir à quitter leur page actuelle pour visualiser une liste distincte de résultats de recherche.

Vous pouvez personnaliser les paramètres suivants pour la recherche :

  • Activer les suggestions de recherche : activez ou désactivez les suggestions de recherche.
  • Afficher le fournisseur du produit : affichez ou masquez les fournisseurs de produits dans les suggestions de recherche.
  • Afficher le prix du produit : affichez ou masquez les prix des produits dans les suggestions de recherche.

Modifier les paramètres d’entrée de recherche

Pour en savoir plus sur le fonctionnement des suggestions de recherche, voir Recherche prédictive.

Format de devise

Vous pouvez choisir de toujours afficher les codes de devise pour les prix des produits, du panier et de la page de paiement.

Panier

Vous pouvez modifier le style du panier sur votre boutique en ligne. Lorsqu’un(e) client(e) ajoute un produit de votre boutique à son panier, celui‑ci peut être affiché en tant que tiroir, page ou notification pop‑up. Pour que le client ou la cliente reste sur la page du produit, utilisez l’option tiroir ou notification pop‑up. Pour que le client ou la cliente accède à la page du panier, utilisez l’option page. Lorsque le panier du client ou la cliente est vide, vous pouvez afficher une collection en vedette sur le panier coulissant.

Étapes

Si le type de panier est Tiroir, vous pouvez afficher une collection dans le panier coulissant. La collection sélectionnée apparaît uniquement lorsque le panier est vide.

Pour ajouter une collection au panier coulissant vide, cliquez sur Sélectionner une collection. Sélectionnez une collection, puis cliquez sur Changer pour sélectionner une collection différente ou retirer la collection du panier coulissant. Vous pouvez également cliquer sur Créer une collection pour créer une nouvelle collection. Ce bouton vous fait quitter les paramètres du thème et vous mène à la page Collections de votre interface administrateur Shopify.

Paiement

Cette section vous permet de personnaliser la page de paiement de votre boutique. Consultez Page de paiement de Shopify pour plus d’informations sur la page de paiement de votre boutique.

Modifier les styles de thème

Un style de thème est une collection de paramètres choisis par un concepteur de thème. Vous pouvez en appliquer un à votre boutique pour lui donner un aspect soigné. Un style est appliqué à tous les thèmes par défaut. Lorsque vous personnalisez un thème, vous remplacez les paramètres de style de ce thème par les vôtres. Si vous appliquez un style de thème à votre thème, vous modifiez vos paramètres du moment, tels que les couleurs et la typographie.

Étapes

Annuler et rétablir les modifications

Le bouton Annuler inverse votre modification la plus récente, et le bouton Rétablir rajoute une modification que vous avez annulée. Cliquez sur le bouton Annuler plusieurs fois pour continuer à annuler votre travail, un changement à la fois. Les boutons Annuler et Rétablir se trouvent dans la barre d'outils de l'éditeur de thème.

Les boutons Annuler et Rétablir dans la barre d'outils de l'éditeur de thème

Cliquez sur le bouton Annuler pour annuler les modifications suivantes :

  • ajouter, réorganiser et supprimer des sections
  • application de couleurs, de polices et d'autres paramètres dans l'onglet Paramètres du thème
  • réinitialiser un style de thème.

Prêt(e) à commencer à vendre avec Shopify ?

Essayez gratuitement