Marque Storefront
Une des premières choses que vous souhaitez 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 sont quelques éléments de conception simples dont vous pouvez vous occuper immédiatement. Pendant que votre magasin est en cours de développement, vous pouvez activer l’avis de démonstration du magasin, puis le supprimer lorsque vous êtes prêt à le lancer.
Télécharger votre logo
La taille et l’emplacement du logo dans l’en-tête sont déterminés par le thème de magasin. Votre logo peut être enregistré en tant que type de fichier GIF, PNG ou JPG (JPEG) et téléchargé depuis l’administrateur de votre boutique.
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 de la souris sur l’image et examinez l’élément.
NOTEFormats de fichiers de logo pris en charge :
| Format du fichier | Description |
|---|---|
| PNG | (Graphiques réseau mobiles) Cette nouvelle alternative au format de 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 du texte clair, mais un fichier plus volumineux 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 | (Format d’échange graphique) Format bitmap plus ancien et largement pris en charge, limité à 256 couleurs (8 bits). Le format de GIF prend en charge l’animation simple et les calques transparents. |
| JPG (JPEG) | (Groupe d’experts photographiques interarmées) 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 zones floues dans le texte. |
-
Sur la barre latérale Admin, accédez à Content > Design>Configuration.
-
Recherchez la vue de magasin que vous souhaitez configurer et cliquez sur Edit dans la colonne Action.
-
Développez la section
-
Pour charger un nouveau logo, cliquez sur Upload et sélectionnez le fichier sur votre système.
-
Saisissez les Logo Image Width et Logo Image Height en pixels.
-
Pour Logo Image Alt, saisissez le texte que vous souhaitez afficher lorsque quelqu’un survole l’image.
-
Une fois l’opération terminée, cliquez sur Save Configuration.
Ajout d’une favicon
Favicon est une abréviation de icône préférée et fait référence à la petite icône dans l’onglet de chaque page de navigateur. Selon le navigateur, l’icône favicon s’affiche également dans la barre d’adresse, juste avant l’URL.
Une favicon fait généralement 16 x 16 pixels ou 32 x 32 pixels de taille. 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 souvent pris en charge pour une 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.
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ônes d’ordinateur de petite taille. Principalement utilisé sous Microsoft® Windows OS, le format ICO peut contenir des images de 256 x 256 pixels et 16 millions de couleurs (24 bits) avec 8 bits de transparence. |
| PNG | (Graphiques réseau mobiles) Cette nouvelle alternative au format de 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 du texte clair, mais un fichier plus volumineux 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 qui prend en charge l’animation simple. |
| GIF | (Format d’échange graphique) Format bitmap plus ancien et largement pris en charge, limité à 256 couleurs (8 bits). Le format de GIF prend en charge l’animation simple et les calques transparents. |
| JPG (JPEG) | (Groupe d’experts photographiques interarmées) 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 zones floues dans le texte. |
Étape 1 : création d’une favicon
-
A l’aide de l’éditeur d’image de votre choix, créez une image graphique de votre logo 16 x 16 ou 32 x 32.
-
(Facultatif) Utilisez l’un des outils en ligne disponibles pour convertir le fichier au format .ico et enregistrer le fichier sur votre ordinateur.
Étape 2 : téléchargement de la favicon vers votre boutique
-
Sur la barre latérale Admin, accédez à Content > Design>Configuration.
-
Dans la grille, recherchez la vue de magasin que vous souhaitez configurer et cliquez sur Edit dans la colonne Action.
-
Sous Other Settings, développez la section
-
Si vous souhaitez supprimer l’icône de favicon actuelle, cliquez sur l’icône Supprimer (
-
Cliquez sur Upload et ouvrez le fichier favicon que vous avez préparé.
-
Une fois l’opération terminée, cliquez sur Save Configuration.
Étape 3 : Actualisation du cache
-
Lorsque vous êtes invité à actualiser le cache, cliquez sur le lien Cache Management dans le message situé en haut de l’espace de travail.
-
Dans la liste, cochez la case Page Cache qui est marquée
Invalidated. -
Définissez Actions sur
Refreshet cliquez sur Submit. -
Pour afficher la nouvelle favicon, revenez à votre vitrine et actualisez le navigateur.
Modifier le message de bienvenue
Le message de bienvenue dans l’en-tête se développe afin d’inclure le nom du client connecté. Avant de lancer votre boutique, veillez à modifier le texte par défaut Bienvenue pour chaque vue de magasin.
-
Sur la barre latérale Admin, accédez à Content > Design>Configuration.
-
Dans la grille, recherchez la vue de magasin que vous souhaitez configurer et cliquez sur Edit dans la colonne Action.
-
Sous Other Settings, développez la section
-
Pour Welcome Text, saisissez le texte du message de bienvenue que vous souhaitez afficher dans l’en-tête de votre boutique.
-
Une fois l’opération terminée, cliquez sur Save Configuration.
-
Lorsque vous êtes invité à mettre à jour le cache de page, cliquez sur le lien Cache Management situé en haut de l’espace de travail et suivez les instructions pour actualiser le cache.
Modification de la notification de copyright
Votre boutique affiche un avis de copyright dans le pied de page de chaque page. En règle générale, la mention de copyright doit inclure l’année en cours et identifier votre société comme propriétaire légal du contenu sur le site.
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 l'avis de copyright :
-
Sur la barre latérale Admin, accédez à Content > Design>Configuration.
-
Dans la grille, recherchez la vue de magasin que vous souhaitez configurer et cliquez sur Edit dans la colonne Action.
-
Sous Other Settings, développez
-
Pour Copyright, saisissez la notification 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. -
Une fois l’opération terminée, cliquez sur Save Configuration.
