Uso do editor de branding no Checkout Blocks

É possível usar o editor de branding no Checkout Blocks, viabilizado pela API de Branding do Checkout, para personalizar a estética das páginas de checkout e de contas sem precisar modificar nenhum código.

É possível usar o editor de branding para editar as cores e os elementos do checkout para qualquer configuração de checkout. As alterações feitas no design do checkout com o editor de branding se aplicam a todas as páginas do checkout, incluindo a página de agradecimento, a página de status do pedido e as novas páginas de contas de cliente.

Para abrir o editor de branding no admin da Shopify, clique em Apps > Checkout Blocks e, depois, em Editor de branding.

Personalizar as cores do checkout

Na seção Cores, é possível personalizar as cores de base do checkout. Também é possível personalizar até quatro esquemas de cores que se aplicam a seções individuais para fazer edições mais detalhadas no design. É possível editar os tipos de cor, incluindo cores de destaque (para elementos interativos, como links) e cores da marca (usadas para elementos como botões primários e secundários).

Etapas:

Personalizar os elementos do checkout

Na seção Personalizações do editor de branding, é possível editar os seguintes elementos do checkout:

• Favicon: escolha o ícone que é exibido para os clientes na aba do navegador durante o checkout.
• Global: ajuste o raio do canto para todos os elementos (entradas de formulário, botões e cartões).
• Cabeçalho e logo: selecione a posição do cabeçalho no checkout, bem como a exibição de trilhas de navegação, um link para o carrinho e um logo.
• Principal: aplique esquemas de design à área de conteúdo principal do checkout, incluindo imagens de fundo, larguras da borda e esquemas de cores.
• Resumo do pedido: aplique esquemas de design à barra lateral do checkout que contém o resumo do pedido do cliente, incluindo imagens de fundo, larguras da borda e esquemas de cores.
• Rodapé: selecione a largura do rodapé no checkout e defina se as políticas da loja serão exibidas.
• Tipografia: selecione o tamanho, a família, o peso, o kerning e o uso de maiúsculas/minúsculas da fonte para até três níveis de cabeçalhos.
• Botões: selecione o preenchimento, as bordas e os estilos dos botões primário e secundário.
• Formulários: personalize os estilos das entradas do formulário de checkout, como caixas de seleção, campos de texto e opções selecionadas de uma lista.
• Miniaturas de produtos: ajuste os estilos da borda e do raio do canto para as imagens dos produtos no checkout.

Etapas:

1. No admin da Shopify, acesse Apps > Checkout Blocks.

2. Clique em Editor de branding.

3. Na seção Personalizações, clique em um dos elementos que você quer personalizar, como Cabeçalho e logo.

4. Use as opções de personalização disponíveis para ajustar o elemento do checkout conforme sua preferência.

5. Clique em Salvar.

Alterar as configurações do checkout

Ao abrir o editor de branding, a edição da configuração de checkout que está Ativa no momento ocorre por padrão. No entanto, é possível alterar a configuração de checkout que deseja editar com o editor de branding, bem como criar novas configurações.

Saiba mais sobre o gerenciamento das configurações ativas e de rascunho do checkout.

Etapas:

1. No admin da Shopify, acesse Apps > Checkout Blocks.

2. Clique em Editor de branding.

3. Clique no nome da configuração de checkout atual para abrir um menu suspenso com uma lista das configurações ativas e de rascunho, depois selecione a configuração de checkout que deseja personalizar:

   • Selecione uma configuração existente que você quer editar.
   • Clique em ⊕ Criar nova configuração para ser redirecionado para as configurações de Checkout no admin da Shopify.

Visualizar o checkout

É possível visualizar as alterações feitas no editor de branding a qualquer momento. Para isso, selecione a configuração de checkout que quer visualizar e clique em Visualizar. O editor de checkout e contas será iniciado em uma aba separada, com todas as alterações aplicadas, para você poder ver como elas serão exibidas no checkout.

Etapas:

1. No admin da Shopify, acesse Apps > Checkout Blocks.

2. Clique em Editor de branding.

3. Faça as personalizações que quiser nas cores ou nos elementos da configuração do checkout.

4. Clique em Visualizar.

Exportar e importar configurações do checkout

É possível exportar e importar as configurações de checkout usando arquivos JSON.

Exportar uma configuração de checkout:

1. No admin da Shopify, acesse Apps > Checkout Blocks.

2. Clique em Editor de branding.

3. Selecione a configuração de checkout com as personalizações aplicadas no editor de branding.

4. Clique em Mais ações > Exportar configuração.

O download da configuração do checkout é feito como um arquivo .json no seu dispositivo.

Importar uma configuração de checkout:

1. No admin da Shopify, acesse Apps > Checkout Blocks.

2. Clique em Editor de branding.

3. Selecione a configuração de checkout à qual você quer aplicar o perfil de branding importado.

4. Clique em Mais ações > Importar configuração.

5. Na caixa de diálogo Importar branding do checkout, faça o upload do arquivo JSON de branding:

   1. Clique em Adicionar arquivo.
   2. Selecione o arquivo JSON apropriado no seu dispositivo.
   3. Clique em Importar e continuar.

6. Analise a configuração de personalização pré-carregada e modifique-a conforme o necessário.

7. Clique em Salvar.

Redefinir o estilo do checkout para o padrão

Ao editar uma cor ou um elemento do checkout no editor de branding, é possível redefinir o valor específico para o valor-padrão clicando em Redefinir ao lado da cor ou do elemento alterado.

A qualquer momento, é possível redefinir o branding de toda a configuração do checkout para os valores-padrão da Shopify. A redefinição da configuração do checkout limpa todas as personalizações em todas as páginas do editor de branding. Essa ação não pode ser desfeita.

Etapas:

1. No admin da Shopify, acesse Apps > Checkout Blocks.

2. Clique em Editor de branding.

3. Selecione a configuração do checkout que você quer redefinir.

4. Clique em Redefinir para o padrão.

5. Na caixa de diálogo Redefinir para os estilos-padrão?, clique em Continuar.