Usar o editor de branding no Checkout Blocks

Requisito de plano

The Checkout Blocks branding editor está disponível apenas para lojistas no plano Shopify Plus.

Use o editor de branding do Checkout Blocks com tecnologia da API Checkout Branding para personalizar o visual de suas páginas de checkout e contas sem precisar modificar nenhum código.

É possível usar o editor de branding para alterar as cores e os elementos de qualquer configuração de checkout. As alterações feitas no design do checkout pelo editor de branding serão aplicadas a todas as páginas, incluindo as de agradecimento, status do pedido e novas contas de clientes.

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

Personalizar cores do checkout

Na seção Colors ("Cores"), é possível personalizar as cores-base do checkout, bem como modificar até quatro esquemas de cores para aplicar a seções individuais, permitindo edições mais detalhadas no design. Edite tipos de cores, 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:

Customize global colors

1. No admin da Shopify, clique em Apps > Checkout Blocks.

2. Clique em Branding editor ("Editor de branding").

3. Na seção Colors ("Cores"), clique em Global colors ("Cores globais").

4. Para trocar uma cor no checkout, na seção Global colors ("Cores globais"), clique no ícone ⊕ e selecione aquela que você quer realizando uma destas ações:

   • Use o seletor de cores.
   • Digite o código HEX da cor no campo disponível.

5. Clique em Salvar.

Customize color schemes

1. No admin da Shopify, clique em Apps > Checkout Blocks.

2. Clique em Branding editor ("Editor de branding").

3. Na seção Colors ("Cores"), clique em Scheme 1 ("Esquema 1"), Scheme 2 ("Esquema 2"), Scheme 3 ("Esquema 3") ou Scheme 4 ("Esquema 4") para personalizar um esquema de cor específico.

4. Selecione um dos componentes para personalizar:

   • Cores principais
   • Controles de formulário
   • Botão principal
   • Botão secundário

5. Na seção Base, clique no ícone ⊕ ao lado do tipo de cor que você quer personalizar. Em seguida, selecione aquela que você quer realizando uma destas ações:

   • Use o seletor de cores.
   • Digite o código HEX da cor no campo disponível.

6. Opcional: se você estiver editando o esquema dos Form controls ("Controles de formulário"), do Primary button ("Botão principal") ou do Secondary button ("Botão secundário"), também poderá personalizar as cores para o comportamento de interação On select ("Ao selecionar") ou On hover ("Ao passar o mouse"). Clique no ícone ⊕ ao lado do tipo de cor que você quer personalizar e selecione aquela que você quer realizando uma destas ações:

   • Use o seletor de cores.
   • Digite o código HEX da cor no campo disponível.

7. Clique em Salvar.

Personalizar elementos do checkout

Na seção Customizations ("Personalizações") do editor de branding, é possível alterar os seguintes elementos do checkout:

• Favicon: escolha o ícone exibido a 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).
• Título e logo: selecione a posição do cabeçalho no checkout, além de exibir a trilha de navegação, um link de carrinho e um logo.
• Principal: aplique esquemas de design à área do 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 com um 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 se quer exibir as políticas da loja.
• Tipografia: selecione o tamanho, a família, a espessura, o kerning e a capitalização de letras da fonte para até três níveis de título.
• Botões: selecione o preenchimento, as bordas e os estilos dos botões primário e secundário.
• Formulários: personalize os estilos de entradas de formulários de checkout, como caixas de seleção, campos de texto e opções selecionadas em uma lista.
• Miniaturas de produtos: ajuste os estilos de raio da borda e do canto das imagens do produto no checkout.

Etapas:

1. No admin da Shopify, clique em Apps > Checkout Blocks.
2. Clique em Branding editor ("Editor de branding").
3. Na seção Customizations ("Personalizações"), clique em um dos elementos que você quer personalizar, como Header & logo ("Título e logo").
4. Usando as opções de personalização disponíveis, ajuste o elemento de checkout conforme sua preferência.
5. Clique em Salvar.

Alternar as configurações de checkout

Ao abrir o editor de branding, você está editando a configuração de checkout que está atualmente Ativa por padrão. No entanto, é possível alterar qual configuração de checkout que você quer editar no editor de branding, bem como criar novas configurações de checkout.

Saiba mais sobre como gerenciar as configurações de checkout ativo e de rascunho.

Etapas:

1. No admin da Shopify, clique em Apps > Checkout Blocks.
2. Clique em Branding editor ("Editor de branding").
3. Clique no nome da configuração de checkout atual para abrir um menu suspenso com uma lista da configuração ativa, bem como rascunhos de configurações. Em seguida, selecione aquela que você quer personalizar:
   • Selecione a configuração que você quer editar.
   • Clique em ⊕ Create new configuration ("Criar configuração") para acessar as configurações de Checkout no admin da Shopify.

Pré-visualizar o checkout

Quer ver como as mudanças feitas no editor de branding vão aparecer no checkout? Basta selecionar a configuração em questão e clicar em Preview ("Pré-visualizar"). O editor de checkout e contas abre uma nova aba e mostra como tudo vai ficar com suas alterações aplicadas.

Etapas:

1. No admin da Shopify, clique em Apps > Checkout Blocks.
2. Clique em Branding editor ("Editor de branding").
3. Faça todas as personalizações nas cores ou nos elementos da configuração de checkout que você quer ajustar.
4. Clique em Pré-visualizar.

Exportar e importar as configurações de checkout

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

Exportar uma configuração de checkout

1. No admin da Shopify, clique em Apps > Checkout Blocks.
2. Clique em Branding editor ("Editor de branding").
3. No editor de branding, escolha a configuração de checkout com as personalizações aplicadas.
4. Clique em More actions ("Mais ações") > Export configuration ("Exportar configuração").

A configuração de checkout é baixada como .json para o dispositivo local.

Importar uma configuração de checkout

1. No admin da Shopify, clique em Apps > Checkout Blocks.

2. Clique em Branding editor ("Editor de branding").

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

4. Clique em More actions ("Mais ações") > Import configuration ("Importar configuração").

5. Na caixa de diálogo Import checkout branding ("Importar branding do checkout"), faça upload do arquivo JSON relacionado:

   1. Clique em Adicionar arquivo.
   2. Selecione o arquivo JSON em questão no dispositivo.
   3. Clique em Import and continue ("Importar e continuar").

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

7. Clique em Salvar.

Restaurar o estilo-padrão do checkout

Não gostou da última mudança? É possível restaurar valores específicos para o padrão original clicando em Reset ("Redefinir") ao alterar uma cor ou um elemento do checkout no editor de branding.

Você tem a opção de recuperar toda a configuração de branding do checkout para os valores-padrão da Shopify, o que apaga 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, clique em Apps > Checkout Blocks.
2. Clique em Branding editor ("Editor de branding").
3. Selecione a configuração de checkout que você quer restaurar.
4. Clique em Reset to default ("Restaurar padrão").
5. Na caixa de diálogo Reset to default styles? ("Restaurar os estilos-padrão?"), clique em Continue ("Continuar").