Configuration de la conception du site instantané (héritage)

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 l'administration de votre boutique → Site Web. Les utilisateurs compétents en codage peuvent se plonger dans les modifications CSS pour créer un look unique pour leur boutique.

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 l'administration de votre boutique → Site Web, cliquez sur Modifier, puis sur Organiser les sections :

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.

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 l'administration de votre boutique allez sur Site Web→ Apparence du site→ cliquez sur Modifier → Thèmes. Choisissez le thème qui convient le mieux à votre entreprise :

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é :

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 :

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é :

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 :

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é :

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 :

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 :

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 » :

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.

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.

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, nous le redimensionnerons 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 de votre boutique, 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 .
   
   
   

Si vous souhaitez utiliser le favicon et masquer le logo, vous pouvez le faire avec un code CSS :

1. Depuis l'interface d'administration de votre boutique, accédez à Conception.
2. Cliquez sur Modifier le thème si vous avez un thème CSS personnalisé actif ou descendez vers le bas de la page et cliquez sur Créer un thème → Ajouter un nouveau thème CSS.
3. Collez le code suivant dans votre thème CSS :
   

   div.cover__logo { display: none;}

4. Enregistrez les modifications.

Actualisez la page de la vitrine pour voir les modifications.

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 :

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.

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 :

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 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 :

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 :

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 :

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'images et Barre latérale :

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.

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 :

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.

Articles connexes

Connexion d'un domaine à un site instantané