Modifier le design de la page d’accueil

Vous pouvez utiliser un modèle monopage attrayant pour la page d’accueil afin de commencer rapidement à vendre vos produits en ligne. Votre site Web aura un aspect professionnel sur tous les appareils, ordinateurs de bureau, tablettes et appareils mobiles. Vous pouvez aisément modifier l’aspect de la page d’accueil à votre guise. Si vous n’êtes pas un technicien, vous pouvez choisir parmi les options d’aspect prédéfinies ou utiliser un design prédéfini d’un fournisseur tiers. Les utilisateurs expérimentés ayant des compétences en programmation peuvent effectuer des modifications CSS afin de donner un aspect unique à leur boutique.

Dans cet article:

Options d’aspect de la couverture de votre page d’accueil
Options de design prédéfinies pour votre boutique
Thèmes et applications préconfigurés
Thèmes CSS personnalisés

Options d’aspect de la couverture de votre page d’accueil

Vous pouvez utiliser une variété d’options de design prédéfinies pour modifier l’arrière-plan de votre page d’accueil et modifier les éléments qui s’y trouvent. Vous les trouverez dans le compte MyCOMMERCE → Starter site puis cliquez sur Modifier contenu dans la section En-tête et couverture.

Modifier contenu starter stie

Image d’arrière-plan

Dans le menu Paramètres d’arrière-plan, vous pouvez choisir entre les types de fond couleur, dégradé, image ou vidéo pour la première tuile de votre page d’accueil:

Image de couverture

L’option Couleur convient pour un aspect minimaliste ou pour une combinaison avec une image de couverture (voir les dispositions de couverture décrites ci-dessous). Vous pouvez définir n’importe quelle couleur comme arrière-plan de couverture:

Superposition de la couverture

Pour un aspect fantaisiste, essayez le type dégradé comme arrière-plan de couverture. Cela vous permet de sélectionner un dégradé de couleur dans la galerie ou de créer un mélange de deux couleurs au choix avec un angle personnalisé:

 type dégradé

Pour une image de couverture, vous pouvez télécharger une photo de vous-même ou de votre équipe en boutique, une photo de vos marchandises ou une autre image qui attire vos clients potentiels et leur donne une impression positive de votre entreprise. La taille de fichier recommandée pour l’image de couverture est de 1000 x 667 pixels ou plus, au format JPG, PNG ou GIF:

Image de couverture dans le shop

Astuce: Si vous n’avez pas de bonnes images pour la couverture, vous pouvez trouver de superbes photos sur des sites Web spécialisés comme Shutterstock, Stock.Adobe et autres.

Appliquez une surimpression à votre image de fond pour rendre le texte facile à lire (et créer une certaine ambiance). Il peut s’agir d’une surimpression monochrome ou d’un dégradé de couleur avec un angle personnalisé:

surimpression cover

Vous pouvez facilement ajouter une vidéo Youtube/Vimeo comme fond de couverture afin de présenter vos meilleurs produits ou d’animer votre page d’accueil pour un événement. Mettez simplement le lien de votre vidéo dans le champ de texte, enregistrez les modifications et la vidéo commence à se diffuser dans votre arrière-plan de couverture:

video comme couverture

Vous pouvez ajouter une surimpression (superposition de couleurs) à votre vidéo d’arrière-plan afin de rendre le texte facile à lire. Vous pouvez utiliser une couleur suggérée ou sélectionner n’importe quelle couleur ou dégradé pour la surimpression.


Disposition de couverture

La disposition de couverture vous permet de choisir comment l’image de couverture doit s’afficher sur la page. Vous avez le choix entre six options:

Titre de couverture

Si vous n’avez pas besoin d’image de couverture sur votre site Web, sélectionnez l’option Menu supérieur pour la transformer en un en-tête fine.

Vous pouvez également positionner et aligner le titre et la description pour trouver la meilleure place pour eux sur votre couverture.


Bouton d’appel à l’action

Le bouton d’appel à l’action dirige directement le client à la liste des produits. Celui-ci est activé par défaut et indique «Acheter maintenant»:

Bouton CTA

Vous pouvez modifier l’étiquette dans le champ Texte du bouton et utiliser un autre nom de votre choix. Par exemple, si vous vendez des billets en ligne, vous pouvez l’appeler «Réserver maintenant». Pour les produits numériques tels que les livres électroniques, les images ou tout autre élément téléchargeable, le bouton peut être nommé «Télécharger maintenant».


Typographie

Si vous spécifiez une couleur et une taille différentes pour le bouton d’appel à l’action et que vous souhaitez utiliser une police différente pour l’étiquette, vous pouvez effectuer ces modifications dans le menu Typographie qui apparaît ensuite. La couleur de la police s’ajuste automatiquement à la couleur du bouton sélectionné afin de rendre l’étiquette facile à lire.

Typographie vous permet également de modifier l’aspect du titre et de la description de la page d’accueil: sélectionnez la police souhaitée dans un menu déroulant contenant plus de 60 polices proposées, augmentez ou diminuez sa taille et choisissez une couleur.

Typographie

Logo de boutique

Sous le menu Logo de la boutique, vous pouvez télécharger un logo qui sera affiché aux clients sur les pages de la boutique. Votre logo original peut être assez grand. MyCOMMERCE l’adapte automatiquement au bloc de 480 x 140 pixels. Mais il ne doit pas faire moins que 140 x 140 pixels (ou au moins 280 x 280 pixels pour un bon rendu sur la rétine). Les formats d’image compatibles sont JPEG, PNG, GIF.

Astuce: Vous pouvez également télécharger un logo pour les factures. Il sera également affiché dans vos notifications de commande.

Une fois que vous avez téléchargé votre logo, vous pouvez l’orienter dans la bonne direction en sélectionnant l’option Logo rond:

Logo boutique

Flèche de défilement

Le menu de flèche de défilement vous permet de masquer la flèche qui guide les visiteurs du site Web vers la zone de la boutique, ou d’ajouter un texte qui les invite à visiter votre boutique:

Flèche de défilement

Menu supérieur

Menu supérieur vous permet de modifier l’aspect de la barre supérieure de votre page d’accueil:

  • Choisissez si vous voulez afficher votre numéro de téléphone dans l’en-tête ou sur la couverture:
Menu supérieur
  • Choisissez si vous voulez que vos liens vers les réseaux sociaux apparaissent dans l’en-tête ou sur la couverture de la page d’accueil:
Social Media liens

Vous pouvez également choisir de ne pas les afficher dans la première tuile. Dans ce cas, les liens vers les réseaux sociaux apparaîtront uniquement dans le pied de page de votre site Web.

  • Affichez les liens «Afficher l’itinéraire» et «Heures d’ouverture» dans la couverture en activant les champs pour les options «Afficher l’emplacement» et «Activer les heures d’ouverture» (tous deux vous mèneront à la section «Emplacement» de votre page d’accueil):
lieu et horaires d'ouverte
  • Affichez la navigation dans l’en-tête pour lui donner un aspect traditionnel. La navigation contient les liens vers les sections suivantes de votre page d’accueil monopage: Boutique, À propos, Emplacement, Contact:
Navigation
  • Vous pouvez activer Afficher le symbole de panier afin d’afficher le symbole de panier cliquable dans le coin supérieur droit du menu supérieur:

Après avoir cliqué, la page du panier de votre boutique s’ouvre, où les clients peuvent passer à la caisse ou continuer leurs achats.

icone du panier

Options de design prédéfinies pour votre boutique

Vous pouvez modifier l’aspect de votre boutique et lui donner le look qui reflète au mieux votre marque. Accédez aux options de design de boutique dans le compte MyCOMMERCE → Page d’accueil puis cliquez sur Modifier le contenu puis sur Design de la Boutique.

Design de la boutique

Remarque: Les options de design de boutique reproduisent les paramètres de votre compte MyCOMMERCE → Design. Les modifications que vous effectuez ici affectent toutes vos annonces de boutique.

Vous pouvez contrôler la taille des vignettes, le format d’image, l’orientation du texte et la bordure de la fiche produit en utilisant les options correspondantes:

Design de la boutique

Les grandes photos sont un bon choix pour présenter vos produits jusque dans les moindres détails. Les photos de taille moyenne conviennent à la plupart des produits, tandis que les petites photos vous permettent d’insérer plus de produits par page. Plusieurs options de format d’image permettent d’afficher de manière flexible des photos horizontales, verticales ou carrées de manière optimale.


Liste des produits et catégories

Développez le menu Liste de produits et catégories pour personnaliser l’aspect des pages où vos produits sont listés. Vous pouvez modifier la visibilité du nom du produit, du prix, de l’UGS, du bouton «Acheter maintenant» et de la photo du produit supplémentaire:

Liste de produits

Astuce: Si vous voulez un aspect plus aéré, vous pouvez désactiver les boutons Numéro d’UGS et Acheter maintenant ou les afficher uniquement lorsque vous passez votre souris dessus.

Si des cartes de catégories sont affichées sur la page d’accueil de la boutique, vous pouvez ajuster la position des noms de catégories.

Dans Bloc de navigation, vous pouvez activer et désactiver les options Fil d’Ariane et «Trier par»:

Navigation

En bas, vous pouvez activer l’option Assombrir l’arrière-plan des images pour les démarquer davantage sur l’arrière-plan de la boutique.


Page de produit

Dans le menu Page produit, vous trouverez des options de design prédéfinies qui vous permettent de personnaliser l’aspect des pages avec des informations détaillées sur vos produits. Vous pouvez modifier ici la mise en page, la disposition de la galerie d’images et les éléments de la barre latérale:

Page produit

Si vous voulez changer l’ordre des blocs dans la barre latérale, vous pouvez glisser-déposer les éléments dans la liste.

Astuce: Vous pouvez télécharger des photos supplémentaires de produits pour présenter votre article sous le meilleur angle. Pour les images de la galerie, vous pouvez télécharger des images zoomées avec les détails les plus importants de l’article, la vue latérale et arrière, des photos de produits associés ou d’autres accessoires.

Divers

Dans le menu Divers, vous pouvez modifier la visibilité des symboles affichés sous vos listes de produits. Vous pouvez désactiver le menu de pied de page, le lien «Inscription» et le Fil d’Ariane:

Navigation 2

Dans l’ensemble, les options d’aspect prédéfinies vous donnent beaucoup de liberté pour créer un site Web unique et professionnel qui présente vos produits d’une manière remarquable.

Thèmes et applications préconfigurés

Vous pouvez intégrer un thème de design d’un fournisseur tiers ou installer une application de l’App Market MyCOMMERCE qui vous aide à personnaliser l’affichage de votre boutique, à modifier les couleurs, les polices, les boutons, à ajouter des éléments supplémentaires sur la page, et bien plus encore.

L’application Imajize permet de télécharger des vues à 360° de vos produits pour présenter vos marchandises sous tous les angles. L’application Decorator vous aide à personnaliser votre boutique sans connaissances en CSS.

Allez dans votre compte MyCOMMERCE → Applications → Design de boutique pour voir la liste des designs prédéfinis, des outils de conception simples et des add-ons pour améliorer le Look and Feel de votre page d’accueil.

Thèmes CSS personnalisés (avancé)

Si l’affichage de votre boutique nécessite une personnalisation avancée et que vous maîtrisez le CSS, vous pouvez créer votre propre thème CSS à partir de zéro ou utiliser des tweaks CSS prêts à l’emploi depuis le centre d’assistance MyCOMMERCE, p. ex. modifier les boutons dans votre boutique MyCOMMERCE. Pour en savoir plus sur les thèmes CSS personnalisés, informez-vous sur le design personnalisé.