Última modificação: 22 de agosto de 2025
Com um tema de orçamentos de CMS, você pode criar um tema de orçamento personalizado para os representantes de vendas usarem durante o processo de compra. Este guia orientará você a clonar o tema de orçamentos de CMS padrão localmente usando a CLI, enviando o clone para sua conta e fazendo ajustes conforme necessário. Você criará um orçamento usando o modelo para visualizar seu trabalho.

​
Pré-requisitos

​
Observação:

Embora este tutorial use a CLI do HubSpot, você pode fazer tudo isso no HubSpot usando o gerenciador de design, se preferir. Para concluir esse processo no HubSpot, você só precisará clonar o cms-quotes-theme na pasta @hubspot em vez de executar o comando fetch mostrado na etapa 1.
1

Obtendo o tema para o diretório local

Abra o terminal e acesse o diretório para o qual deseja baixar os arquivos. Este será seu diretório de trabalho principal para o restante deste tutorial.Para baixar o tema de orçamentos padrão, execute o seguinte no seu terminal:
hs fetch @hubspot/cms-quotes-theme "my-quotes-theme"
Agora você deve ver uma pasta chamada my-quotes-theme no sistema de arquivos local. Essa pasta contém todos os ativos necessários para o tema do orçamento, incluindo dados falsos e padrões do módulo dentro da pasta de imports.
2

Carregar e assistir às alterações

Com a pasta baixada, faça o upload para o HubSpot. Embora você possa usar o comando hs upload para realizar um único upload, você pode usar o comando watch para disparar uploads automáticos em cada salvamento de arquivo:
hs watch "my-quotes-theme" "my-quotes-theme" --initial-upload
Após o upload, agora você pode exibir a pasta my-quotes-theme no gerenciador de design. Para abrir o gerenciador de design do terminal, abra uma nova guia ou janela do terminal e execute o comando hs open dm.
Uma nova guia ou janela de terminal é necessária porque você não pode executar comandos enquanto o processo de hs watch estiver em execução. Você também pode pressionar q para finalizar o comando, executar outro comando e executar novamente hs watc.
3

Abrir uma visualização do modelo

Para visualizar o modelo de orçamento:
  • No gerenciador de design, navegue até os my-quotes-theme > templates > bold.html.
  • No canto superior direito do editor de código, clique em Visualizar e selecione Visualização ativa com opções de exibição.
Com a visualização do modelo aberta, você fará uma alteração localmente, que será carregada automaticamente ao salvar devido à execução do hs watch.
4

Fazer uma alteração localmente

  • No editor de código local, abra my-quotes-theme > css > bold.css.
    • Adicione o código abaixo bold.css e salve as alterações:
.line-items__table tbody tr:nth-child(odd) {
  background-color: #d6d6d6;
}
  • Atualize a visualização do modelo no navegador para visualizar as alterações no CSS. Agora você deve ver que cada linha ímpar no corpo da tabela tem um fundo cinza.
Ao criar seu tema de orçamento personalizado, você pode repetir esse fluxo de trabalho para confirmar rapidamente as alterações que está fazendo localmente.

​
Observação:

Devido à complexidade do sistema de assinatura, as assinaturas não serão exibidas em visualizações.
5

Alterar o rótulo do modelo

Ao preparar um tema de orçamentos personalizado para uso na vida real, você deve estar atento ao rótulo do modelo para que os representantes de vendas possam encontrá-lo facilmente entre as opções de orçamento padrão da HubSpot.Para alterar o rótulo do modelo de orçamento:
  • No editor de código, abra my-quotes-theme > templates > bold.html.
  • No canto superior do arquivo, visualize a anotação do modelo:
<!--
 templateType: quote
 isAvailableForNewContent: true
 label: Bold
-->
  • Atualize o parâmetro label de Bold para um nome de sua escolha, como My custom quote template.
  • Salve o arquivo para carregá-lo no HubSpot.
6

Personalize o modelo de orçamento no HubSpot

Antes que um representante de vendas possa usar seu modelo de orçamento, ele deve ser personalizado no HubSpot. Isso normalmente seria feito por um gerente de vendas para que possa criar orçamentos prontos para sua equipe de vendas. No entanto, neste tutorial, você mesmo passará por esse processo para entender como é a experiência de criação de conteúdo.Para personalizar o modelo de orçamento e disponibilizá-lo para representantes de vendas:
  • Na sua conta da HubSpot, clique no ícone de configurações settings na barra de navegação principal.
  • No menu da barra lateral esquerda, acesse Objetos > Orçamentos.
  • Clique na guia Modelos de orçamento.
  • No canto superior direito, clique Personalizar modelo de orçamento.
  • Passe o cursor sobre o novo modelo e selecione Escolher.
  • Usando o painel esquerdo, você pode editar os módulos incluídos no modelo. Por exemplo, você pode clicar em um módulo para editar suas propriedades ou alternar a visibilidade.
quote-template-toggle-visibility
  • No canto superior direito, clique em Salvar quando terminar de fazer alterações.
7

Crie um orçamento usando seu novo modelo

Com suas alterações salvas, você pode criar um orçamento com o modelo, simulando a experiência do representante de vendas.
  • Em sua conta da HubSpot, acesse Vendas > Orçamentos.
  • No canto superior direito, clique em Criar orçamento. Você será redirecionado para um assistente de criação de orçamentos.
  • Na primeira tela, clique no menu suspenso Associar com um negócio e, em seguida, selecione um negócio existente ou selecione Criar um novo negócio se quiser usar um negócio de teste.
  • No canto inferior direito, clique em Próximo.
  • Na tela seguinte, clique no menu suspenso Orçamento e selecione seu modelo de orçamento personalizado.
  • Prossiga pelo resto do assistente para criar seu orçamento.
  • Depois de publicar o orçamento, uma caixa de diálogo será exibida com um link para visualizá-lo. Clique em Copiar para copiar a URL e cole no navegador para visualizar o orçamento concluído.
copy-quote-url

​
Próximas etapas

Com seu modelo de orçamento criado, carregado e personalizado, você deve ter uma melhor compreensão do processo de edição do modelo de orçamento e da experiência do criador do conteúdo. À medida que você cria modelos de orçamento para atender às suas necessidades de negócios, é possível tentar adicionar seus próprios módulos personalizados ao orçamento, juntamente com os módulos padrão da HubSpot.
Observe: é recomendável não editar o JavaScript dos módulos de pagamento, assinatura e download, pois isso pode levar à quebra dos módulos. Se estiver danificado, o usuário final pode não conseguir assiná-lo, baixá-lo ou até mesmo fazer um pagamento.

​
Recursos relacionados