Primeros pasos desde el tema de cotizaciones de CMS 

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.

• Debes sentirte seguro escribiendo HTML y CSS.
• Debes tener la última versión de la CLI de HubSpot instalada y configurada para tu portal. 

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:

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.

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:

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.

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.

• 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.

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:

• 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.

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.

• En la parte superior derecha, haz clic en Guardar cuando hayas terminado de hacer cambios.

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.

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. 

• Personalizar plantillas de cotización
• Referencia de variable de cotización personalizada
• Crear y usar plantillas de cotización personalizadas (desde la perspectiva de ventas, operaciones de ventas/gerente)