Base de connaissances
Guides
Académie
Tutoriels vidéo
Appuyez sur la touche échap pour quitter :
Articles consultés récemment :

Sommaire

Configuration de la conception du site instantané (version originale)

Vous pouvez utiliser un modèle réactif de site instantané pour commencer rapidement à vendre vos produits en ligne. Votre site aura un aspect professionnel sur tous les appareils, ordinateur de bureau, tablette et mobile. Vous pouvez facilement changer l'apparence des sites instantanés à votre guise. Si vous n'avez pas de connaissances en informatique, vous pouvez choisir parmi les options d'apparence prédéfinies dans votre administration Ecwid → Site Web. Les utilisateurs compétents en codage peuvent se plonger dans les modifications CSS pour créer un look unique pour leur boutique.

Cet article concerne la version originale de notre site instantané qui n'est plus disponible pour les nouveaux boutiques Ecwid. Si vous recherchez des directives sur la façon de modifier la conception du site instantané de nouvelle génération (maintenant disponible par défaut), consultez notre article dédié sur la configuration du site instantané de nouvelle génération

Ordre des sections

Un site instantané se compose des sections suivantes :

  • Couverture (la première tuile)
  • Boutique
  • Mission de la société (pourquoi nous choisir)
  • À propos
  • Témoignages de clients
  • Emplacement
  • Coordonnées 

Vous pouvez masquer n'importe quelle section du site instantané et modifier leur ordre de la manière souhaitée. Pour cela, allez dans votre administration Ecwid → Site Web, cliquez sur Modifier, puis sur Organiser les sections :

Screen_Capture_on_2019-10-11_at_21-51-23.gif

Par exemple, si vous venez de mettre en place votre boutique, vous pouvez masquer la section Témoignages de clients jusqu'à ce que vous recueilliez les commentaires de vos clients. Si votre activité est saisonnière, vous pouvez facilement masquer la partie boutique de votre site instantané, puis la rouvrir à votre retour. Si vous souhaitez afficher votre image de couverture plus bas, vous pouvez la déplacer sous une autre section de votre site instantané, etc.

Si vous n'avez pas besoin de couverture, vous pouvez la transformer en un menu supérieur étroit.

Thèmes pour la couverture

La section de couverture présente votre boutique à vos clients. Vous pouvez choisir l'un des 79 thèmes pour l'image de couverture de votre boutique. Pour cela, depuis votre administration Ecwid allez sur Site Web→ Apparence du site→ cliquez sur Modifier → Thèmes. Choisissez le thème qui convient le mieux à votre entreprise :

Choose_a_design_theme_for_instant_site.png

Vous pouvez également modifier le thème choisi : téléversez votre propre image de couverture, modifiez la typographie, etc. Vous pouvez le faire dans les sections appropriées de l'éditeur de site instantané. 

Arrière-plan de la couverture

Dans le menu Options d'arrière-plan vous pouvez choisir parmi les types d'arrière-plan Couleur, Dégradé, Image ou Vidéo pour la première tuile de votre site instantané :

Type d'arrière-plan pour la couverture du site instantané

L'option Couleur est bonne pour un look minimaliste ou pour une combinaison avec une image de couverture (voir à propos des mises en page ci-dessous). Vous pouvez définir n'importe quelle couleur comme fond de couverture :

Couleur d'arrière-plan pour la couverture du site instantané

Pour une apparence plus sophistiquée, essayez le type Dégradé comme fond de couverture. Vous pouvez choisir un dégradé dans la galerie ou faire un mélange de deux couleurs avec un angle préféré :

Arrière-plan en dégradé pour la couverture du site instantané

Pour l'image de couverture, vous pouvez téléverser une photo de vous ou de l'équipe de votre boutique, une image mettant en vedette vos produits ou toute autre image qui attirera vos clients potentiels et leur donnera une impression positive sur votre entreprise. La taille de fichier recommandée pour l'image de couverture est 1400 x 1050 pixels ou plus, au format JPG, PNG ou GIF :

Image d'arrière-plan pour la couverture du site instantané

Si vous n'avez pas de bonnes photos pour l'image de couverture, vous pouvez trouver de belles photos sur les sites web de banques de données, comme Shutterstock, Depositphotos, Pixabay, et autres.

Appliquez une superposition à votre image de fond pour faciliter la lecture du texte (ainsi que pour définir une certaine humeur). Il peut s'agir d'une superposition d'une couleur ou d'un dégradé avec un angle personnalisé :

Superposition pour l'image de couverture du site instantané

Vous pouvez facilement ajouter une vidéo Youtube/Vimeo comme fond de couverture pour présenter vos meilleurs produits ou pour animer votre site instantané pour un événement : il suffit de mettre le lien pour votre vidéo dans le champ de texte, enregistrer les modifications et la vidéo sera lue sans son dans votre arrière-plan de couverture :

Vidéo en tant qu'arrière-plan de couverture dans Ecwid

Vous pouvez ajouter une superposition à votre vidéo de fond pour que le texte soit facile à lire. Vous pouvez utiliser une suggestion ou choisir n'importe quelle couleur ou dégradé pour une superposition.

Mise en page de la couverture

Dans Mise en page de la couverture vous pouvez choisir quelle partie de la première case de votre couverture doit prendre. Il y a six options parmi lesquelles choisir :

Mise en page de couverture dans le site instantané Ecwid

Si vous choisissez une mise en page demi-écran ou une barre latérale avec une image de couverture en arrière-plan, la taille recommandée pour l'image de couverture est de1800х700px ou 1200х1200 px respectivement.

Si vous n'avez pas besoin d'une couverture dans votre site, choisissez l'option Menu supérieur pour la transformer en en-tête étroit.

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

Bouton d'appel à l'action

Le Bouton d'appel à l'action permet aux clients d'accéder directement à la liste des produits. Par défaut, il est activé et dit « Acheter maintenant » :

Bouton d'appel à l'action dans la couverture du site instantané

Vous pouvez modifier le libellé dans le champ Étiquette du bouton et utiliser n'importe quel autre nom de votre choix. Par exemple, si vous vendez des billets en ligne, vous pouvez le nommer « Réserver maintenant ». Pour les produits numériques comme les livres électroniques, les images ou tout autre matériel téléchargeable le bouton peut dire « Télécharger maintenant ».

Typographie en couverture

Si vous voulez définir une autre couleur et taille pour le bouton d'appel à l'action et utiliser une police différente pour son étiquette, vous pouvez faire ces modifications dans le menu Typographie qui vient ensuite. La couleur de police s'adapte automatiquement à la couleur du bouton choisi pour faciliter la lecture de l'étiquette.

En outre, sous Typographie, vous pouvez changer l'apparence du titre et de la description du site instantané : sélectionnez la police désirée dans un menu déroulant avec plus de 60 polices suggérées, augmenter ou diminuer la taille de la police et choisir la couleur de la police.

Typographie dans l'éditeur de site instantané

Pour trouver les couleurs correspondantes aux éléments de couverture, vous pouvez utiliser des sites comme Canva et Color Hunt pour une inspiration de palette de couleurs ou téléverser votre image de couverture sur un service comme un sélecteur de couleurs d'image pour trouver les codes exacts de ses couleurs.

Logo de la boutique

Vous pouvez téléverser un logo qui sera affiché sur vos pages de vitrine. Ce logo sera également utilisé par défaut dans vos notifications par e-mail, vos factures et comme un favicon.

Si vous changez ultérieurement le logo de la boutique, vous devrez également téléverser manuellement le nouveau logo dans les paramètres des notifications par e-mail et des factures

Le logo de la boutique ne devrait pas être inférieur à 140 x 140 px (ou au moins 280 x 280 px pour bien rendre sur Retina). Vous pouvez téléverser une image plus grande. Dans ce cas, Ecwid la redimensionnera automatiquement pour tenir dans le bloc logo de 480 x 140 px.

Les formats d'image pris en charge sont JPEG, PNG, GIF.

Pour ajouter un logo à votre vitrine : 

  1. À partir de l'interface d'administration d'Ecwid, accédez à Site Web et cliquez sur Modifier.
  2. Sur la page ouverte, cliquez sur Titre et image de couverture.
  3. Faites défiler vers le bas et cliquez sur Logo de la boutique
  4. Cliquez sur Charger le logo.
  5. Dans le menu déroulant Position du logo, choisissez où vous voulez afficher le logo. Il y a aussi une option pour masquer le logo et l'utiliser uniquement pour la favicon.
  6. Si vous voulez faire arrondir votre logo, activez l'option Logo rond .

    Upload_store_logo.png

Flèche de défilement

Sous le menu Flèche de défilement vous pouvez cacher la flèche qui amène les visiteurs du site à la section boutique ou ajouter un texte pour encourager les gens à visiter votre boutique :

Flèche de défilement dans la couverture du site instantané

Menu supérieur 

Sous Menu supérieur vous pouvez personnaliser l'apparence de la barre du haut de votre site instantané et choisir les informations que vous souhaitez afficher dans l'en-tête : numéro de téléphone, heures d'ouverture, emplacement, liens vers les réseaux sociaux, etc.

Screenshot_2020-10-06_at_10.11.32.png

Pour modifier l'en-tête et lui donner un aspect plus traditionnel, activez l'option Afficher la navigation. La navigation inclut des liens vers les sections suivantes de votre site instantané d'une seule page : Boutique, À propos de nous, Emplacement, Nous contacter :

Afficher la navigation dans le Menu supérieur du site instantané

Options de design prédéfinis pour votre boutique

Vous pouvez changer l'apparence de votre boutique et lui donner l'apparence qui correspond le mieux à votre marque. Voici comment accéder aux paramètres du design :

Vous pouvez accéder aux options de design de la boutique dans votre administrateur Ecwid, allez sur Site WebModifierBoutique.

Vue d'ensemble du design de la boutique

Les options de design de la Boutique répliquent les paramètres de la page Conception dans votre administration Ecwid. Les modifications que vous apportez ici affecteront toutes vos vitrines.

Vous pouvez contrôler la taille de la miniature, le format d'image, l'alignement du texte et la bordure de la fiche produit à l'aide des options correspondantes :

Conception de la boutique dans l'éditeur de site instantané

Les grandes images sont un bon choix pour présenter vos produits dans les moindres détails. Les images moyennes conviennent à la plupart des produits, tandis que les petites images peuvent contenir plus de produits par page. Plusieurs options de format d'image offrent un moyen flexible d'afficher au mieux des images horizontales, verticales ou carrées.

Liste des produits et catégories

Développez la Liste des produits et catégories pour personnaliser l'apparence des pages sur lesquelles vos produits sont répertoriés. Vous pouvez modifier la visibilité du Nom du Produit, Prix, UGS, du bouton « Acheter maintenant » et l'image supplémentaire de produit :

Paramètres de la liste des produits dans la boutique Ecwid

Si vous souhaitez avoir un look plus aéré, vous pouvez désactiver le numéro d'UGS et les boutons Acheter maintenant ou les afficher uniquement au survol de la souris.

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

Sous le bloc Navigation vous pouvez allumer/éteindre le Fil d'Ariane et les Options de tri :

Navigation dans la boutique Ecwid

Ci-dessous, vous pouvez activer l'option Assombrir l'arrière-plan des images pour les rendre plus visibles sur l'arrière-plan de la boutique.

Page des produits

Dans le menu Page de produit, vous pouvez trouver des options de conception prédéfinies pour personnaliser l'apparence des pages avec des informations détaillées sur vos produits. Ici, vous pouvez modifier les éléments Mise en page, Mise en page de la galerie d'imageset Barre latérale :

Paramètres de la page des produits dans la boutique Ecwid

Si vous souhaitez modifier l'ordre des blocs dans la barre latérale, vous pouvez faire glisser et déposer les éléments dans la liste.

You can upload additional product images to demonstrate your item from the best angle. Pour les galeries d'images, vous pouvez téléverser des images zoomées montrant les détails les plus essentiels de l'élément, vue latérale et arrière, photos de produits assortis ou accessoires additionnels.

Divers

Dans le menu Divers, vous pouvez ajuster la visibilité des icônes qui apparaissent sous vos listes de produits. Vous pouvez désactiver le Menu de pied de page, le lien « Connexion » et le fil d'Ariane :

Navigation sous la liste des produits dans la boutique Ecwid

Dans l'ensemble, les options d'apparence prédéfinies vous donnent beaucoup de liberté dans la construction d'une page Web d'apparence professionnelle unique qui met en valeur vos produits d'une manière remarquable.

Si votre vitrine nécessite une personnalisation avancée et que vous connaissez le CSS, vous pouvez construire votre propre thème CSS  à partir de zéro ou utiliser des modifications CSS prêtes à l'emploi à partir du centre d'aide Ecwid. Si vous n'êtes pas à l'aise avec le codage, mais que vous voulez un thème CSS personnalisé pour votre boutique, nos experts peuvent créer une conception personnalisée pour vous sur une base payante.

Articles connexes

Connexion de votre domaine à un site instantané Ecwid
Options de personnalisation dans Ecwid

Cet article vous a-t-il été utile ?

Génial ! Merci pour vos commentaires !

Merci pour vos commentaires !

Nous sommes désolés ! Que s'est-il passé ?
Utilisateurs qui ont trouvé cela utile : 19 sur 25
10
Nous utilisons des cookies et des technologies similaires pour garder vos préférences en mémoire, mesurer l'efficacité de nos campagnes et analyser des données anonymisées afin d'améliorer les performances de notre site. En choisissant « Accepter », vous acceptez l'utilisation de cookies.
Accepter les cookies Refuser