Adicionar o bloco do formulário no editor de temas

O Sami B2B Onboarding adiciona ao seu tema um bloco B2B application form. Ele exibe um formulário como uma seção própria em um modelo de página, para que você coloque suas próprias seções acima e abaixo dele, como um banner ou uma lista do que quem compra no atacado recebe.

Nota

Antes de começar: o formulário precisa estar publicado (Active em Forms). Mantenha também a incorporação de app ativada, para que suas configurações de acesso à loja sejam aplicadas na página. Veja Ativar a incorporação de app.

Escolha um modelo para o formulário

Uma seção adicionada a um modelo de página aparece em todas as páginas que usam esse modelo. A maioria das páginas usa o modelo de página padrão do seu tema, inclusive a página que o app criou para o seu formulário, que já contém o formulário. Para exibir o formulário em uma única página, dê a ela um modelo próprio, como nas etapas abaixo.

Adicione o bloco a um modelo próprio

1. Abra o editor de temas

   No admin da Shopify, acesse Loja virtual › Temas e clique em Personalizar no seu tema atual.

2. Crie um modelo de página

   Abra o menu de modelos no topo do editor de temas (ele mostra Página inicial quando o editor abre). Escolha Páginas e depois Criar modelo. Dê um nome a ele, por exemplo wholesale, baseie-o em Página padrão e clique em Criar modelo.

   O editor muda para o novo modelo.

3. Adicione a seção do formulário

   Na barra lateral à esquerda, clique em Adicionar seção em Modelo, abra a guia Apps e escolha B2B application form.

   O formulário é adicionado como um bloco em uma seção Apps, e a visualização mostra nela o seu formulário padrão. No editor de temas, você sempre vê o próprio formulário, mesmo conectado à sua loja.

   

   Adicionar seção em Modelo e, depois, escolha B2B application form na guia Apps.

4. Escolha o formulário

   Clique em B2B application form em Apps na barra lateral. Na caixa Form dele:

   • deixe-a vazia para exibir o seu formulário padrão, ou
   • digite o slug de outro formulário, o nome curto que o texto de ajuda da caixa pede.

   Para encontrar o slug de um formulário, acesse Forms no app, clique em … (More actions) na linha do formulário e escolha Copy embed code. Cole-o em algum lugar onde você consiga ler: o slug é o texto no último par de aspas. No formulário Wholesale application, é wholesale-application.

   

   Deixe Form vazio para o formulário padrão ou digite o slug de outro formulário.

5. Salve

   Clique em Salvar no canto superior direito do editor de temas.

6. Atribua o modelo a uma página

   No admin da Shopify, acesse Loja virtual › Páginas. Abra a página que deve exibir o formulário ou clique em Adicionar página para criar uma e dar um título a ela, por exemplo Wholesale. Em Modelo de tema, escolha wholesale e clique em Salvar.

   Não o escolha para a página que o app criou para o formulário: essa página já contém o formulário, então ele apareceria duas vezes.

Use o atalho de Forms

O app tem um atalho que abre o editor de temas com o bloco já pronto.

1. Abra o atalho

   No app, acesse Forms. Clique em … (More actions) na linha do formulário e escolha Add block in theme editor.

   

   Add block in theme editor abre o editor de temas com o bloco do formulário adicionado.

2. Escolha o formulário e salve

   O editor de temas do seu tema atual abre no modelo de página padrão, com o bloco B2B application form adicionado. Clique no bloco, digite o slug do formulário em Form (ou deixe vazio para o seu formulário padrão) e clique em Salvar.

Cuidado

O atalho adiciona a seção ao seu modelo de página padrão. Todas as páginas que usam esse modelo passam a exibir o formulário, inclusive a página que o app criou para ele, que mostra o formulário duas vezes. Para exibir o formulário em uma única página, use um modelo próprio, como descrito acima.

Confira na sua loja

1. Abra a página como visitante

   Abra a página na sua loja em uma janela anônima do navegador, para vê-la como alguém que compra e não está conectado. O formulário aparece na sua seção, entre as suas outras seções.

2. Corrija o que encontrar, se necessário

   • This form is not available right now. O slug em Form não corresponde a um formulário publicado. Confira a grafia ou publique o formulário em Forms.
   • Aparece um formulário diferente. Form está vazio, então a seção mostra o seu formulário padrão. Digite o slug do formulário que você quer ou defina esse formulário como padrão com … (More actions) › Set as default em Forms.

Se você bloquear sua loja, uma página de Loja virtual › Páginas que exibe o formulário continua aberta para visitantes. Veja Bloquear a loja.

Próximos passos

• Personalizar o design do formulário: combine a fonte, as cores e a largura do formulário com a página ao redor.
• Colar o código de incorporação: coloque o formulário em uma seção de Liquid personalizado ou em um construtor de páginas.
• Use a página do formulário criada pelo app: compartilhe uma página pronta quando não precisar de uma elaborada.