Personnaliser l'interface de la page d'accueil (6)
Lors de la mise en œuvre, vous souhaiterez certainement personnaliser l'apparence de votre page d'accueil pour qu'elle corresponde à votre marque, à vos produits et à l'expérience utilisateur. Dans cet article, nous explorerons différentes façons de personnaliser votre page d'accueil.
Personnaliser l'interface de la page d'accueil (6)
Introduction
Bagisto est une plateforme de commerce électronique open-source construite sur Laravel et Vue.js. L'un des thèmes par défaut les plus populaires est Velocity – une interface moderne, légère, qui prend en charge de nombreuses fonctionnalités pour une boutique en ligne.
Cependant, lors d'une mise en œuvre réelle, vous voudrez certainement personnaliser l'interface de la page d'accueil pour l'adapter à votre marque, vos produits et l'expérience utilisateur. Dans cet article, nous allons découvrir comment modifier la page d'accueil de Velocity sur Bagisto.
1. Comment organiser les blocs de contenu dans les paramètres du thème
Accédez à https://[votre_domaine]/admin/settings/themes. Cliquez sur «Sort Order» pour organiser l'ordre du plus petit au plus grand.
L'interface ressemblera à ceci :
Vous voyez un total de 12 lignes, ce qui correspond aux blocs de contenu de votre page d'accueil, comme indiqué ci-dessous.
Remarquez-vous quelque chose d'inhabituel dans la capture d'écran ci-dessus ? Oui, je vais vous l'expliquer :
- Premièrement - Les blocs 3, 4 et 7 sont manquants : C'est parce que nous n'avons pas encore créé de catégories de produits ni configuré les produits à afficher sur la page d'accueil, il n'y a donc aucune donnée à afficher.
- Deuxièmement - Le bloc 12 est placé au-dessus du bloc 11 : C'est parce que le bloc 11 a un «type» de «footer_links». Ce type sera toujours placé en dernier dans la mise en page du site web.
2. Les types dans les paramètres du thème de Velocity
Lorsque vous configurez le thème sur /admin/settings/themes, chaque bloc sur l'interface de la page d'accueil a son propre type. Comprendre correctement chaque type vous aidera à organiser le contenu de manière logique et à optimiser l'expérience client.
Voici 6 types importants :
🛍️ Carrousel de produits
- Objectif : Afficher une série de produits sous forme de carrousel à défilement horizontal.
- Utilisation : Page d'accueil ou pages de destination ; pour afficher les produits selon des critères : Produits en vedette, Nouveautés, Réductions, Meilleures ventes, etc.
- Configuration : Sélectionnez une catégorie ou entrez manuellement les ID de produits ; entrez le titre du bloc ; spécifiez le nombre de produits à afficher.
- Exemple : Similaire aux sections «Sélections du jour» ou «Produits en vedette» qui défilent horizontalement sur Shopee ou Lazada.
📂 Carrousel de catégories
- Objectif : Afficher une série de catégories de produits sous forme de carrousel à défilement horizontal.
- Utilisation : Aider les clients à accéder rapidement à de grands groupes de produits (par exemple : Téléphones, Ordinateurs portables, Mode, Cosmétiques, etc.).
- Configuration : Sélectionnez une catégorie parente ; spécifiez le nombre de sous-catégories à afficher.
- Exemple : Le carrousel de catégories horizontal sur la page d'accueil de Tiki, qui permet aux clients de cliquer rapidement sur les groupes de produits qui les intéressent.
📝 Contenu statique
- Objectif : Insérer du contenu fixe (HTML, JavaScript ou texte).
- Utilisation : Bannières promotionnelles ; annonces ; présentation de la boutique ; intégration de code tiers (vidéos YouTube, Google Maps, etc.).
- Configuration : Entrez le texte ou le code HTML directement.
- Exemple : Un bloc de texte «Livraison gratuite dans tout le pays – Retours sous 7 jours» directement sur la page d'accueil.
🖼️ Carrousel d'images
- Objectif : Afficher une ou plusieurs images sous forme de diaporama, avec une fonction de lecture automatique.
- Utilisation : Grandes bannières publicitaires en haut de la page ; une collection d'images présentant des produits ou des services.
- Configuration : Téléchargez des images (taille standard : 1920x600px) ; entrez les liens correspondants (si nécessaire) ; choisissez l'ordre d'affichage ; choisissez si vous voulez une lecture automatique.
- Exemple : Le carrousel de bannières principal en haut de la page d'accueil de la plupart des sites de commerce électronique.
🔗 Liens de pied de page
- Objectif : Créer des groupes de liens dans le pied de page (footer).
- Utilisation : Liens rapides vers des pages statiques : Politique de confidentialité, Conditions d'utilisation, Contact, À propos de nous, etc.
- Configuration : Entrez le titre du groupe de liens (par exemple : «À propos de nous») ; entrez la liste des liens enfants.
- Exemple : Le pied de page de Shopee comporte des sections telles que : «Service client», «À propos de nous», «Politique de vente», etc.
⚙️ Contenu de service
- Objectif : Afficher des services ou des engagements dans le pied de page.
- Utilisation : Présenter les engagements d'une boutique : Livraison rapide, Assistance 24/7, Paiement sécurisé, etc.
- Configuration : Entrez le titre du service ; une courte description ou une icône pour l'illustration.
- Exemple : La section «Nos services» dans le pied de page : livraison gratuite, retours faciles, service client 24/7.
✅ Ainsi, chaque type dans les paramètres du thème vous aide à gérer un bloc de contenu différent sur la page d'accueil.
- Si vous voulez afficher des produits → choisissez le carrousel de produits
- Si vous voulez afficher des catégories → choisissez le carrousel de catégories
- Si vous voulez afficher des bannières d'images → choisissez le carrousel d'images
- Si vous voulez ajouter du texte/HTML → choisissez le contenu statique
- Si vous voulez gérer les liens du pied de page → choisissez les liens de pied de page ou le contenu de service
3. Changer le logo et le favicon du site web
Accédez à https://[votre_site_web]/admin/settings/channels/edit/1.
Trouvez le bloc Design et procédez au téléchargement du logo et du favicon comme demandé :
Ainsi, nous avons appris à personnaliser l'interface de la page d'accueil. Dans la partie suivante, nous passerons à la pratique !
Laisser un commentaire