Última modificación: 28 de agosto de 2025
Con un tema de cotizaciones de CMS, puedes crear un tema de cotización personalizado para que los representantes de ventas lo usen durante el proceso de compra. Esta guía te guiará a través de la clonación del tema predeterminado de cotizaciones de CMS localmente usando la CLI, la carga del clon a tu cuenta y, luego, los ajustes necesarios. A continuación, crearás una cotización usando la plantilla para ver tu trabajo.

​
Requisitos previos

​
Nota:

Aunque este tutorial utiliza la CLI de HubSpot, puedes hacer todo esto en HubSpot usando el administrador de diseño si lo prefieres. Para completar este proceso en HubSpot, solo necesitarás clonar el cms-quotes-theme en la carpeta @hubspot en lugar de ejecutar el comando fetch. mostrado en el paso 1.
1

Obtener el tema en tu directorio local

Abre tu terminal, navega al directorio al que deseas descargar los archivos. Este será tu directorio de trabajo principal para el resto de este tutorial.Para descargar el tema de cotizaciones predeterminado, ejecuta lo siguiente en tu terminal:
hs fetch @hubspot/cms-quotes-theme "my-quotes-theme"
Ahora deberías ver una carpeta llamada my-quotes-theme en tu sistema de archivos local. Esta carpeta contiene todos los activos necesarios para el tema de cotización, incluidos los datos simulados y los valores predeterminados del módulo dentro de la carpeta de imports.
2

Cargar y ver cambios

Con la carpeta descargada, cárgala en HubSpot. Si bien puedes usar el comando hs upload para realizar una sola subida, puedes usar el comando watch para activar subidas automáticas en cada archivo guardar:
hs watch "my-quotes-theme" "my-quotes-theme" --initial-upload
Después de cargar, ahora puedes ver la carpeta my-quotes-theme en el administrador de diseño. Para abrir el administrador de diseño desde la terminal, abre una nueva pestaña o ventana de terminal y ejecuta el comando hs open dm.
Se necesita una nueva pestaña o ventana de terminal porque no se pueden ejecutar comandos mientras se está ejecutando el proceso hs watch. También puedes pulsar q para finalizar el reloj, ejecutar otro comando y volver a ejecutar hs watch.
3

Abrir una vista preliminar de la plantilla

Para obtener una vista preliminar de la plantilla de cotización:
  • En el administrador de diseño, navega a mis cotizaciones: my-quotes-theme > templates > bold.html.
  • En la parte superior derecha del editor de código, haz clic en Vista preliminar y luego selecciona Vista preliminar en directo con opciones de presentación.
Con la vista previa de la plantilla abierta, realizarás un cambio localmente, que se cargará automáticamente al guardar debido a que hs watch se está ejecutando.
4

Hacer un cambio a nivel local

  • En tu editor de códigos local, abre my-quotes-theme > css > bold.css.
    • Agrega el siguiente código a bold.css y luego guarda tus cambios:
.line-items__table tbody tr:nth-child(odd) {
  background-color: #d6d6d6;
}
  • Actualiza la vista previa de la plantilla en tu navegador para ver tus cambios de CSS. Ahora deberías ver que cada fila impar en el cuerpo de la tabla tiene un fondo gris.
A medida que construyes tu tema de cotización personalizada, puedes repetir este workflow para confirmar rápidamente los cambios que estás haciendo localmente.

​
Nota:

Debido a la complejidad del sistema de firmas, las firmas no se mostrarán en las vistas previas.
5

Cambiar la etiqueta de la plantilla

Al preparar un tema de cotizaciones personalizado para uso en la vida real, debes tener en cuenta la etiqueta de la plantilla para que los representantes de ventas puedan encontrarlo fácilmente entre las opciones de cotización predeterminadas de HubSpot.Para cambiar la etiqueta de una plantilla de cotización:
  • En el editor de códigos, abre my-quotes-theme > templates > bold.html.
  • En la parte superior del archivo, ve la anotación de la plantilla:
<!--
 templateType: quote
 isAvailableForNewContent: true
 label: Bold
-->
  • Actualiza el parámetro label de Bold a un nombre de tu elección, como Mi plantilla de cotización personalizada.
  • Guarda el archivo para cargarlo en HubSpot.
6

Personalizar la plantilla de cotización en HubSpot

Antes de que un representante de ventas pueda usar su plantilla de cotización, debe personalizarse en HubSpot. Esto normalmente lo haría un gerente de ventas para que pueda crear cotizaciones listas para su equipo de ventas. Sin embargo, en este tutorial, recorrerás este proceso tú mismo para que puedas entender cómo es la experiencia de creación de contenido.Para personalizar la plantilla de cotización y hacer que esté disponible para los representantes de ventas:
  • En tu cuenta de HubSpot, haz clic en elsettings ícono de configuración en la barra de navegación principal.
  • En el menú de la barra lateral izquierda, navega a Objetos > Cotizaciones.
  • Haz clic en la pestaña Plantillas de cotización.
  • Arriba a la derecha, haz clic en Personalizar plantilla de cotización.
  • Coloca el cursor sobre tu nueva plantilla y luego selecciona Elegir.
  • Usando el panel izquierdo, puedes editar los módulos incluidos en la plantilla. Por ejemplo, puedes hacer clic en un módulo para editar sus propiedades o alternar la visibilidad.
quote-template-toggle-visibility
  • En la parte superior derecha, haz clic en Guardar cuando hayas terminado de hacer cambios.
7

Crea una cotización usando tu nueva plantilla

Con tus cambios guardados, ahora puedes crear una cotización con la plantilla, simulando la experiencia del representante de ventas.
  • En tu cuenta de HubSpot, navega a Ventas > Cotización.
  • En la parte superior derecha, haz clic en Crear cotización. Serás redirigido a un asistente de creación de cotizaciones.
  • En la primera pantalla, haz clic en el menú desplegable Asociar con un negocio y, a continuación, selecciona un negocio existente o selecciona Crear un nuevo negocio si quieres utilizar un negocio de prueba.
  • En la parte inferior derecha, haz clic en Siguiente.
  • En la pantalla siguiente, haz clic en el menú desplegable Cotización y luego selecciona tu plantilla de cotización personalizada.
  • Continúa por el resto del asistente de cotización para crear tu cotización.
  • Después de publicar la cotización, aparecerá un cuadro de diálogo con un enlace para ver la cotización. Haz clic en Copiar para copiar la URL y luego pégala en tu navegador para ver la cotización completada.
copy-quote-url

​
Pasos siguientes

Con tu plantilla de cotización creada, cargada y personalizada, ahora deberías tener una mejor comprensión del proceso de edición de la plantilla de cotización y la experiencia del creador de contenido. A medida que creas plantillas de cotizaciones para satisfacer las necesidades de tu negocio, puedes intentar agregar tus propios módulos personalizados a la cotización junto con los módulos predeterminados de HubSpot.

​
Nota:

Se recomienda no editar el JavaScript de los módulos de pago, firma y descarga, ya que esto podría provocar la rotura de los módulos. Si se rompe, es posible que el usuario final no pueda firmarlo, descargarlo o incluso realizar un pago.

​
Recursos relacionados