Personnaliser la page d'accueil
Slider, bannières, message d'accueil, blocs de produits tels que les nouveautés et les offres spéciales, vignettes avec liens vers les catégories, en-tête, pied de page et fenêtres contextuelles : ce guide vous indique où modifier chaque élément de votre page d'accueil et répond aux questions qui nous sont le plus souvent posées au service d'assistance.
En un coup d'œil
- Texte d'accueil : sous CMS → Gestionnaire CMS, dans le module «
$cms_startseite», pour chaque langue. - Slider : sous Paramètres → Design → Slider; les dimensions des images pour les ordinateurs de bureau et les appareils mobiles sous Paramètres → Design → Images.
- Blocs de produits : Nouveautés, Offres spéciales, Meilleures ventes et Contenus personnalisés, y compris leur ordre d’affichage, sous Paramètres → Design → Liste des produits → Configurateur de présentation et de commercialisation des produits. Chaque bloc affiche entre 4 et 16 produits ; sur les smartphones, la moitié.
- En-tête et pied de page : numéro de téléphone et avantages dans les « arguments d’en-tête », liens du pied de page et mentions de copyright dans les modules
$cms_footer_naviet$cms_footer. - Fenêtre contextuelle : la boîte d'information
$cms_adviceest votre fenêtre contextuelle personnalisable. La page de maintenance s'affiche à chaque sauvegarde des données.
Dans ce guide
Voici comment est structurée la page d'accueil
La page d'accueil se compose de sections que vous gérez à différents endroits dans l'interface d'administration. Dans le modèle standard, elles s'affichent les unes en dessous des autres dans cet ordre. Une section vide ou désactivée est simplement omise.
| Zone | Où la gérer |
|---|---|
| Bannière au-dessus du slider | Outils → Gestionnaire de bannières, groupe de bannières « index_static », voir Bannières |
| Slider | Paramètres → Design → Slider, voir Slider |
| Texte d'accueil | CMS → Gestionnaire CMS, module « $cms_startseite », voir Texte de la page d'accueil |
| Vignettes des catégories principales | Paramètres → Design → Général, voir « Tuiles » |
| Conseiller produits | Produits → Conseiller produit, bouton « Afficher sur la page d'accueil » |
| Blocs de produits tels que les nouveautés, les offres spéciales et les best-sellers, entrecoupés de contenus personnalisés | Paramètres → Apparence → Liste des produits, voir Blocs de produits |
| Ligne d’icônes présentant vos atouts | Paramètres → Design → Général → Arguments de la zonecentrale, voir « Barre d’icônes » |
| Actualités | CMS → Articles d'actualité; le nombre d'articles affichés sur la page d'accueil est défini dans Paramètres → Design → Articles d'actualité → Nombre d'articles sur la page d'accueil (10 par défaut), voir le guide sur les articles d'actualité |
| Texte SEO | CMS → Gestionnaire CMS, module $cms_seo_startseite |
| Logos de marques | Produits → Fabricants, pour chaque fabricant, l'option « Mettre le fabricant en avant sur la page d'accueil » |
La page d'accueil dans le modèle standard, de haut en bas : diaporama, texte d'accueil, vignettes des catégories principales, un bloc produit et la barre d'icônes présentant vos atouts. Cliquez pour agrandir.
L'en-tête, le menu et le pied de page font partie de chaque page ; ils sont décrits plus bas dans les sections « En-tête » et « Pied de page ». Vous ne pouvez pas modifier l'ordre des sections via un paramètre. En revanche, c'est vous qui déterminez ce qui apparaît entre les blocs de produits ; voir « Contenus personnalisés ». Si vous utilisez votre propre modèle, la structure de votre page d'accueil peut être différente.
Texte de la page d'accueil et texte SEO
Le texte d’accueil situé sous le diaporama et le texte supplémentaire plus bas sont deux modules du Gestionnaire CMS : $cms_startseite et $cms_seo_startseite.
- Sous CMS → Gestionnaire CMS, saisissez « page d’accueil » dans le champ de recherche. La liste affiche les deux modules.
- Pour
$cms_startseite, sélectionnez « Modifier » dans le menu d’actions et mettez à jour le texte dans l’onglet correspondant à chaque langue. Le nom du module est fixe et n’apparaît pas dans la boutique. - Enregistrez et actualisez la page d'accueil.
Si le texte manque
La boutique n’affiche le texte que si l’option « Statut » est activée pour le module et s’il existe du texte dans la langue du visiteur. Il n’y a pas de repli sur l’allemand. Si deux entrées actives portant le même nom sont présentes dans le Gestionnaire CMS, l’emplacement reste vide. Un modèle personnalisé plus ancien nécessite en outre l’espace réservé pour le texte.
Supprimer le titre
Le texte d’accueil ne dispose pas d’un bouton pour l’en-tête : l’en-tête, par défaut « Bienvenue… », fait partie intégrante du texte. Supprimez-le dans l’éditeur. Sur une page CMS que vous insérez entre les blocs de produits, la colonne « Titre » masque le nom, voir Contenus personnalisés.
Texte SEO en bas
$cms_seo_startseite se trouve en bas de la page d'accueil, sous les actualités. Il n'apparaît que si l'option Paramètres → SEO / SEA → Paramètres SEO → Paramètres SEO avancés est activée et que le module contient du texte, et pas seulement une image.
Vous pouvez définir la couleur, l’alignement et le formatage du texte à l’aide de la barre d’outils de l’éditeur. Avec xoContentEditor, vous construisez le texte à partir de modules tels que des cartes, des images et des boutons, voir le guide xoContentEditor. Le guide « Gestionnaire CMS et e-mails » explique le fonctionnement général des pages et des modules dans le Gestionnaire CMS.
Slider de la page d’accueil
Vous pouvez gérer le grand diaporama en haut de la page d’accueil sous Paramètres → Design → Diaporama, dans l’onglet « Personnaliser le diaporama (page d’accueil) ». Cet onglet s’affiche tant que le bouton « Diaporama » est activé sur cette même page.
- « Ajouter un élément de diaporama » permet de créer une nouvelle diapositive. La boutique recommande d’utiliser entre 3 et 6 diapositives afin que la page d’accueil se charge rapidement.
- En haut de la diapositive figurent le nom et le « Statut ». Dans la diapositive déployée, sélectionnez le « Type de diaporama » et définissez la destination. Le « Tri » détermine l’ordre d’affichage, le plus petit nombre apparaissant en premier. Les champs « Date de début » et « Date de fin » vous permettent d’afficher une diapositive uniquement pendant une période donnée, ces deux dates incluses ; si ces champs sont vides, l’affichage est illimité.
- Dans l’onglet de chaque langue, saisissez le « Nom de la diapositive » (qui sert également de texte alternatif pour l’image), l’« Image » et, si nécessaire, l’« Image (mobile) ». À la place d’une image, vous pouvez utiliser une « Vidéo » au format MP4, avec une version spécifique pour les appareils mobiles si vous le souhaitez.
- La « Description » correspond au texte figurant sur l’image. « Alignement du texte du diaporama » permet de l'aligner à gauche, au centre ou à droite, tandis que « Largeur du texte du diaporama (en %) » définit sa largeur. Le texte apparaît sur un fond clair semi-transparent : utilisez une police foncée, car le blanc n'est pas lisible dans ce contexte.
- Enregistrez. Pour supprimer la diapositive, cliquez sur la corbeille rouge en haut de la diapositive, puis enregistrez.
Une diapositive de la page d’accueil : la destination du lien, l’ordre et la période figurent dans l’en-tête, les images et le texte dans l’onglet de la langue. Cliquez pour agrandir.
Dimensions des images pour ordinateur et smartphone
Quelles dimensions ?
Les dimensions se trouvent sous Paramètres → Design → Images: « Largeur du diaporama (grand format) » et « Hauteur du diaporama (grand format) » pour les ordinateurs de bureau, « Largeur du diaporama (grand format/mobile) » et « Hauteur du diaporama (grand format/mobile) » pour les appareils mobiles. Par défaut, les deux sont de 2280 × 962 pixels, soit un format paysage. Téléchargez les images exactement dans ce rapport d’aspect ; le masque indique les valeurs actuelles sous le champ d’image. Si vous modifiez les dimensions, la boutique génère à nouveau les versions réduites.
Quand l’image mobile s’affiche-t-elle ?
La boutique en ligne reconnaît les smartphones et les tablettes grâce à l’identifiant du navigateur, et non à la largeur de la fenêtre. Vous obtenez alors l’« image (mobile) », sinon l’image normale, toutes deux adaptées aux dimensions mobiles. Une image mobile n’est effective que si une image standard est également enregistrée. Si vous souhaitez afficher un format portrait sur mobile, définissez les dimensions mobiles en format portrait et enregistrez une image mobile pour chaque diapositive ; sinon, l’image standard sera fortement recadrée.
Barres blanches sur l’image
Si le format de votre image diffère des dimensions définies, la boutique en ligne la recadre en conséquence, à condition que l’option « slider » soit sélectionnée dans Paramètres → Design → Images → Fonction de recadrage pour les images (c’est le cas par défaut). Sans cette sélection, elle affiche l’image dans son intégralité et remplit le reste avec « Vignettes : couleur d’arrière-plan », blanche par défaut. Avec « Slider plein écran », des espaces restent libres à gauche et à droite sur les écrans plus larges que la « Largeur du slider (grand) ».
Texte sur smartphone
Il n’existe pas de description spécifique pour les appareils mobiles. Sur les smartphones, la description est centrée ; le paramètre « Largeur du texte du slider (en %) » ne s’applique pas ici. Veillez donc à ce que le texte soit court afin qu’il ne masque pas l’image.
Si vous remplacez une image, téléchargez-la sous un nouveau nom de fichier. La boutique en ligne ne génère les versions réduites que pour les fichiers qu’elle ne connaît pas encore ; sous l’ancien nom, les visiteurs risquent de continuer à voir l’ancienne image.
Paramètres du diaporama
| Rubrique sous Paramètres → Design → Slider | Effet |
|---|---|
| « Slider » | active ou désactive tous les diaporamas de la boutique, y compris ceux des catégories, des pages CMS et des actualités |
| « Intervalle de changement » | Durée d'affichage de chaque diapositive en millisecondes, valeur par défaut : 5 000 (5 secondes) |
| « Vitesse » | Durée de la transition en millisecondes, réglage par défaut : 1 000 |
| « Effet du diaporama » | Type de transition, réglage d’usine : « fade » (fondu) |
| « Afficher les commandes », « Compteur de pages » | Flèches ou points pour faire défiler ; les points n’apparaissent qu’à partir de deux diapositives |
| « Slider plein écran » | Curseur s'étendant sur toute la largeur de l'écran au lieu de la largeur de la boutique |
| « Curseur vidéo : luminosité (en %) », « Curseur vidéo : flou » | Filtres pour les vidéos du diaporama, par exemple pour que le texte reste lisible |
Destinations des liens
Le « type de diaporama » détermine la destination d’un clic : « Lien vers une catégorie », « Lien vers un produit », « Lien vers une page CMS », « Lien personnalisé » ou « Image/vidéo » sans lien. Pour un lien personnalisé, saisissez l’adresse complète avec https://. Une indication telle que « /action/ » sera complétée par la boutique pour former une adresse non valide, et le clic aboutira à une page d’erreur. La procédure suivie par la boutique en cas de destinations supprimées ou désactivées est décrite dans le guide « Premiers pas ».
Sliders dans les catégories, les pages CMS et les actualités
Vous gérez vos propres sliders directement dans la catégorie (section « Slider de catégorie »), dans la page CMS (« Slider CMS ») et dans l’article d’actualité (« Slider d’actualité »). Aucun bouton dédié n’est nécessaire : cette section est déjà disponible lors de la création d’une catégorie, à condition que l’option « Slider » soit activée. Si une catégorie dispose d’un slider, l’option « Masquer l’image d’en-tête de la catégorie » sous Paramètres → Design → Général masque par défaut l’image de la catégorie.
Gestionnaire de bannières
Vous pouvez gérer les bannières publicitaires destinées à des emplacements fixes dans la boutique sous Outils → Gestionnaire de bannières. C’est le « groupe de bannières » qui détermine l’emplacement d’une bannière.
- Pour créer une nouvelle bannière et sélectionner le « groupe de bannières », consultez le tableau.
- Dans l’onglet de chaque langue, saisissez le « Nom de la bannière », l’« URL de la bannière (avec http://) » et le « Fichier image de la bannière » ; pour les smartphones et les tablettes, ajoutez également le « Fichier image de la bannière (mobile) ». À la place d’une image ou en dessous, il est possible d’utiliser du « texte HTML ».
- En option, indiquez « Validité à partir du » et « Validité jusqu’au » ou un nombre d’affichages après lequel la bannière prendra fin.
- Activez le « Statut » et enregistrez. Une nouvelle bannière est initialement inactive.
Une bannière pour la page d’accueil : groupe « index_static », adresse de destination complète et une image pour les ordinateurs de bureau et une pour les appareils mobiles. Cliquez pour agrandir.
Les emplacements
| Groupe de bannières | Où la bannière s'affiche |
|---|---|
| « index_static » | uniquement sur la page d'accueil, tout en haut, au-dessus du diaporama |
| « header_static » | en haut de chaque page |
| « footer_static » | dans le pied de page de chaque page |
| « left_smooth », « right_smooth » | bannière étroite située respectivement à gauche et à droite, qui se rétracte au bout de quelques secondes ; uniquement sur les grands écrans, le visiteur peut la fermer |
| « box » | dans la zone « Zone publicitaire » ; celle-ci doit être activée dans le gestionnaire de zones |
| « offcanvas_nav » | sous forme de vignette dans le menu de gauche sur smartphone,deux au maximum 4.10 |
Lien vers une promotion
Dans « URL de la bannière », saisissez l’adresse complète de la page de destination, par exemple celle de votre catégorie d’action, dans chaque langue. Il n’y a pas de liste de sélection pour les catégories ici. Les bannières ouvrent leur destination dans un nouvel onglet ; les affichages et les clics sont comptabilisés dans la rubrique « Statistiques » du menu « Actions ».
Affichage mobile
Les smartphones et les tablettes n’affichent que le « fichier image de la bannière (mobile) ». S’il manque, ils n’affichent que le texte HTML, voire rien du tout ; l’image normale ne s’affiche pas. Veillez donc à toujours enregistrer les deux images.
Plusieurs bannières, plusieurs langues
Si plusieurs bannières sont actives dans un groupe, la boutique en affiche une au hasard à chaque consultation de la page. Lorsqu’une nouvelle bannière est ajoutée, la boutique reprend les langues vides de la langue par défaut. La date « Valable jusqu’au » correspond au premier jour où la bannière ne s’affichera plus.
Blocs de produits : nouveautés, offres, best-sellers
Vous définissez en un seul endroit quelles gammes de produits apparaissent sur la page d’accueil, dans quel ordre et avec combien de produits : Paramètres → Design → Liste des produits → Configurateur de présentation et de commercialisation des produits.
- Chaque ligne correspond à un bloc. La colonne « Type / Page de destination » indique ce qu’il affiche et où, par exemple « Nouveautés & Conseils d’achat / Page d’accueil ». Pour la page d’accueil, seules les lignes comportant « / Page d’accueil » sont prises en compte ; ce même tableau gère également les blocs sur les pages de catégories, de produits et de marques, ainsi que dans le panier.
- Pour ajouter un bloc, cliquez sur « Nouvelle entrée » ; pour le supprimer, cliquez sur la corbeille dans sa ligne. Une ligne dont le champ « Nombre » est vide ou égal à 0 sera ignorée par la boutique lors de l'enregistrement.
- L'ordre des lignes correspond à l'ordre d'affichage sur la page. Faites glisser une ligne vers le haut ou vers le bas à l'aide de la souris.
- Enregistrez. La page d'accueil affichera la nouvelle configuration lors de la prochaine consultation.
Chaque ligne correspond à un bloc ; les lignes comportant la mention « / Page d'accueil » apparaissent dans cet ordre sur la page d'accueil, ici avec une page CMS entre les nouveautés et les offres spéciales. Cliquez pour agrandir.
Les colonnes d'une ligne
| Colonne | Effet |
|---|---|
| « Listingstyle » | « gal » affiche des vignettes, « list » une liste, « special » un affichage spécial sur toute la largeur. |
| « Tri » | Ordre d'affichage des produits dans le bloc, par exemple « Ordre croissant », « Date de création décroissante », « Nombre de commandes décroissant », « Nombre de vues décroissant » ou « Ordre aléatoire ». Pour les offres spéciales, il existe en outre « Offre spéciale : date de création » et « Date d'expiration de l'offre spéciale ». |
| « Nombre » | Nombre maximal de produits. La boutique en affiche au moins 4 et au plus 16 ; sur les smartphones et les tablettes, la moitié. |
| « Curseur » | Oui : tous les produits sont présentés sur une seule ligne pour permettre le défilement. Non : les produits sont présentés sur plusieurs lignes les uns en dessous des autres. |
| « Arrière-plan » | Couleur d'arrière-plan du bloc. Elle s'applique uniquement à cette ligne ; auparavant, la couleur d'une ligne s'appliquait à toutes les lignes du même type.ab 4.9.135 |
| « Titre » | affiche ou masque le titre du bloc |
| « Pleine largeur » | Le bloc s'étend sur toute la largeur de l'écran au lieu de se limiter à la largeur de la boutique. |
| Dernière colonne | Sélection de la catégorie pour « Produits de la catégorie », de la page CMS pour « Page CMS » et du fabricant pour les lignes correspondant aux pages fabricant |
Pour les lignes de type « Page CMS », le configurateur masque le style d’affichage, le tri et le nombre ; l’option « Slider » y est désactivée.
Les blocs pour la page d’accueil
| Type | Quels produits |
|---|---|
| « Nouveautés et coups de cœur » | Produits avec la mention « Produit en nouveauté/coup de cœur (Top-New) », voir Nouveautés |
| « Produits phares » | Produits avec la mention « Produit en vedette » (masque de produit, onglet « Général », avec « En vedette du/au ») ou dans Produits → Produits phares |
| « Offres spéciales » | Produits bénéficiant d’un prix promotionnel actif, accessibles via Produits → Offres spéciales pour le groupe de clients du visiteur. Pour les groupes de clients pour lesquels l’option « Afficher les prix promotionnels » est désactivée sous Clients → Groupes de clients, ce bloc n’apparaît pas. |
| « Meilleures ventes » | Produits ayant enregistré le plus grand nombre de commandes, voir Meilleures ventes |
| « Promotion » | Produits bénéficiant d’une « promotion produit » (fiche produit, onglet « Général », avec « Promotion du/au ») |
| « Produits bientôt disponibles » | Produits dont la « date de sortie » est aujourd’hui ou plus tard ; un aperçu présente les produits → Produits attendus |
| « Produits de la catégorie » | Produits de la catégorie figurant dans la dernière colonne, avec l’option « Utiliser les sous-catégories dans la liste des catégories » (activée par défaut), y compris les sous-catégories. Vous pouvez créer plusieurs entrées de ce type. |
| « Produits en lot », « Avis », « Produits gratuits » | Les lots, les avis mis en avant (« Statut promotionnel » sous Produits → Avis sur les produits) ou les produits gratuits du programme de fidélité |
| « Page CMS » | Il ne s’agit pas de produits, mais du contenu d’une page CMS, voir « Contenus personnalisés ». Peut également être créé plusieurs fois. |
Tous les blocs ne contiennent que des produits actifs que le visiteur est autorisé à voir. Les produits en rupture de stock ne s’affichent pas si l’option Paramètres → Paiement → Stock → Masquer les produits en rupture de stock est activée. Les variantes n’apparaissent que via leur article principal tant que l’option « Slaves dans les diaporamas de produits » sous Paramètres → Design → Liste des produits est désactivée. Vous pouvez modifier les titres des blocs sous Outils → xoLanguage.
Ajouter les nouveautés à la page d'accueil
- Vérifiez que la ligne « Nouveautés & Coups de cœur / Page d’accueil » existe ; sinon, créez-la à l’aide de « Nouvelle entrée ».
- Sélectionner les produits : dans la fiche produit, sous l’onglet « Général », activez « Produit comme nouveauté/suggestion d’achat (Top-New) », avec « Top-New du/au » si vous le souhaitez. Pour plusieurs produits à la fois, rendez-vous dans Produits → Produits Top-New.
- Si, dans Paramètres → Design → Liste des produits → Nouveautés et coups de cœur « Top-New », l’option est réglée sur Oui (par défaut), la boutique complète le bloc avec des produits créés au cours des dernières semaines ; le nombre de semaines est défini par « Durée du marquage « Nouveau » du produit » (valeur par défaut : 4). Si l’option est réglée sur « Non », le bloc n’affiche que vos produits « Top-New ».
Voici comment sont déterminés les best-sellers
Chaque produit dispose d’un compteur indiquant le nombre d’unités commandées. Ce compteur augmente à chaque commande passée dans la boutique et à chaque commande importée depuis une place de marché ; dans le cas des variantes, c’est l’article principal qui est pris en compte. Le bloc affiche les produits ayant fait l’objet d’au moins une commande, triés par défaut selon le « nombre de commandes par ordre décroissant ». Les bons de réduction et les produits gratuits ne sont pas considérés comme des best-sellers. Si vous sélectionnez un autre « tri », la boutique sélectionnera d’autres produits parmi les mêmes.
Supprimer un bloc
Qu'il s'agisse de « Nouveautés et coups de cœur », « Meilleures ventes » ou « Produits bientôt disponibles » : supprimez la ligne « / Page d'accueil » à l'aide de la corbeille, puis enregistrez. Avec « Nouvelle entrée », vous pouvez réafficher le bloc à tout moment. Le bouton « Produits bientôt disponibles » du même groupe n’a aucun effet sur la page d’accueil ; seule la ligne du configurateur fait foi.
Tri des offres spéciales
Dans la ligne « Offres spéciales / Page d'accueil », définissez le « Tri » : « Date d'expiration des offres spéciales par ordre croissant » affiche en premier les offres qui se terminent bientôt, « Date de création des offres spéciales par ordre décroissant » affiche les plus récentes. Pour la page dédiée à l’ensemble des offres spéciales, un paramètre spécifique s’applique : « Tri des produits (page des offres spéciales) » dans le même groupe.
Contenus personnalisés entre les blocs de produits
Une image promotionnelle, une remarque ou un texte entre « Nouveautés » et « Offres spéciales » : pour cela, créez une page CMS et ajoutez-la en tant que ligne distincte dans le configurateur.
- Sous CMS → Gestionnaire CMS, créez une page, laissez les options « Statut » et « Page de contenu de la boutique (accessible et linkable depuis la boutique) » activées, puis concevez le contenu, si vous le souhaitez à l’aide de l’xoContentEditor. Seules ces pages sont proposées par le configurateur.
- Dans le configurateur, créez une ligne avec « Nouvelle entrée », sélectionnez « Page CMS / Page d’accueil » comme type et indiquez la page dans la dernière colonne.
- Désactivez « Titre » si vous ne souhaitez pas que le nom de la page apparaisse en en-tête ; activez « Pleine largeur » pour qu’une image s’affiche sur toute la largeur de l’écran.
- Faites glisser la ligne à l’emplacement souhaité et enregistrez.
Voici comment présenter, par exemple, les nouveautés à l’aide d’une image promotionnelle : placez d’abord la ligne « Nouveautés & Conseils d’achat / Page d’accueil », puis, en dessous, la page CMS avec l’image. Dans le modèle par défaut, les blocs de produits ne s’affichent pas au-dessus du slider et du texte d’accueil. Avec la page de destination « Panier », cette même ligne affiche le contenu de la page CMS au bas du panier, par exemple une note sur les délais de livraison.
Vignettes avec liens vers les catégories
Vous pouvez créer des vignettes cliquables menant vers des catégories de deux façons : automatiquement à partir de vos catégories principales ou en les concevant librement dans le texte d’accueil.
Automatique : catégories principales sous forme de vignettes
Dans Paramètres → Design → Général → Afficher les catégories principales sur la page d’accueil (activé par défaut), la page d’accueil affiche, sous le texte d’accueil, une vignette par catégorie principale comprenant une image, un nom et une brève description. L’ordre suit l’« ordre de tri » des catégories.
- Image : l’« image » de la catégorie. L’option « Masquer les images de catégorie sur la page d’accueil » dans le même groupe affiche uniquement le texte.
- Texte : la « brève description » de la catégorie, si l’option « Activer la brève description également pour les catégories et les pages CMS » est activée.
- Colonnes : Paramètres → Design → Liste des produits → Vignettes de catégories : nombre de colonnes, distinct pour les smartphones, les tablettes et les ordinateurs de bureau.
- Redirection : si, dans la catégorie, le « Type de page » est défini sur « Lien interne » ou « Lien externe », sa vignette mène directement à cette adresse. Ainsi, une vignette devient un lien vers une action, une page CMS ou une autre catégorie.
Conception libre : vos propres vignettes
Vous pouvez créer vos propres vignettes avec image, texte et bouton dans le texte d’accueil ou sur une page CMS entre les blocs de produits. Le plus simple est d’utiliser le module « Carte » de l’xoContentEditor ; voir le guide xoContentEditor. Si vous souhaitez que l’ensemble de la vignette soit cliquable et pas seulement le bouton, ouvrez le code HTML dans l’éditeur de texte standard à l’aide du bouton « Code source » et ajoutez l’attribut data-xo-href="ziel-adresse/" à la balise div qui l’encadre ; pour ouvrir une nouvelle fenêtre, ajoutez également data-xo-href-target="_blank".
Ligne d’icônes présentant vos avantages
La ligne comportant des icônes et des textes courts tels que « Expédition sous 24 heures » ou « Achat sur facture » correspond aux « arguments de la zone centrale ».
- Sous Paramètres → Design → Général → Arguments de la zone centrale, créez une ligne pour chaque avantage à l’aide de « Nouvelle entrée ».
- Sélectionnez une « Langue » (« --- » s'applique à toutes les langues), choisissez une « Icône » dans la liste et saisissez le texte.
- Définissez l'ordre en faisant glisser les éléments, puis enregistrez.
Les trois entrées de la ligne des icônes en haut de la page d’accueil, chacune avec la langue, l’icône et le texte. Cliquez pour agrandir.
La ligne d’icônes se trouve sous les blocs de produits, aussi bien sur la page d’accueil que sur les pages de catégories et de marques. Sur les smartphones et les tablettes, elle affiche une entrée à la fois et change toutes les 4,5 secondes. La même liste pour la barre étroite tout en haut de chaque page s’intitule « Arguments de l’en-tête », voir En-tête.
En-tête : numéro de téléphone, avantages, labels
Remplissez la barre étroite située tout en haut, au-dessus du logo, avec les « arguments d’en-tête ». Le numéro de téléphone y figure également, car il n’existe pas de champ dédié au numéro de téléphone dans l’en-tête.
- Ouvrez le tableau sous Paramètres → Design → En-tête → Arguments d’en-tête. Chaque ligne correspond à une entrée comprenant « Langue », « Icône » et du texte.
- Pour le numéro de téléphone, modifiez l’entrée existante ou créez-en une nouvelle à l’aide de « Nouvelle entrée », par exemple avec l’icône du téléphone et le texte «
<a href="tel:+4930123456">030 123456</a>». « --- » comme langue s’applique à toutes les langues. - Enregistrez. Sur le bureau, toutes les entrées s'affichent côte à côte ; sur les smartphones et les tablettes, elles défilent toutes les 4,5 secondes. Lors du paiement, la barre est masquée.
Le numéro apparaît à plusieurs endroits
L'en-tête ne reprend aucun numéro provenant d'un autre emplacement. Si votre numéro de téléphone change, vous devez donc le mettre à jour à trois endroits : dans les paramètres de l'en-tête, dans les « Coordonnées du pied de page » (voir Pied de page) et sous Paramètres → Général → Paramètres de base → Adresse de la boutique et coordonnées. Ces dernières informations sont utilisées par la boutique pour la page de contact, les e-mails et les informations destinées aux moteurs de recherche.
Labels et certificats
L'en-tête ne dispose pas d'un champ dédié aux labels. Vous pouvez ajouter une brève mention telle que « Boutique certifiée » en tant qu'argument d'en-tête avec l'icône correspondante, et une image de label en tant que bannière du groupe « header_static » (voir Bannières). Vous configurez le label Trusted Shops sous Paramètres → Interfaces → Portails d’avis → Trusted Shops.
La largeur du logo, la hauteur de l’en-tête ainsi que le panier, la liste de souhaits et la sélection de la langue se configurent dans le même groupe ; le fichier du logo lui-même est « Logo de la boutique » sous Paramètres → Général → Paramètres de base. Le menu des catégories est expliqué dans le guide Navigation par catégories.
Fenêtres contextuelles et encadrés d’information
La boîte d’information est une fenêtre contextuelle personnalisable à l’intention de vos visiteurs. Il existe également des fenêtres contextuelles à usage spécifique : inscription à la newsletter et présélection du groupe de clients, du pays de livraison ou de la devise.
Boîte d’information : votre propre fenêtre contextuelle
- Sous CMS → Gestionnaire CMS, modifiez le module «
$cms_advice» et saisissez le texte dans chaque langue, par exemple une mention concernant les congés annuels. - Sous Paramètres → Général → Travaux de maintenance → Activez l’option « Afficher la boîte d’information sur la page d’accueil ».
- La désactivation s’effectue uniquement via ce bouton. Le bouton « Statut » du module est grisé dans le Gestionnaire CMS, comme c’est le cas pour la plupart des modules fournis.
Voici comment fonctionne la boîte de notification
Malgré son nom, elle s'affiche sur toutes les pages, et pas seulement sur la page d'accueil, jusqu'à ce que le visiteur la ferme en cliquant sur « Avis lu » ; elle reste ensuite fermée jusqu'à la fin de sa visite. Les clients connectés ne la voient pas. Un clic à côté ou la touche Échap ne la ferme pas. Si le module est vide, aucune boîte d’information n’apparaît.
Fenêtres contextuelles à usage spécifique
| Fenêtre contextuelle | Activer sous |
|---|---|
| Inscription à la newsletter | Paramètres → Interfaces → Marketing par e-mail / CRM → Options e-mail → Fenêtre contextuelle de la newsletter : activée/désactivée, détails dans le guide de la newsletter |
| Groupe de clients (particulier ou entreprise) | Paramètres → Paiement → Détails client → Fenêtre contextuelle de présélection du groupe de clients |
| Pays de livraison | Paramètres → Paiement → Expédition/Emballage → Présélection du pays de livraison : activée/désactivée |
| Devise en fonction de la localisation | Paramètres → Paiement → Général → Proposer le changement de devise (détection d'adresse IP) |
À chaque consultation d'une page, la boutique ouvre au maximum une fenêtre contextuelle, dans un ordre fixe : d'abord la notification relative aux cookies, puis la présélection de la boutique, de la devise, du groupe de clients et du pays de livraison, ensuite la boîte d'information et enfin la fenêtre contextuelle relative à la newsletter. La fenêtre contextuelle suivante n'apparaît que lorsque le visiteur a terminé la précédente et accède à une autre page.
Page de maintenance pendant la sauvegarde
Pendant que la boutique effectue une sauvegarde de sa base de données, les visiteurs voient s’afficher une page de maintenance. C’est vous qui définissez la fréquence à laquelle cela se produit.
Quand s'affiche-t-elle ?
À chaque sauvegarde, qu’elle soit automatique ou manuelle via Outils → Outils de base de données → Sauvegarde de la base de données, ainsi que lors de la restauration d’une sauvegarde. Une fois la sauvegarde terminée, la boutique est immédiatement à nouveau accessible, au plus tard après 15 minutes. La page de contact et les mentions légales restent accessibles.
À quelle fréquence
Paramètres → Général → Maintenance → Sauvegarde automatique de la base de données: il s'agit de l'intervalle en jours, réglé par défaut sur 7. Il n'y a pas d'heure précise : la sauvegarde démarre dès qu'un administrateur ayant accès à la sauvegarde de la base de données ouvre une page dans l'administration après l'expiration du délai. Si la valeur est 0, la sauvegarde automatique est désactivée ; dans ce cas, effectuez régulièrement des sauvegardes manuelles.
Texte et blocage
Vous pouvez modifier le texte de la page sous « Message de sauvegarde automatique » dans le même groupe, pour chaque langue. Si la page de maintenance reste bloquée après une sauvegarde interrompue, fermez-la sous Outils → Outils de base de données → Sauvegarde de la base de données à l’aide du bouton « Supprimer "Travaux de maintenance en raison d’une sauvegarde" ».
Foire aux questions
Où puis-je modifier le contenu de la page d’accueil ?
$cms_startseite), le diaporama sous Paramètres → Design → Diaporama, les blocs de produits sous Paramètres → Design → Liste des produits. Le tableau sous « Structure de la page d’accueil » répertorie chaque rubrique.Pourquoi le texte de ma page d'accueil n'apparaît-il pas ?
$cms_startseite a le « Statut » activé et contient du texte dans la langue de vos visiteurs ; il n’y a pas de repli par défaut vers l’allemand. Deux entrées actives portant le même nom laissent également cet emplacement vide.Comment afficher les nouveautés sur la page d’accueil ?
Comment supprimer un bloc tel que « Nouveaux produits » ou « Produits bientôt disponibles » ?
Pourquoi un bloc n’affiche-t-il pas plus de 16 produits ?
Comment les best-sellers sont-ils déterminés ?
Comment modifier l’ordre des barres de défilement ?
Quelle taille d’image faut-il pour les images de slider sur mobile ?
Pourquoi mon slider affiche-t-il une barre blanche ?
Pourquoi un lien du diaporama redirige-t-il vers une page d'erreur ?
https://), ou l’adresse est obsolète. Saisissez l’adresse complète. Pour les liens vers une catégorie, un produit ou une page CMS, la gestion du slider et le contrôle d’intégrité signalent les destinations supprimées ou désactivées ; voir « Destinations des liens du slider ».Comment créer un lien vers une catégorie promotionnelle à partir d’une bannière ?
Puis-je afficher des messages différents pour les commerçants et les particuliers ?
Où puis-je modifier le numéro de téléphone dans l’en-tête ?
Où puis-je modifier l'année ou les horaires dans le pied de page ?
$cms_footer » (Informations de contact) du CMS Manager et ne s’incrémente pas automatiquement. Vous pouvez modifier les horaires d’ouverture et de service sous Paramètres → Design → Pied de page (Footer) → Coordonnées du pied de page, dans la colonne « Informations supplémentaires ».Comment placer une fenêtre contextuelle sur la page d’accueil ?
$cms_advice » et activez l’option « Afficher la boîte d’information sur la page d’accueil » sous Paramètres → Général → Travaux de maintenance. Elle s’affiche une fois par visite pour les visiteurs, voir Fenêtres contextuelles.Pourquoi le bouton d’activation d’un module est-il grisé ?
$cms_advice », sont actifs en permanence. L’affichage de leur contenu est contrôlé par un paramètre de la boîte d’information : « Afficher la boîte d’information sur la page d’accueil ». Vous pouvez activer ou désactiver le texte d’accueil, le texte SEO de la page d’accueil, les modules de pied de page et vos propres pages.Comment supprimer le message « Notification de sauvegarde automatique » ?
Où puis-je modifier le texte de la notification relative à la demande de renseignements sur un produit ?
TEXT_QUESTION_INTRO). Vous pouvez activer ou désactiver le bouton lui-même sous Paramètres → Design → Fiche produit → Demande de renseignements sur le produit « Questions sur l'article ».Guides complémentaires
Nous vous aidons à concevoir votre page d'accueil
Nous configurons avec vous les diaporamas, les blocs de produits et le pied de page, et nous vous indiquons les éléments personnalisables de votre modèle.
Contacter l'assistance dès maintenant