DocumentationPrise en main

Image de marque de Storefront

Dernière mise à jour : 14 octobre 2025

Créé pour :

  • Beginner
  • Intermediate
  • Admin
  • Leader
  • User

L’une des premières choses à faire est de modifier le logo dans l’en-tête et télécharger une favicon pour le navigateur. Ensuite, vous devez ajouter votre message de bienvenue et mettre à jour l’avis de copyright dans le pied de page. Ces tâches ne sont que quelques éléments de conception simples dont vous pouvez vous occuper immédiatement. Pendant le développement de votre boutique, vous pouvez activer l’avis de démonstration de la boutique, puis le supprimer lorsque vous êtes prêt à lancer.

Éléments de branding Storefront {width="600" modal="regular"}

La taille et l’emplacement du logo dans l’en-tête sont déterminés par le thème du magasin. Votre logo peut être enregistré en tant que type de fichier GIF, PNG ou JPG (JPEG) et téléchargé à partir de l’administration de votre boutique.

​ Logo dans l’en-tête ​ {width="600"}

L’image du logo se trouve à l’emplacement suivant sur le serveur. Tout fichier image portant le nom logo.svg est utilisé comme logo de thème par défaut.

Chemin complet - app/design/frontend/[vendor]/[theme]/web/images/logo.svg

Chemin relatif - images/logo.svg

Si vous ne connaissez pas la taille du logo ou des autres images utilisées dans votre thème, ouvrez la page dans un navigateur, cliquez avec le bouton droit sur l’image et inspectez l’élément.

NOTE
En plus du logo dans l’en-tête, votre logo apparaît également sur les modèles d’e-mail et sur les factures PDF ainsi que sur d’autres documents de vente. Les logos utilisés pour les modèles d’e-mail et les factures ont des exigences de taille différentes et doivent être téléchargés séparément.

Formats de fichiers de logo pris en charge :

Format du fichier
Description
PNG
(Carte graphique réseau portable) Cette nouvelle alternative au format GIF prend en charge jusqu’à 16 millions de couleurs (24 bits). Le format de compression sans perte produit une image bitmap de haute qualité avec un texte clair, mais une taille de fichier plus grande que certains formats. Le format PNG prend en charge les calques transparents et est conçu pour l’affichage en ligne et la diffusion en continu.
GIF
(Graphics Interchange Format) Format bitmap ancien et largement pris en charge, limité à 256 couleurs (8 bits). Le format GIF prend en charge l’animation simple et les calques transparents.
JPG (JPEG)
(Joint Photographic Expert Group) Format bitmap compressé utilisé par la plupart des appareils photo numériques. La compression avec perte entraîne une perte de données, qui est parfois perceptible sous la forme de points flous dans le texte.

  1. Dans la barre latérale Admin, accédez à Content > Design>Configuration.

    Page de configuration de la conception {width="700"}

  2. Recherchez la vue de magasin que vous souhaitez configurer, puis cliquez sur Edit dans la colonne Action.

  3. Développez Sélecteur d’extension la section Header .

    ​ Paramètres d’en-tête ​ {width="600"}

  4. Pour télécharger un nouveau logo, cliquez sur Upload et sélectionnez le fichier sur votre système.

  5. Saisissez le Logo Image Width et le Logo Image Height en pixels.

  6. Par Logo Image Alt, saisissez le texte qui doit apparaître lorsqu’une personne survole l’image avec la souris.

  7. Cliquez ensuite sur Save Configuration.

Ajouter une favicon

Favicon est l’abréviation de icône préférée et fait référence à la petite icône dans l’onglet de chaque page du navigateur. Selon le navigateur, la favicon apparaît également dans la barre d’adresse, juste avant l’URL.

Une favicon a généralement une taille de 16 x 16 pixels ou de 32 x 32 pixels. Commerce accepte les types de fichiers ICO, PNG, APNG, GIF et JPG (JPEG), bien que tous les navigateurs ne prennent pas en charge ces formats. Le format de fichier le plus répandu à utiliser pour un favicon est ICO. Vous pouvez utiliser d’autres types de fichiers image, mais le format peut ne pas être pris en charge par tous les navigateurs. Il existe de nombreux outils gratuits en ligne que vous pouvez utiliser pour générer une image ICO ou convertir une image dans ce format.

Favicon dans l’onglet du navigateur {width="600"}

Commerce prend en charge les formats de fichiers suivants en tant que favicon :

Format du fichier
Description
ICO
Ce format de fichier image est conçu pour les images d’icône d’ordinateur de petite taille. Principalement utilisé sous ® Windows OS, le format ICO peut contenir des images de 256 x 256 pixels maximum et 16 millions de couleurs (24 bits) avec 8 bits de transparence.
PNG
(Carte graphique réseau portable) Cette nouvelle alternative au format GIF prend en charge jusqu’à 16 millions de couleurs (24 bits). Le format de compression sans perte produit une image bitmap de haute qualité avec un texte clair, mais une taille de fichier plus grande que certains formats. Le format PNG prend en charge les calques transparents et est conçu pour l’affichage en ligne et la diffusion en continu.
APNG
(Animated Portable Network Graphics) Format de fichier similaire au format PNG prenant en charge l’animation simple.
GIF
(Graphics Interchange Format) Format bitmap ancien et largement pris en charge, limité à 256 couleurs (8 bits). Le format GIF prend en charge l’animation simple et les calques transparents.
JPG (JPEG)
(Joint Photographic Expert Group) Format bitmap compressé utilisé par la plupart des appareils photo numériques. La compression avec perte entraîne une perte de données, qui est parfois perceptible sous la forme de points flous dans le texte.

Étape 1 : créer une favicon

  1. À l’aide de l’éditeur d’image de votre choix, créez une image graphique de votre logo de 16 x 16 ou 32 x 32.

  2. (Facultatif) Utilisez l’un des outils en ligne disponibles pour convertir le fichier au format .ico et enregistrez le fichier sur votre ordinateur.

Étape 2 : Chargez la favicon dans votre boutique

  1. Dans la barre latérale Admin, accédez à Content > Design>Configuration.

  2. Dans la grille, recherchez la vue de magasin que vous souhaitez configurer, puis cliquez sur Edit dans la colonne Action.

  3. Sous Other Settings, développez Sélecteur d’extension la section HTML Head.

    Paramètres HTML Head {width="600"}

  4. Si vous souhaitez supprimer la favicon active, cliquez sur l’icône Supprimer ( icône corbeille ) dans le coin inférieur gauche de l’image.

  5. Cliquez sur Upload et ouvrez le fichier favicon que vous avez préparé.

    Favicon téléchargé {width="400"}

  6. Cliquez ensuite sur Save Configuration.

Étape 3 : actualiser le cache

  1. Lorsque vous êtes invité à actualiser le cache, cliquez sur le lien Cache Management dans le message en haut de l’espace de travail.

  2. Dans la liste, cochez la case Page Cache qui est Invalidated.

  3. Définissez Actions sur Refresh, puis cliquez sur Submit.

  4. Pour afficher la nouvelle favicon, revenez à votre storefront et actualisez le navigateur.

Modifier le message de bienvenue

Le message de bienvenue dans l’en-tête se développe pour inclure le nom du client connecté. Avant de lancer votre boutique, veillez à modifier le texte par défaut Bienvenue pour chaque affichage de la boutique.

​ Message de bienvenue ​ {width="600"}

  1. Dans la barre latérale Admin, accédez à Content > Design>Configuration.

  2. Dans la grille, recherchez la vue de magasin que vous souhaitez configurer, puis cliquez sur Edit dans la colonne Action.

  3. Sous Other Settings, développez Sélecteur d’extension la section Header.

  4. Par Welcome Text, saisissez le texte du message de bienvenue que vous souhaitez afficher dans l’en-tête de votre boutique.

    ​ Paramètres d’en-tête ​ {width="600"}

  5. Cliquez ensuite sur Save Configuration.

  6. Lorsque vous êtes invité à mettre à jour le cache de page, cliquez sur le lien Cache Management en haut de l’espace de travail et suivez les instructions pour actualiser le cache.

Votre boutique affiche un avis de copyright dans le pied de page de chaque page. En règle générale, l’avis de copyright doit inclure l’année en cours et identifier votre entreprise comme propriétaire légal du contenu du site.

Exemple de notification de copyright {width="600"}

Le code de caractère © est utilisé pour insérer le symbole de copyright, comme illustré dans les exemples suivants :

  • Exemple de format long

    Copyright © 2013-present Luma, Inc. All rights reserved.

  • Exemple de format court

    © 2021 Luma, Inc. All rights reserved.

Pour mettre à jour la notification de copyright:

  1. Dans la barre latérale Admin, accédez à Content > Design>Configuration.

  2. Dans la grille, recherchez la vue de magasin que vous souhaitez configurer, puis cliquez sur Edit dans la colonne Action.

  3. Sous Autres paramètres, développez Sélecteur d’extension dans la section Footer.

    Paramètres de conception du pied de page {width="600"}

  4. Par Copyright, saisissez l’avis de copyright que vous souhaitez afficher dans le pied de page de chaque page.

    Utilisez le code de caractère © pour insérer un symbole de copyright.

  5. Cliquez ensuite sur Save Configuration.

Définir l’avis de démonstration du magasin

Si votre magasin est en ligne, mais est toujours en construction, vous pouvez afficher un avis de démonstration en haut de la page pour informer les gens que le magasin n’est pas encore ouvert. Lorsque vous êtes prêt à publier, il vous suffit de supprimer le message. Cela revient à retourner le panneau qui pend dans la fenêtre de Fermé à Ouvert. Le format de l’avis de démonstration est déterminé par le thème de votre boutique.

Avis de démonstration de Storefront {width="600"}

  1. Dans la barre latérale Admin, accédez à Content > Design>Configuration.

  2. Dans la grille, recherchez la vue de magasin que vous souhaitez configurer, puis cliquez sur Edit dans la colonne Action.

  3. Sous Other Settings, développez Sélecteur d’extension la section HTML Head.

    HTML Head {width="600"}

  4. Faites défiler jusqu’en bas et définissez le Display Demo Store Notice selon vos préférences.

  5. Cliquez ensuite sur Save Configuration.

  6. Si vous êtes invité à mettre à jour le cache, cliquez sur Cache Management dans le message système et suivez les instructions pour actualiser le cache.

recommendation-more-help
commerce-admin-help-getting-started