Conception et présentation

Ce guide ne traite pas des sujets suivants : tailles d'images, galerie et recadrage (guide « Images et médias »), slider, blocs de produits et fenêtres contextuelles de la page d'accueil (guide « Concevoir la page d'accueil »), les pages créées avec l'éditeur (guide xoContentEditor) et la nouvelle navigation par catégories à partir de XONIC 4.10 (guide Navigation par catégories).

Ce qui se passe après l'enregistrement

De nombreux paramètres de design sont intégrés à la feuille de style de la boutique. Lorsque vous enregistrez une valeur dans l’un de ces groupes sous Paramètres → Design: « Images », « Liste des produits », « Général », « Slider », « En-tête », « Couleurs », « Fiche produit », « Paiement » ou « Off-Canvas », la boutique efface alors sa feuille de style mise en cache et la reconstruit lors du prochain chargement de la page. Si Cloudflare est configuré, il vide également le cache à cet endroit. Vous n’avez pas besoin du bouton « Vider le cache du modèle » pour cela.

Si vous ne voyez pas immédiatement la modification, actualisez la page avec Ctrl+F5 (sur Mac : Cmd+Maj+R). Vérifiez toujours les modifications dans la boutique elle-même et sur un smartphone, voir Mobile & Tablette.

Couleur des badges de produit

Pour vos propres badges, tels que « Bio » ou « Made in Germany », définissez les couleurs sous Produits → Badges de produit au niveau du badge : « Couleur d’arrière-plan du badge » et « Couleur des caractères/du texte du badge ». Ces deux couleurs ne doivent pas être identiques. Le champ « CSS supplémentaire » permet d’ajouter d’autres spécifications, comme une bordure.

Les indicateurs attribués par la boutique elle-même ont, dans le modèle par défaut, des couleurs fixes offrant un contraste suffisant : la remise sur les offres spéciales, « Nouveau », « Top », « Lot », « Produit de deuxième choix », « FSK 18 », « Livraison gratuite » et « Offre exclusive ». Elles ne suivent pas les couleurs de la boutique. Vous pouvez définir d’autres couleurs à l’aide de votre propre CSS, voir « CSS personnalisé ».

Sous Paramètres → Design → En-tête, vous configurez la largeur et la hauteur du logo, les icônes, l’en-tête mobile et le menu des catégories. Cliquez pour agrandir.

Quelles catégories figurent dans le menu ?

Le menu contient les catégories pour lesquelles, sous Produits → Catégories / Produits, l’option « Catégorie comme onglet d’en-tête » est activée. Les sous-catégories apparaissent dans le menu déroulant lorsque l’option « Affichage des sous-catégories dans les onglets d’en-tête » est activée ; le nombre par colonne est défini par le paramètre « Sous-navigation des catégories d’en-tête : nombre maximal au 2e niveau de catégorie ».

Vous pouvez choisir la structure d’un menu déroulant pour chaque catégorie principale dans le champ « Modèle de navigation » ou pour toutes les catégories sous « Modèle de navigation par défaut » :

• simple: texte seul, pour un petit nombre de sous-catégories.
• imagecard: les sous-catégories à gauche, l’image et la description de la catégorie à droite.
• megamenu: pleine largeur avec plusieurs colonnes, pour les gammes de produits étendues.
• auto (par défaut) : la boutique effectue le choix en fonction de l’image, de la description et du nombre de sous-catégories.

Sur les smartphones et les tablettes que la boutique identifie comme des appareils mobiles, elle affiche toujours la version simple.

Noms de catégories longs

Si toutes les entrées ne tiennent pas dans la barre de menu, certaines passent sur une deuxième ligne. L’en-tête ne s’agrandit pas pour les accueillir : la première ligne est tronquée en haut, tandis que la deuxième déborde sur le côté. Veillez donc à ce que le menu reste suffisamment concis pour tenir sur une seule ligne :

1. Nom court, titre long : le menu affiche le « nom de la catégorie ». Saisissez-y une forme abrégée, par exemple « Jardin », et la désignation complète dans « Titre de catégorie différent ». La boutique affiche ce titre en haut de la page de catégorie.
2. Moins d’entrées : désactivez l’option « Catégorie comme onglet d’en-tête » pour les catégories qui ne doivent pas nécessairement figurer en haut. Pour qu’elles restent accessibles via le menu sur ordinateur, activez l’option « Afficher l’icône du menu en mode bureau » : le bouton ouvre le menu à gauche avec toutes les catégories.
3. Plus d’espace : réglez « Navigation en en-tête : position » sur below. Le menu occupera alors toute la largeur.

Avec XONIC 4.10, la navigation est désormais divisée en « À la une » et « Plus de catégories » : tout ce qui ne tient plus dans la barre est déplacé par la boutique vers le panneau « Plus de catégories », voir le guide « Navigation par catégories.ab » 4.10

Le menu à gauche sur le smartphone

Le bouton de menu ouvre à gauche un menu contenant toutes les catégories. Sous Paramètres → Design → Off-Canvas, vous définissez la profondeur du menu (« Off-Canvas à gauche : Profondeur maximale des catégories », par défaut 2) et si elle affiche des images de catégories (« Off-Canvas à gauche : afficher les images de catégories »). Moins de niveaux et l’absence d’images rendent le menu plus clair sur les petits écrans.

Avec XONIC 4.10, le menu de gauche a été repensé : chaque niveau ouvre un champ distinct avec un bouton « Retour », auquel s’ajoute une barre comportant des puces de catégories sous l’en-tête mobile, voir le guide Navigation par catégories.ab 4.10

Dans « Affichage des produits dans la liste des produits », chaque ligne correspond à une vue de la page de catégorie avec son propre nombre d'éléments par page et ses propres informations sous forme de vignette ou de ligne. Cliquez pour agrandir.

Colonnes et vignettes

• Vignettes de catégories : « Vignettes de catégories : nombre de colonnes » définit le nombre de vignettes des sous-catégories et des catégories principales affichées côte à côte, séparément pour les smartphones, les tablettes et les ordinateurs. Vous avez le choix entre « Standard (1 / 2 / 3) », « Compact (1 / 2 / 4) », « Nombreuses catégories (2 / 3 / 6) » ou vos propres valeurs. Moins il y a de colonnes, plus les images des catégories sont grandes.
• Produits sur smartphone : « Nombre de produits côte à côte (mobile) » permet d’afficher, sur les écrans étroits, un produit par ligne en pleine largeur (1) ou deux côte à côte (2, par défaut).
• Couleur d’arrière-plan des blocs de produits : dans le « Configurateur de présentation et de commercialisation des produits », chaque ligne comporte la colonne « Arrière-plan ». La couleur s’applique précisément à ce bloc sur cette page.ab 4.9.135

Noms des articles : lignes et majuscules

Il n’existe pas de paramètre permettant de définir une taille de police spécifique pour les noms d’articles. Vous devez la définir via votre propre feuille de style CSS.

Effets au survol

Lorsque la souris survole une vignette de catégorie, celle-ci projette une légère ombre, l’image s’agrandit légèrement et le nom s’affiche dans la couleur principale. Il n’y a pas de bouton pour activer ou désactiver cet effet ; vous pouvez le désactiver via votre propre CSS. Pour les vignettes de produits, vous contrôlez l’affichage des boutons via la colonne « Boutons » (en haut). Le changement d’image au survol est décrit dans le guide Images & Médias.

Meilleures ventes et autres blocs de produits

Les lignes « Meilleures ventes », « Nouveautés et coups de cœur » ou « Offres spéciales » situées au-dessus et en dessous de la liste proviennent du « Configurateur de présentation et de commercialisation des produits » du même groupe. Chaque ligne correspond à un bloc avec un type et une page de destination. Pour les pages de catégories, ce sont les lignes comportant « / Catégories » qui comptent : vous pouvez supprimer le bloc « Meilleures ventes » en supprimant la ligne « Meilleures ventes / Catégories » à l’aide de la corbeille, puis en enregistrant. Les colonnes sont expliquées dans le guide « Concevoir la page d’accueil ».

Sous Paramètres → Apparence → Fiche produit, vous définissez l’emplacement de la description et les éléments de contrôle affichés sur la page produit. Cliquez pour agrandir.

La description sur smartphone

Sur les appareils mobiles, la description n’apparaît pas par défaut sous les images, mais sous forme d’onglet replié dans la zone où se trouvent le prix et le bouton « Panier ». Deux façons de la rendre immédiatement visible :

• « Fiche produit : onglet de description déplié » sur true: l'onglet est déjà ouvert à l'ouverture de la page.
• « Fiche produit : emplacement de la description sur les appareils mobiles » sur inherit: la description se trouve là où « Fiche produit : emplacement de la description » la place sur un ordinateur, c’est-à-dire par défaut sous les images. 4.9.6

« Colonne de description déployée (écrans étroits) » ne s'applique qu'à la description située sous les images dans une fenêtre de navigateur étroite sur ordinateur, et non sur smartphone.

Autres boutons

Loupe de zoom

Par défaut, la page produit affiche les images selon le modèle gallery: un clic sur une image ouvre un agrandissement. La loupe qui apparaît au survol n’est disponible que dans l’affichage classique legacy (Paramètres → Design → Fiche produit → Affichage des images dans la fiche produit). Vous pouvez la désactiver via Paramètres → Design → Images → Type de zoom des images de produit = none.

Flèches sur la page du produit

Les flèches apparaissent à deux endroits. Pour les flèches de la galerie d’images, consultez la section « Flèches de navigation sur mobile » ci-dessus et le guide Images & Médias. Les rubriques « Les clients ont également acheté » et « Nous recommandons également » s’affichent sous forme de diaporama : avec Paramètres → Design → Liste des produits → Diaporama de produits : Style de navigation = modern (par défaut), les boutons de navigation n’apparaissent sur l’ordinateur que lorsque l’on passe la souris dessus. Pour supprimer complètement les flèches, dans le « Configurateur de présentation et de commercialisation des produits », dans la ligne « Les clients ont également acheté / Produits » ou « Nous recommandons également / Produits », réglez la colonne « Slider » sur Non ; les produits s'affichent alors en lignes les unes sous les autres.

Où se trouve chaque module ? Le mode de modification

Sous Paramètres → Design → Général, l’onglet « Mode édition de la vue client » ouvre votre boutique dans un affichage spécifique. Devant chaque bloc du Gestionnaire CMS apparaît alors un bouton rouge portant son nom, par exemple « [Page CMS : $cms_footer] ». Un clic ouvre le bloc dans le backend dans une nouvelle fenêtre. En bas à gauche se trouve la boîte « Mode modification » ; la croix qu’elle contient vous permet de quitter cette vue. En bas de page, la boîte masque les boutons de gauche dans le pied de page. Vous pouvez ensuite ouvrir ces blocs directement sous CMS → Gestionnaire CMS.

En mode édition, un bouton rouge portant le nom de chaque bloc du Gestionnaire CMS apparaît devant celui-ci ; la zone « Mode édition » se trouve en bas à gauche de la fenêtre (masquée dans la section du pied de page). Cliquez pour agrandir.

Si un texte ne comporte pas de bouton rouge, il provient du masque d’article ou de xoLanguage. Pour accéder au mode de modification, les collaborateurs doivent également disposer d’un droit de lecture pour redirect.php, dans l’éditeur de droits sous « Autres zones (sans rubrique de menu) », voir le guide Collaborateurs, droits et 2FA.ab 4.9.24

Si votre numéro de téléphone change, modifiez-le également dans les « arguments d’en-tête » et sous Paramètres → Général → Paramètres de base. Les coordonnées du pied de page ne sont pas reprises à partir de là.

Votre propre fenêtre contextuelle, la boîte d’information, ainsi que les fenêtres contextuelles pour la newsletter, le groupe de clients, le pays de livraison et la devise sont décrites dans le guide « Concevoir la page d’accueil ». Configurez la fenêtre relative aux cookies en suivant le guide « Mentions légales, bannière de cookies et sécurité des produits ».

Sous Paramètres → Design → Général, sélectionnez le modèle et la police ; les onglets situés au-dessus permettent de vider le cache du modèle, d’importer une police ou d’ouvrir le mode de modification. Cliquez pour agrandir.

Mise en page de pages individuelles sans fichier CSS

• Dans xoContentEditor, chaque élément dispose, sous « Mise en page et affichage », du champ « Classes individuelles ». Vous y saisissez les classes qui existent déjà dans le modèle, ainsi que la couleur d’arrière-plan, les espacements et la visibilité selon l’appareil ; voir le guide xoContentEditor.
• Dans l’éditeur de texte standard, la boîte de dialogue permettant d’insérer un lien propose, dans le champ « Classe », des styles de boutons prédéfinis, tels que « Button Primary ».
• Les règles devant s’appliquer à plusieurs pages doivent être définies dans le fichier CSS du modèle, et non dans les contenus individuels.

Que se passe-t-il lors d’une mise à jour ?

• Le dossier de votre propre modèle reste inchangé lors de la mise à jour.
• Les nouvelles fonctionnalités présentes dans les modèles que votre modèle personnalisée intègre n’apparaîtront qu’une fois ces modèles adaptés. Moins votre modèle personnalisée copie de modèles, plus la mise à jour s’effectue automatiquement.
• Prenons l’exemple de la nouvelle navigation dans XONIC 4.10 : dans un modèle disposant de son propre en-tête, l’ancien menu continue de fonctionner jusqu’à ce que les modèles soient repris ; voir le guide « Navigation par catégories ».

Changer de modèle sans perdre vos personnalisations

Les personnalisations dans votre dossier de modèles, c’est-à-dire vos propres modèles et votre propre CSS, ne s’appliquent que tant que ce modèle est sélectionné. Si vous en sélectionnez un autre, elles ne seront plus visibles dans la boutique ; elles ne seront toutefois pas supprimées. Les programmations en dehors du modèle, telles que les fonctionnalités supplémentaires dans le backend, ne dépendent pas du modèle. Certaines programmations spécifiques comportent toutefois une partie intégrée au modèle.

Sous « Changement de modèle dans les catégories » (même groupe), vous pouvez attribuer un autre modèle à une catégorie principale et à ses sous-catégories, par exemple pour une rubrique promotionnelle. Il vous suffit ensuite de le sélectionner dans la catégorie.

Applications personnalisées dans la boutique

Il n’est pas possible d’intégrer un configurateur personnalisé ou une autre application utilisant des scripts via un champ de texte : l’xoContentEditor supprime les scripts lors de l’enregistrement. Si le fournisseur propose une intégration via iframe, utilisez le module « Code / HTML personnalisé », voir le guide xoContentEditor. Si l’intégration charge du contenu provenant d’un fournisseur tiers, veillez à respecter les conditions de consentement, voir le guide « Textes juridiques, bannières de cookies et sécurité des produits ». Pour toute autre demande, nous réalisons une programmation sur mesure.

La même page de catégorie sur un ordinateur (1 440 pixels) et sur un smartphone (390 pixels) : en dessous de 1 200 pixels de largeur, le bouton de menu et le champ de recherche remplacent la barre de menu. Cliquez pour agrandir.

Pourquoi il manque quelque chose sur la tablette

La barre de menu est absente en mode paysage si la tablette mesure moins de 1 200 pixels de large : les catégories apparaissent alors derrière le bouton de menu. Une tablette peut par ailleurs être suffisamment large pour afficher la barre de menu tout en étant considérée comme un appareil mobile ; elle ressemble alors à un ordinateur, mais affiche par exemple la description sous forme d’onglets. Les tablettes considérées comme des appareils mobiles dépendent de l’identifiant envoyé par leur navigateur.

Comment vérifier l'affichage mobile

• Le moyen le plus fiable consiste à utiliser un véritable smartphone.
• Sur un ordinateur, utilisez le mode « Appareil » des outils de développement de votre navigateur (F12), qui envoie également l'identifiant d'un smartphone. Rechargez ensuite la page.
• Une fenêtre de navigateur simplement rétrécie affiche certes l’en-tête mobile, mais pas le contenu destiné aux appareils mobiles.

Paramètres pour l’affichage mobile

Dans xoContentEditor, vous pouvez définir la largeur, l’ordre et la visibilité de chaque élément séparément pour les ordinateurs de bureau et les appareils mobiles ; voir le guide xoContentEditor.

• Si vous utilisez vos propres couleurs, vérifiez que le texte reste bien lisible. Cela vaut particulièrement pour les couleurs primaires claires et le texte sur fond coloré dans les blocs de produits.
• Ne désactivez pas les indicateurs et les libellés de manière à ce que les informations ne soient plus reconnaissables qu’à travers la couleur.
• Ce que la boutique met à votre disposition et ce qui relève de votre responsabilité est détaillé dans le guide « Mentions légales, bannières de cookies et sécurité des produits ».