Adicionar o código do Botão Comprar ao HTML

Depois de criar um Botão Comprar no admin da Shopify, é possível adicioná-lo a seu próprio site ou blog.

O processo de adicionar códigos de incorporação ao HTML de origem de seu site é um pouco diferente, dependendo de como e onde você deseja que seus botões e carrinho de compras sejam exibidos, em sua plataforma de publicação e, às vezes, do tema que você está usando nessa plataforma.

Observação

Caso você queira ajuda para adicionar o código de incorporação a plataformas de publicação fora da Shopify, como Squarespace ou WordPress, entre em contato com o provedor de seu site ou com a própria plataforma.

Adicionar código de incorporação ao WordPress

Os códigos de incorporação podem ser adicionados a posts, páginas ou modelos no site do WordPress.

Observação

Os Botões Comprar incorporados são compatíveis com sites do WordPress.org auto-hospedados e com alguns planos oferecidos pelo WordPress.com. É importante destacar que a documentação abaixo foi redigida de acordo com as versões recentes do WordPress, mas a versão instalada em seu site pode ser diferente. Para saber mais sobre as versões do WordPress, consulte o site de atendimento da plataforma.

Adicionar código de incorporação a um post ou uma página do WordPress

1. Na Shopify, crie um Botão Comprar e copie o código de incorporação na caixa de diálogo Código de incorporação (ou clique em Copiar código de incorporação para a área de transferência).
2. No painel do WordPress, acesse os posts ou as páginas.
3. Crie ou edite um post ou uma página.
4. Dentro do editor de blocos, clique no botão +, pesquise HTML personalizado e clique para inserir um bloco desse tipo.
5. Cole o código de incorporação no campo de texto disponibilizado pelo bloco de HTML personalizado.

6. Opcional: mova o bloco de HTML personalizado ou veja uma prévia da aparência do Botão Comprar:

   • Para mover o bloco de HTML personalizado, clique nos botões de seta na barra de ferramentas dele ou arraste-o para um novo local.
   • Para conferir uma prévia do Botão Comprar, clique em Visualizar na barra de ferramentas do bloco.

7. Quando terminar, clique no botão Salvar rascunho, Ver ou Publicar do post ou da página.

Se você usa o plugin Classic Editor do WordPress, em vez de usar um bloco de HTML personalizado, altere o modo do editor de texto de Visual para Texto e cole o código de incorporação no editor.

Adicionar código de incorporação a um modelo do WordPress

Caso seu tema do WordPress seja compatível com o editor de sites, será possível adicionar um Botão Comprar incorporado aos modelos do site.

Etapas:

1. Na Shopify, crie um Botão Comprar e copie o código de incorporação na caixa de diálogo Código de incorporação (ou clique em Copiar código de incorporação para a área de transferência).
2. No painel do WordPress, acesse o Editor.
3. Navegue até o modelo que você quer editar.
4. Dentro do editor de blocos, clique no botão +, pesquise HTML personalizado e clique para inserir um bloco desse tipo.
5. Cole o código de incorporação no campo de texto disponibilizado pelo bloco de HTML personalizado.

6. Opcional: mova o bloco de HTML personalizado ou veja uma prévia da aparência do Botão Comprar:

   • Para mover o bloco de HTML personalizado, clique nos botões de seta na barra de ferramentas dele ou arraste-o para um novo local.
   • Para conferir uma prévia do Botão Comprar, clique em Visualizar na barra de ferramentas do bloco.

7. Quando terminar, clique no botão Visualizar ou Salvar do modelo.

Adicionar códigos de incorporação ao seu blog da Shopify

Observação

O Botão Comprar cria um carrinho separado. Se o cliente mudar para uma página diferente na loja virtual, o item não aparecerá mais no carrinho. É possível editar o Botão Comprar para ir diretamente para o checkout.

Atenção: #### Etapas:

Desktop

1. No admin da Shopify, acesse Loja virtual > Posts do blog.
2. Na página Posts do blog, clique no título de um post do blog que você deseja editar ou clique em Adicionar post de blog para criar uma nova postagem.
3. Na seção Escreva seu post do blog, clique em Exibir HTML no editor de rich text.
4. Cole seu código de incorporação no campo de texto principal.
5. Clique em Salvar.

iPhone

1. No app da Shopify, toque no botão ….
2. Na seção canais de vendas, toque em loja virtual.
3. Toque em Posts do blog.

Android

1. No app da Shopify, toque no botão ….
2. Na seção canais de vendas, toque em loja virtual.
3. Toque em Posts do blog.

## Adicionar código de incorporação ao Squarespace

Aviso

Algumas personalizações avançadas no Squarespace são específicas do tema. Essas personalizações não são compatíveis com a Shopify.

Você pode adicionar códigos de incorporação a postagens individuais no Squarespace e aos menus da sua página inicial. Em alguns casos, talvez você queira fazer as duas coisas. Por exemplo, é possível incorporar um carrinho em sua página inicial para receber as compras dos Botões Comprar que você incorporou em postagens individuais.

Etapas:

1. No seu painel do Squarespace, abra a página em que você deseja adicionar o código de incorporação.
2. Encontre o elemento na página em que você quer que o Botão Comprar ou o carrinho incorporado apareça, mova o cursor sobre a área Conteúdo da página e clique em EDITAR.
3. Clique no ponto de inserção onde você deseja adicionar o código de incorporação.
4. Na seção Mais da caixa de diálogo Blocos de conteúdo, clique em Código.
5. No admin da Shopify, copie o código de incorporação da caixa de diálogo Código de incorporação.
6. No seu painel do Squarespace, cole o código de incorporação na caixa de diálogo CÓDIGO. Confira se o campo de texto está configurado para receber HTML.
7. Clique em APLICAR na caixa de diálogo EDITAR CÓDIGO.
8. Clique em SALVAR novamente no editor de páginas. Como o Squarespace desabilita o JavaScript em seu painel de controle, você precisa visualizar sua página separadamente para ver se o Botão Comprar ou o carrinho incorporado está funcionando.

Se você concluir as etapas e o Botão Comprar não estiver carregando, talvez seja necessário desabilitar o carregamento do Ajax. Para ver mais detalhes, acesse Habilitar ou desabilitar o Ajax.

Observação

Se você adicionar um carrinho incorporado a um menu em sua página inicial do Squarespace, ele receberá pedidos dos Botões de compra que você incorpora em postagens individuais.

Adicionar um código de incorporação ao Wix

Depois de criar um Botão Comprar ou uma coleção no admin da Shopify, é possível adicioná-los a seu site Wix com o Editor de sites Wix.

Aviso

Se você quiser incorporar Botões Comprar a vários produtos ou coleções, edite o código de incorporação antes de adicioná-lo ao widget de código HTML do Wix. Se você incorporar mais de um Botão Comprar ao seu site Wix sem editar o código de incorporação, os clientes que estiverem tentando comprar mais de um produto verão um carrinho separado para cada produto.

Se deseja exibir mais de um produto em seu site Wix sem editar o código de incorporação, você pode incorporar uma coleção. Você pode criar uma nova coleção no seu admin da Shopify para os produtos que você deseja exibir no Wix.

Etapas:

1. No admin da Shopify, crie um Botão Comprar para um produto ou uma coleção e copie o código de incorporação.

Observação

Quando você cria um Botão Comprar para um site Wix, não pode usar a opção Redirecionamento na mesma aba devido às limitações do Wix.

1. Na sua conta Wix, encontre o site que você deseja editar na seção Meus sites e clique em Editar site.
2. No Editor de sites da Wix, clique no botão + e, depois, em Mais.
3. Clique em Código HTML para adicionar um widget de código HTML à página.
4. Clique em Inserir código.
5. Na caixa de diálogo Configurações HTML, cole o código de incorporação do Botão Comprar ou da coleção no campo Adicionar seu código aqui e clique em Atualizar.
6. Redimensione o widget de código HTML para ajustar seu conteúdo. Se você estiver criando uma incorporação com um carrinho, verifique se a aba do carrinho aparece no lugar certo.
7. Ao terminar, clique em Salvar.

Incorporar vários produtos ou coleções

Etapas:

1. No admin da Shopify, crie um Botão Comprar para um produto ou uma coleção e copie o código de incorporação.
2. Cole o código em um editor de código ou no construtor de sites Wix. Repita os dois primeiros passos até ter criado os Botões Comprar necessários.
3. Edite os códigos de incorporação para garantir que eles sejam exibidos no alinhamento correto.
4. Na sua conta Wix, encontre o site que você deseja editar na seção Meus sites e clique em Editar site.
5. No Editor de sites da Wix, clique no botão + e, depois, em Mais.
6. Clique em Código HTML para adicionar um widget de código HTML à página.
7. Clique em Inserir código.
8. Na caixa de diálogo Configurações HTML, cole o código editado dos seus botões Comprar no campo Adicionar seu código aqui e clique em Atualizar.
9. Redimensione o widget de código HTML para ajustar seu conteúdo. Se você estiver criando uma incorporação com um carrinho, verifique se a aba do carrinho aparece no lugar certo.
10. Ao terminar, clique em Salvar.

Observação

Precisa de ajuda para usar o Editor Wix? Entre em contato com o Atendimento ao cliente da Wix.

Adicionar tags de script separadamente

Algumas plataformas (como Unbounce) exigem que você cole as tags <script> do código de incorporação no cabeçalho da página e o restante do código de incorporação na página em que você deseja que o Botão Comprar apareça.

Etapas:

1. A partir do código de incorporação gerado ao criar um Botão Comprar, copie o elemento <div> e o elemento <script>. Por exemplo:

<script type="text/javascript">
/*<![CDATA[*/

(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }

  function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src = scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
  }

  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'haris-mahmood.myshopify.com',
      apiKey: 'a4e6808b1c4afa490c5b7459f7758347',
      appId: '15'
    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: [9017131142],
        node: document.getElementById('product-component-2dd3c8704e6'),
        moneyFormat: '%24%24%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "variantId": "all",
    "contents": {
      "variantTitle": false,
      "description": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }
      }
    }
  },
  "cart": {
    "contents": {
      "button": true
    },
    "styles": {
      "footer": {
        "background-color": "#ffffff"
      }
    }
  },
  "modalProduct": {
    "contents": {
      "variantTitle": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      }
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  }
}
      });
    });
  }
})();
/*]]>*/
</script>

1. Abra o cabeçalho da página do site onde você deseja incorporar um Botão Comprar.
2. Cole todo o elemento <script> no cabeçalho da página.
3. Salve as alterações.
4. A partir do código de incorporação original no seu admin da Shopify, copie apenas o elemento <div>. Por exemplo:

<div id='product-component-2dd3c8704e6'></div>

1. Abra a página do seu site onde você deseja incorporar um Botão Comprar.
2. Cole o snippet de código do código <div> na página.
3. Salve as alterações.