Configurar template no SmartCheckout

Configurações do Checkout

O Portal é usado para renderizar as telas de Checkout (Carrinho, Dados Pessoais, Endereço, Forma de Pagamento) e OrderPlaced (Tela de confirmação de compra). Neste artigo será apresentado como cadastrar e configurar os recursos do Portal.

O módulo Checkout no Admin, exibe os sites que estão cadastrados para a sua conta. Por meio dele, também é possível criar um novo site, editar e configurar informações sobre os sites já existentes.

Cada site cadastrado corresponde a um multidomínio (caso a conta possua multidomínios contratados). Para contas que não utilizam multidomínios, não é necessário cadastrar mais de um site neste módulo. Saiba mais em Criar multiloja/multidomínio.

Criar novo site

No Admin VTEX, acesse Configurações da loja > Storefront > Checkout, ou digite Checkout na barra de busca no topo da página.
Clique no botão Novo Site.
Preencha os seguintes campos:

Nome: insira aqui o nome desejado para o site.
Loja: preencher com o nome da conta, que pode ser encontrado em Configurações da Conta > Gerenciamento da Conta > Contas > Nome da Conta.

Clique em Salvar.

Criação do novo site:

${"base64":" ","img":{"width":1720,"height":1639,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":107525,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Checkout/Checkout%20Settings/configurar-template-no-smartcheckout-update_1.png"}}$

Acesso ao Nome da Conta:

${"base64":" ","img":{"width":1281,"height":1308,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":178279,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Checkout/Checkout%20Settings/configurar-template-no-smartcheckout-update_2.png"}}$

Editar e configurar site

No Admin VTEX, acesse Configurações da loja > Storefront > Checkout, ou digite Checkout na barra de busca no topo da página.
Clique no ícone do site desejado.
Ao acessar o menu de opções azul localizado na parte superior da página, é possível realizar as seguintes ações:
- Sites: retornar para a tela inicial dos sites cadastrados.
- Editar: editar o "Nome" e "Loja".
- Checkout: realizar configurações básicas, como Cálculo de frete, Google Tag Manager, entre outras.
- Pedidos: configurar razões de cancelamento e de substituição de pedidos.
- Código: exibir e criar templates relacionados ao site.
- Páginas: exibir as páginas existentes para o site.

Exemplo de sites existentes em uma mesma conta:

${"base64":" ","img":{"width":1281,"height":1278,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":149787,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Checkout/Checkout%20Settings/configurar-template-no-smartcheckout-update_3.png"}}$

Exemplo de páginas disponíveis para um site:

${"base64":" ","img":{"width":995,"height":387,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":45731,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Checkout/Checkout%20Settings/configurar-template-no-smartcheckout-update_4.png"}}$

Caso deseje excluir um site, clique no botão de exclusão do site desejado, como no exemplo indicado abaixo:

${"base64":" ","img":{"width":298,"height":120,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":8433,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Checkout/Checkout%20Settings/configurar-template-no-smartcheckout-update_5.png"}}$

A seguir, vamos aprofundar o passo a passo da configuração das oções de menu: Código e Checkout, sendo estas responsáveis por configurar as páginas de Checkout e Order Placed.

Configurar Checkout

No Admin VTEX, acesse Configurações da loja > Storefront > Checkout, ou digite Checkout na barra de busca no topo da página.
Clique no ícone do site desejado.
No menu de opções azul localizado na parte superior da página, clique em Checkout e configure os campos abaixo, conforme necessário:

Título: caso informado, será exibido no título das páginas de carrinho, finalização de compra e pedido confirmado.
Google Tag Manager: informe o ID (no formato GTM-XXXX) do seu contêiner do Google Tag Manager, caso deseje usá-lo automaticamente.
Google Maps API Key: a chave é utilizada em duas situações: quando a função de Entrega com base na coordenada geográfica está ativa ou caso esteja disponível a opção de Retirada em loja.
Cálculo das opções de Entrega (Beta e Stable): selecione se o cálculo do frete será feito a partir da planilha ou por geolocalização.

${"base64":" ","img":{"width":994,"height":1260,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":158817,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Checkout/Checkout%20Settings/configurar-template-no-smartcheckout-update_6.png"}}$

Configurar código

No Admin VTEX, acesse Configurações da loja > Storefront > Checkout, ou digite Checkout na barra de busca no topo da página.
Clique no ícone do site desejado.
No menu de opções azul localizado na parte superior da página, clique em Código. Será exibido, à direita, um menu de Arquivos e Templates com todos os templates de seu site, configurados pelo sistema.

${"base64":" ","img":{"width":2678,"height":1602,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":172829,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Checkout/Checkout%20Settings/configurar-template-no-smartcheckout-update_7.PNG"}}$

É possível customizar as páginas do seu site, além de configurar outras funcionalidades em HTML por meio do menu de Arquivos e Templates.

O código HTML preenchido no template corresponde ao que aparecerá nas páginas de checkout e order placed de seu site.

Dos templates disponíveis templates, os únicos que não podem ser alterados são vtex-checkout e vtex-orderPlaced. Estes correspondem ao funcionamento nativo da plataforma, renderizando o conteúdo principal das páginas de checkout e order placed.

Javascripts incluídos diretamente em quaisquer templates do Portal serão ignorados pela plataforma. Ou seja, no momento da renderização da página, a plataforma o removerá. Isso porque o SmartCheckout apenas aceita scripts originados no Google Tag Manager. Assim, sempre que houver necessidade de realizar alguma customização (ou mesmo inserção de tags específicas) via javascript, utilize Google Tag Manager.

Exemplos de preenchimento de templates

Abaixo temos exemplos de como os códigos presentes nos templates do checkout-header, checkout-footer, vtex-checkout e vtex-orderPlaced podem ser preenchidos e a sua visualização correspondente no site:

Template checkout-header e cabeçalho da página do site:

${"base64":" ","img":{"width":993,"height":754,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":81018,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Checkout/Checkout%20Settings/configurar-template-no-smartcheckout-update_8.png"}}$

${"base64":" ","img":{"width":1108,"height":916,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":59653,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Checkout/Checkout%20Settings/configurar-template-no-smartcheckout-update_9.png"}}$

Template checkout-footer e rodapé da página do site:

${"base64":" ","img":{"width":994,"height":759,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":82219,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Checkout/Checkout%20Settings/configurar-template-no-smartcheckout-update_10.png"}}$

${"base64":" ","img":{"width":1108,"height":916,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":59464,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Checkout/Checkout%20Settings/configurar-template-no-smartcheckout-update_11.png"}}$

Template vtex-checkout e página do carrinho no Checkout:

${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAMklEQVR4nAEnANj/AAEKD3l+f66vsBYaHADq6un////m5+d6e34A+vv7////xcXHBQ0TiEsWLvxNmroAAAAASUVORK5CYII=","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Checkout/Checkout%20Settings/configurar-template-no-smartcheckout-update_12.png","width":1159,"height":873,"type":"png"}}$

${"base64":" ","img":{"width":1140,"height":874,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":60064,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Checkout/Checkout%20Settings/configurar-template-no-smartcheckout-update_13.png"}}$

Template vtex-orderPlaced e página do pedido confirmado:

${"base64":" ","img":{"width":1162,"height":865,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":43666,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Checkout/Checkout%20Settings/configurar-template-no-smartcheckout-update_14.png"}}$

${"base64":" ","img":{"width":1104,"height":1115,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":88419,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Checkout/Checkout%20Settings/configurar-template-no-smartcheckout-update_15.png"}}$

Contas com multidomínio

As contas que possuem multidomínio podem usar apenas um site, caso não haja necessidade de configurações específicas. Isso porque, ainda que exista apenas um site, a plataforma inclui uma classe na tag "body" de acordo com o domínio acessado. Dessa forma, é simples aplicar layouts diferentes para o mesmo site.

Classe inserida na tag "body" de acordo com o domínio acessado:

${"base64":" ","img":{"width":1830,"height":1080,"type":"jpg","mime":"image/jpeg","wUnits":"px","hUnits":"px","length":319336,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Checkout/Checkout%20Settings/configurar-template-no-smartcheckout-update_16.jpg"}}$