Skip to main content
Rejoignez-nous lors de l'événement TDX à San Francisco ou sur Salesforce+ les 5 et 6 mars pour la conférence des développeurs à l'ère des agents IA. Inscrivez-vous dès maintenant.

Personnalisation du modèle de boutique D2C

Objectifs de formation

Une fois cette unité terminée, vous pourrez :

  • Dresser la liste des éléments fournis avec le modèle de boutique D2C Commerce
  • Expliquer comment personnaliser le thème du modèle de boutique D2C Commerce
  • Expliquer comment personnaliser un en-tête ou un pied de page
  • Expliquer comment utiliser les pages et les composants
  • Expliquer la différence entre l’activation et la publication d’une boutique
  • Expliquer comment personnaliser une boutique

Personnalisation d’une boutique D2C Commerce

Taylor Givens, merchandiser expérimenté(e) chez Ursa Major Solar, a pour mission de créer une expérience exceptionnelle pour les visiteurs de la boutique Salesforce D2C Commerce de l’entreprise. Pour commencer, iel souhaite personnaliser le modèle D2C d’Experience Builder avec le logo de la boutique Ursa Major Solar.  

Logo d’Ursa Major Solar

Le modèle D2C Commerce comprend déjà des pages spécifiques à Commerce, telles que la page d’accueil et une page de résultats de recherche. Ces pages utilisent des composants développés spécialement pour les boutiques D2C Commerce. Grâce à l’interface conviviale d’Experience Builder, Taylor peut glisser-déposer des composants sur ses pages et en personnaliser les propriétés. Iel peut ajouter des images et des styles à la boutique pour créer une expérience d’achat unique.

Taylor Givens, merchandiser expérimenté(e) chez Ursa Major Solar

Taylor crée une liste de contrôle pratique des tâches à effectuer.


Tâche

1

Configurer le thème de la boutique.

2

Configurer un en-tête ou un pied de page personnalisé.

3

Explorer les pages et les composants.

4

Afficher un aperçu de la boutique et la publier.

5

Configurer une URL personnalisée pour la boutique.

Taylor commence à personnaliser les pages et les composants de sa boutique D2C Commerce en cliquant sur la vignette Experience Builder à partir de la page d’accueil de sa boutique.

Utilisez Experience Builder dans votre boutique pour créer votre boutique, la personnaliser et adapter son visuel à votre marque.

Reportez-vous à Personnalisation de sites avec Experience Builder pour en savoir plus sur l’utilisation d’Experience Builder.

Configuration du thème de la boutique

Taylor a le plaisir de constater que le modèle de boutique D2C Commerce utilise un thème D2C préconçu. Iel peut indiquer les couleurs, les images, la taille du texte et l’espacement de son choix pour personnaliser le thème en fonction de ses besoins. Certains composants ont des propriétés qui lui permettent de remplacer les paramètres du thème du composant.

Accédez aux paramètres du thème de la boutique en développant l’icône Theme (Thème) sur le côté gauche de la page Experience Builder.

Dans Experience Builder, sélectionnez un thème.

Taylor indique les couleurs de l’arrière-plan, du texte, de la marque et du premier plan. Iel génère une palette à partir d’une image chargée.

Sur la page Images, iel sélectionne le logo de son entreprise.

Dans Experience Builder, modifiez la couleur et ajoutez une image.

Iel peut également configurer la taille du texte et l’espacement des sites pour les PC/ordinateurs et les appareils mobiles. 

Le modèle de boutique D2C Commerce comprend un composant d’en-tête et de pied de page sur chaque page. Taylor souhaite utiliser un en-tête personnalisé pour une page, iel modifie donc d’abord la présentation du thème de cette page. Voici comment procéder.

  1. Sélectionnez la page où vous souhaitez utiliser un en-tête ou un pied de page personnalisé : Accueil
  2. Cliquez sur l’icône Paramètres.
  3. Cliquez sur Theme (Thème).
  4. Cliquez sur Configurer.
  5. Cliquez sur New Theme Layout (Nouvelle présentation de thème).
  6. Saisissez la nouvelle présentation : Ursa Major Solar - home (Ursa Major Solar - accueil)
  7. Dans le menu déroulant Commerce Layout (Présentation Commerce), sélectionnez Commerce Layout (Présentation Commerce).
    Dans Experience Builder, personnalisez votre présentation de page.
  8. Cliquez sur Save (Enregistrer).

La page comporte désormais un espace vierge en haut et en bas, où Taylor peut utiliser son en-tête ou son pied de page personnalisé.
Reportez-vous au guide du développeur pour D2C Commerce afin d’obtenir plus de précisions sur le développement de composants personnalisés.

Exploration des pages et des composants

Le modèle de boutique D2C Commerce comprend des pages et des composants qui permettent à Taylor de créer une boutique attrayante et facile à utiliser. Voici les composants disponibles par page.

Page

Objectif

Components

Panier d'achat

Montrer aux acheteurs les produits qu’ils ont choisi d’acquérir.

  • Panier d'achat
  • Totaux du panier d'achat
  • Bouton Checkout
  • Bannière Hero
  • Liste de liens
  • Éditeur de contenu enrichi
  • Logo de la boutique
  • Menu de vignettes

Catégorie

Montrer aux acheteurs les produits de la catégorie sélectionnée.

  • Bannière de catégorie
  • Chemins de navigation de catégorie
  • Bannière Hero
  • Liste de liens
  • Éditeur de contenu enrichi
  • Résultats de recherche
  • Acheter par catégorie
  • Logo de la boutique
  • Menu de vignettes
  • Principaux vendeurs

Checkout

Permettre aux acheteurs de finaliser leurs achats.

  • Totaux du panier d'achat
  • Checkout
  • En-tête Checkout
  • Bannière Hero
  • Liste de liens
  • Éditeur de contenu enrichi
  • Logo de la boutique
  • Menu de vignettes

Erreur

Indiquer aux acheteurs que le système a rencontré une erreur.

  • Bannière Hero
  • Liste de liens
  • Message d'erreur de la page
  • Éditeur de contenu enrichi
  • Logo de la boutique
  • Menu de vignettes

Login (Connexion)/Check Password (Vérifier le mot de passe)

Demander aux acheteurs inscrits de vérifier leur messagerie pour réinitialiser leur mot de passe.

  • Consulter la messagerie
  • Bannière Hero
  • Liste de liens
  • En-tête Mon compte
  • Éditeur de contenu enrichi
  • Logo de la boutique
  • Menu de vignettes

Login (Connexion)/Forgot Password (Mot de passe oublié)

Permettre aux acheteurs enregistrés de récupérer un mot de passe oublié.

  • Mot de passe oublié
  • Bannière Hero
  • Liste de liens
  • En-tête Mon compte
  • Éditeur de contenu enrichi
  • Logo de la boutique
  • Menu de vignettes

Login (Connexion)/Login (Connexion)

Permettre aux acheteurs de se connecter à la boutique.

  • Bannière Hero
  • Liste de liens
  • Formulaire de connexion
  • En-tête Mon compte
  • Éditeur de contenu enrichi
  • Logo de la boutique
  • Menu de vignettes

Login (Connexion)/Register (Inscription)

Permettre aux acheteurs de s’inscrire sur la boutique.

  • Bannière Hero
  • Liste de liens
  • Éditeur de contenu enrichi
  • Auto-inscription
  • Logo de la boutique
  • Menu de vignettes

Accueil

Créer une page de destination attrayante pour que les acheteurs entrent dans votre boutique.

  • Bannière Hero
  • Liste de liens
  • Éditeur de contenu enrichi
  • Acheter par catégorie
  • Logo de la boutique
  • Menu de vignettes
  • Principaux vendeurs

Mon profil

Permettre aux acheteurs de voir leur image de profil et de réinitialiser leur mot de passe.

  • Bannière Hero
  • Liste de liens
  • En-tête Mon compte
  • My Account Password (Mot de passe de Mon compte)
  • Mon profil
  • Éditeur de contenu enrichi
  • Logo de la boutique
  • Menu de vignettes

Commande

Informer les acheteurs que leurs articles ont été commandés.

  • Bannière Hero
  • Liste de liens
  • Message de confirmation de la commande
  • Éditeur de contenu enrichi
  • Logo de la boutique
  • Menu de vignettes

Produits

Afficher des informations sur un produit, notamment le prix, la description et l’image.

  • Recommandations personnalisées par Einstein
  • Bannière Hero
  • Liste de liens
  • Message de confirmation de la commande
  • Description du produit
  • Galerie de produits
  • Informations sur le produit
  • Éditeur de contenu enrichi
  • Logo de la boutique
  • Menu de vignettes

La recherche.

Permettre aux acheteurs de faire des recherches dans la boutique.

  • Bannière Hero
  • Liste de liens
  • Éditeur de contenu enrichi
  • Résultats de recherche
  • Acheter par catégorie
  • Logo de la boutique
  • Menu de vignettes

Service non disponible

Préciser ce que les acheteurs voient si votre boutique n’est pas disponible.

  • Éditeur HTML
  • Éditeur de contenu enrichi

 Taylor examine plus en détail les composants pour déterminer ceux à utiliser en l’état et ceux à modifier.

Catégorie

Composant

Panier d'achat

  • Cart (Panier) : affiche le contenu du panier d’achat.
  • Cart Totals (Totaux du panier d’achat) : affiche le coût des articles du panier.

Catégorie 

  • Category Banner (Bannière de catégorie) : indique la couleur du nom de la catégorie affiché sur la bannière.
  • Category Breadcrumbs (Chemins de navigation de catégorie) : affiche le chemin d’accès à la catégorie actuelle.

Checkout

  • Checkout : affiche les étapes du processus de paiement.
  • Checkout Button (Bouton Checkout) : Cliquer pour procéder au paiement.
  • Checkout Header(En-tête Checkout) : affiche le logo de la boutique et le badge du panier en haut de la page de paiement.

Commerce Einstein

  • Einstein Recommendations (Recommandations Einstein) : personnalise l’expérience d’achat.

Contenu

  • Hero Banner (Bannière Hero) : affiche une image et un texte en évidence sur la page.
  • HTML Editor (Éditeur HTML) : permet de créer et de modifier du contenu personnalisé en HTML, notamment du texte et des images.
  • Page Error Message (Message d’erreur de la page) : affiche un message de page non valide.
  • Rich Content Editor (Éditeur de contenu enrichi) : ajoute du texte personnalisé mis en forme et des images à une page, notamment du texte et des images.
  • Store Logo (Logo de la boutique) : remplace l’image du logo sur une page donnée.

Navigation

  • Link List (Liste de liens) : affiche une liste de liens dans le pied de page qui permettent à l’acheteur de naviguer dans la boutique.
  • Shop by Category (Acheter par catégorie) : affiche les produits regroupés par catégorie.
  • Tile Menu (Menu de vignettes) : permet de naviguer dans la boutique en cliquant sur les vignettes.
  • Top Sellers (Principaux vendeurs) : affiche les produits d’une catégorie.

Commandes

  • Order Confirmation Message (Message de confirmation de la commande) : s’affiche lorsque la commande d’un acheteur est terminée.

Détails du produit

  • Product Description (Description du produit) : affiche les informations sur le produit.
  • Product Gallery (Galerie de produits) : affiche le produit sur la page Product (Produit).
  • Product Information (Informations sur le produit) : affiche le SKU, le prix et la description d’un produit.

La recherche.

  • Résultats de la recherche : affiche les produits récupérés à la suite d’une recherche effectuée par un acheteur.

Comptes utilisateurs

  • Check Email (Consulter la messagerie) : permet d’indiquer à l’acheteur de vérifier sa messagerie pour trouver le lien de réinitialisation du mot de passe.
  • Forgot Password (Mot de passe oublié) : permet à un acheteur de réinitialiser son mot de passe.
  • Login Form (Formulaire de connexion) : permet de se connecter à la boutique, de déclencher la procédure de mot de passe oublié ou de lancer l’auto-inscription.
  • My Account Header (En-tête Mon compte) : permet d’ajouter le titre My Profile & Password (Mon profil et mot de passe) en haut du composant My Account Menu (Menu Mon compte).
  • My Account Password (Mot de passe de Mon compte) : affiche un lien qui permet à l’acheteur de réinitialiser son mot de passe.
  • My Profile (Mon profil) : affiche le nom et l’adresse e-mail d’un acheteur.
  • Self-Registration (Auto-inscription) : permet à un acheteur de s’inscrire sur la boutique.

Aperçu et publication de la boutique

Au fur et à mesure que Taylor personnalise la boutique, iel peut afficher un aperçu de son apparence pour les acheteurs et publier les modifications. Voici comment procéder.

  1. Ouvrez Experience Builder.
  2. Cliquez sur la page que vous souhaitez afficher.
  3. Cliquez sur Preview (Aperçu) en haut à droite de la page.
    Reportez-vous à la page Prévisualisation de votre site Générateur d’expérience.
  4. Lorsque vous êtes satisfait de l’apparence de votre boutique, cliquez sur Publish (Publier) en haut à droite de la page. Taylor reçoit une notification par e-mail lorsque sa boutique est publiée.

Vous pouvez publier une boutique, qu’elle soit activée ou non. Vous pouvez activer une boutique même si elle n’est pas publiée. Dans notre exemple, Maria Jimenez, l’administratrice, l’a déjà activée. Reportez-vous au module Principes fondamentaux de Salesforce D2C Commerce pour savoir comment elle a procédé.

Pour conclure

Dans cette unité, vous avez appris à personnaliser le modèle de boutique D2C Commerce. Vous avez également appris à publier la boutique et à en afficher un aperçu. Dans les unités précédentes, vous avez découvert la fonctionnalité de recherche et Commerce Einstein. Répondez maintenant au questionnaire final pour gagner un magnifique badge.

Ressources

Partagez vos commentaires sur Trailhead dans l'aide Salesforce.

Nous aimerions connaître votre expérience avec Trailhead. Vous pouvez désormais accéder au nouveau formulaire de commentaires à tout moment depuis le site d'aide Salesforce.

En savoir plus Continuer à partager vos commentaires