Dernière modification : 28 août 2025
Avec un thème de devis CMS, vous pouvez créer un thème de devis personnalisé pour les représentants commerciaux, à utiliser pendant le processus d’achat. Ce guide vous indiquera comment cloner localement le thème de devis CMS par défaut à l’aide de la CLI, télécharger ce clone sur votre compte, puis faire les ajustements nécessaires. Vous allez ensuite créer un devis à l’aide du modèle pour consulter votre travail.

​
Conditions préalables

​
Remarque:

bien que ce tutoriel utilise la CLI HubSpot, vous pouvez réaliser tout cela dans HubSpot en utilisant le gestionnaire de conception si vous le préférez. Pour terminer ce processus dans HubSpot, il vous suffit de cloner le thème cms-quotes dans le dossier @hubspot au lieu d’exécuter la commande fetch montrée à l’étape 1.
1

Rapporter le thème vers votre répertoire local

Ouvrez votre terminal, accédez au répertoire vers lequel vous souhaitez télécharger les fichiers. Ceci sera votre répertoire de travail principal pour la suite de ce tutoriel.Pour télécharger le thème de devis par défaut, exécutez ce qui suit dans votre terminal :
hs fetch @hubspot/cms-quotes-theme "my-quotes-theme"
Vous devriez maintenant voir un dossier nommé my-quotes-theme dans votre système de fichiers local. Ce dossier contient l’ensemble des ressources nécessaires pour le thème de devis, y compris les données simulées et les valeurs par défaut du module dans le dossier d’importation.
2

Télécharger et consulter les modifications

Une fois le dossier téléchargé, chargez-le sur HubSpot. Bien que vous puissiez utiliser la commande hs upload pour effectuer un téléchargement unique, vous pouvez également utiliser la commande watch pour déclencher des téléchargements automatiques à chaque enregistrement de fichier :
hs watch "my-quotes-theme" "my-quotes-theme" --initial-upload
Une fois le téléchargement terminé, vous pouvez afficher le dossier my-quotes-theme dans le gestionnaire de conception. Pour ouvrir le gestionnaire de conception depuis le terminal, ouvrez un nouvel onglet ou une nouvelle fenêtre de terminal et exécutez la commande hs open dm.
Un nouvel onglet ou une nouvelle fenêtre de terminal est nécessaire, car il n’est pas possible d’exécuter de commandes pendant que le processus hs watch est en cours d’exécution. Vous pouvez également appuyer sur q pour terminer la surveillance, exécuter une autre commande, puis relancer la commande hs watch.
3

Ouvrir un aperçu du modèle

Pour prévisualiser le modèle de devis :
  • Dans le gestionnaire de conception, accédez à my-quotes-theme > templates > bold.html.
  • Dans le coin supérieur droit de l’éditeur de code, cliquez sur Aperçu, puis sélectionnez Aperçu en direct avec options d’affichage.
Une fois l’aperçu du modèle ouvert, vos modifications seront effectuées localement, et seront automatiquement téléchargées lors de l’enregistrement en raison de l’exécution de la commande hs watch.
4

Faire un changement local

  • Dans votre éditeur de code local, ouvrez my-quotes-theme > css > bold.css.
    • Ajoutez le code ci-dessous à bold.css, puis enregistrez vos modifications :
.line-items__table tbody tr:nth-child(odd) {
  background-color: #d6d6d6;
}
  • Actualisez l’aperçu du modèle dans votre navigateur pour afficher vos modifications CSS. Vous devriez maintenant constater que chaque ligne impaire dans le corps de la table a un fond gris.
Lorsque vous créez votre thème de devis personnalisé, vous pouvez répéter ce flux de travail pour confirmer rapidement les modifications que vous effectuez localement.

​
Remarque:

en raison de la complexité du système de signature, les signatures ne s’afficheront pas dans les aperçus.
5

Modifier le libellé du modèle

Lorsque vous préparez un thème de devis personnalisé pour une utilisation réelle, vous devez garder à l’esprit le libellé du modèle, afin que les représentants commerciaux puissent facilement le trouver parmi les options de devis par défaut de HubSpot.Pour modifier le libellé d’un modèle de devis :
  • Dans votre éditeur de code, ouvrez my-quotes-theme > templates > bold.html.
  • En haut du fichier, consultez l’annotation du modèle :
<!--
 templateType: quote
 isAvailableForNewContent: true
 label: Bold
-->
  • Remplacez le paramètre label depuis la valeur Bold à un nom de votre choix, comme par exemple Mon modèle de devis personnalisé.
  • Enregistrez le fichier pour le télécharger sur HubSpot.
6

Personnaliser le modèle de devis dans HubSpot

Avant qu’un représentant commercial puisse utiliser votre modèle de devis, il doit être personnalisé dans HubSpot. En général, un responsable des ventes s’en chargera pour créer des devis prêts à l’emploi pour son équipe de vente. Cependant, dans ce tutoriel, vous ferez vous-même ce processus, afin de découvrir l’expérience de création de contenu.Pour personnaliser le modèle de devis et le mettre à disposition des commerciaux :
  • Dans votre compte HubSpot, cliquez sur l’icône Paramètres dans la barre de navigation principale.
  • Dans le menu latéral de gauche, accédez à Objets > Devis.
  • Cliquez sur l’onglet Modèles de devis.
  • Cliquez sur Personnaliser le modèle de devis dans l’angle supérieur droit.
  • Passez le curseur de votre souris sur votre nouveau modèle, puis sélectionnez Choisir.
  • À l’aide du panneau de gauche, vous pouvez modifier les modules inclus dans le modèle. Par exemple, vous pouvez cliquer sur un module pour modifier ses propriétés ou activer/désactiver sa visibilité.
quote-template-toggle-visibility
  • Dans l’angle supérieur droit, cliquez sur Sauvegarder lorsque vous avez terminé d’apporter des modifications.
7

Créez un devis à l

Une fois vos modifications enregistrées, vous pouvez désormais créer un devis avec le modèle, pour simuler l’expérience d’un représentant commercial.
  • Dans votre compte HubSpot, accédez à Ventes > Devis.
  • Cliquez sur Créer un devis dans l’angle supérieur droit. Vous allez alors être redirigé vers un assistant de création de devis.
  • Dans la première fenêtre, cliquez sur le menu déroulant Associer à une transaction, puis sélectionnez une transaction existante ou sélectionnez Créer une transaction si vous souhaitez utiliser une transaction test à la place.
  • Dans l’angle inférieur droit, cliquez sur Suivant.
  • Sur l’écran suivant, cliquez sur le menu déroulant Devis, puis sélectionnez votre modèle de devis personnalisé.
  • Passez en revue le reste de l’assistant de devis pour créer votre devis.
  • Après la publication du devis, une boîte de dialogue apparaîtra avec un lien pour afficher le devis. Cliquez sur Copier pour copier l’URL, puis collez-la dans votre navigateur pour afficher le devis complété.
copy-quote-url

​
Étapes suivantes

Avec votre modèle de devis créé, téléchargé et personnalisé, vous devriez maintenant avoir une meilleure compréhension du processus de modification d’un modèle de devis ainsi que de l’expérience d’un créateur de contenu. Lorsque vous créez des modèles de devis adaptés aux besoins de votre entreprise, vous pouvez essayer d’ajouter au devis vos propres modules personnalisés ainsi que les modules par défaut de HubSpot.

​
Remarque:

il est recommandé de ne pas modifier le JavaScript des modules de paiement, de signature et de téléchargement, car cela pourrait entraîner le dysfonctionnement des modules. Si ce processus n’est pas fonctionnel, l’utilisateur final risque de ne pas être en mesure de le signer, de le télécharger ou même d’effectuer un paiement.

​
Autres ressources