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

Depois de criar um Botão Comprar no admin da Shopify, será possível adicioná-lo ao seu site ou blog.

O processo de adicionar o código de incorporação ao HTML de origem do site varia um pouco dependendo de como e onde você quer exibir os Botões Comprar e o carrinho, da sua plataforma de publicação e, às vezes, do tema usado nela.

Adicionar o código de incorporação ao WordPress

É possível adicionar o código de incorporação a posts, páginas ou modelos no seu site do WordPress.

Adicionar o código de incorporação a um post ou 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 de controle do WordPress, acesse seus posts ou páginas.
3. Crie um novo post ou uma nova página ou edite um já existente.
4. No editor de blocos, clique no botão +, pesquise HTML Personalizado e, em seguida, clique no bloco para inseri-lo.
5. Cole o código de incorporação no campo de texto do bloco de HTML personalizado.
6. Opcional: mova o bloco de HTML personalizado ou visualize como o Botão Comprar será exibido:
   • Para mover o bloco de HTML personalizado, clique nos botões de seta na barra de ferramentas do bloco ou arraste-o para um novo local.
   • Para visualizar o Botão Comprar, clique em Visualizar na barra de ferramentas do bloco.
7. Quando terminar, clique no botão Salvar rascunho, Visualizar ou Publicar do post ou da página.

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

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

Se o tema do WordPress for compatível com o editor do site, será possível adicionar um Botão Comprar incorporado a qualquer um dos 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 de controle do WordPress, acesse o Editor.
3. Navegue até o modelo que você quer editar.
4. No editor de blocos, clique no botão +, pesquise HTML Personalizado e, em seguida, clique no bloco para inseri-lo.
5. Cole o código de incorporação no campo de texto do bloco de HTML personalizado.
6. Opcional: mova o bloco de HTML personalizado ou visualize como o Botão Comprar será exibido:
   • Para mover o bloco de HTML personalizado, clique nos botões de seta na barra de ferramentas do bloco ou arraste-o para um novo local.
   • Para visualizar o 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 o código de incorporação ao blog da Shopify

Etapas:

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

É possível adicionar o código de incorporação a posts individuais no Squarespace e aos menus na página inicial. Em alguns casos, talvez seja interessante fazer as duas coisas. Por exemplo, você pode incorporar um carrinho na página inicial para receber compras de Botões Comprar incorporados em posts individuais.

Etapas:

1. No painel de controle do Squarespace, abra a página da web onde você quer adicionar o código de incorporação.
2. Encontre o elemento na página onde você quer que o Botão Comprar ou o carrinho incorporado seja exibido, mova o cursor sobre a área de Conteúdo da página e clique em EDITAR.
3. Clique no ponto de inserção onde você quer 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 painel de controle do Squarespace, cole o código de incorporação na caixa de diálogo CÓDIGO. Verifique 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 no painel de controle, é preciso visualizar a página separadamente para confirmar se o Botão Comprar ou o carrinho incorporado está funcionando.

Se o Botão Comprar não carregar depois que você concluir as etapas, talvez seja necessário desativar o carregamento Ajax. Para saber mais, consulte Ativar ou desativar o Ajax.

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

Depois de criar um Botão Comprar ou uma coleção no admin da Shopify, você poderá adicioná-lo ao seu site Wix com o Editor de sites da plataforma.

Se você quiser exibir mais de um produto no site do Wix sem editar o código de incorporação, é possível incorporar uma coleção. Você pode criar uma nova coleção no admin da Shopify com os produtos que quer 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.

2. Na sua conta do Wix, encontre o site que quer editar na seção Meus sites e clique em Editar site.
3. No editor de sites do Wix, clique no botão + e, depois, em Mais.
4. Clique em Código HTML para adicionar um widget de código HTML à página.
5. Clique em Inserir código.
6. Na caixa de diálogo Configurações de HTML, cole o código de incorporação do Botão Comprar ou da coleção no campo Adicione seu código aqui e clique em Atualizar.
7. Redimensione o widget de código HTML para que ele se ajuste ao conteúdo. Se você estiver criando uma incorporação com um carrinho, verifique se a aba do carrinho é exibida no lugar certo.
8. Quando 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 criador de sites do Wix. Repita as duas primeiras etapas até criar os Botões Comprar de que precisa.
3. Edite os códigos de incorporação para garantir que eles sejam exibidos com o alinhamento correto.
4. Na sua conta do Wix, encontre o site que quer editar na seção Meus sites e clique em Editar site.
5. No editor de sites do 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 de HTML, cole o código editado dos Botões Comprar no campo Adicione seu código aqui e clique em Atualizar.
9. Redimensione o widget de código HTML para que ele se ajuste ao conteúdo. Se você estiver criando uma incorporação com um carrinho, verifique se a aba do carrinho é exibida no lugar certo.
10. Quando terminar, clique em Salvar.

Adicionar tags de script separadamente

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

Etapas:

1. No código de incorporação gerado na criação de 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>

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

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

6. Abra a página do site em que você quer incorporar um Botão Comprar.
7. Cole o snippet de código <div> na página.
8. Salve as alterações.