Adicionar código de incorporação

Depois de criar um botão Comprar no seu administrador da Shopify, você poderá adicioná-lo ao seu próprio site ou blog.

O processo de adicionar códigos de incorporação ao HTML de origem de seu website é 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 Se você precisar de ajuda para adicionar código incorporado a plataformas de publicação fora da Shopify (como blogs do Squarespace ou WordPress.org ), entre em contato com o provedor do seu site ou plataforma de publicação diretamente para receber atendimento.

Adicionar código de incorporação a um blog WordPress .org

Você pode adicionar códigos de incorporação a postagens individuais e ao menu na página inicial do seu blog WordPress.org .

Observação Os botões Comprar incorporados são compatíveis com a plataforma WordPress.org , mas não com o WordPress.com. Esta documentação descreve o WordPress 4.2.2. Sua versão pode ser diferente. Você pode aprender mais sobre as versões do WordPress no site de atendimento do WordPress.

Adicione o código de incorporação a uma postagem do WordPress

Para adicionar um código de incorporação a uma postagem individual:

  1. Na Shopify, crie um botão Comprar e copie seu 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. Do seu painel do WordPress , clique em Postagens.
  3. Clique em Adicionar novo para criar uma nova postagem ou clique no nome de uma postagem existente que você deseja exibir um botão Comprar.
  4. Na página Adicionar novo post ou Editar post , altere o editor de texto do modo Visual para o modo Texto.
  5. Cole o código de incorporação no campo de texto principal do editor no local em que você deseja que o botão Comprar ou a coleção apareça.
  6. Quando terminar, clique em Salvar rascunho , Visualizar ou Publicar.

Adicionar código incorporado a um menu do WordPress

Para adicionar código incorporado a um menu na página inicial:

  1. No seu painel do WordPress , clique em Aparência.
  2. Clique em Personalizar para abrir o editor de temas e, em seguida, clique em Widgets.
  3. Clique no nome da área onde você deseja adicionar o botão Comprar ou o código do carrinho personalizado.
  4. Abra um widget de Texto existente ou clique em Adicionar um widget e, em seguida, clique em Texto.
  5. Cole o código de incorporação no campo de texto principal no widget Texto.
  6. Salve as alterações.

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

Você pode adicionar códigos de incorporação a postagens individuais no seu blog da Shopify:

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

Adicionar código de incorporação ao Squarespace

Você pode adicionar código de incorporação a postagens individuais no Squarespace e nos menus da sua página inicial. Em alguns casos, você pode querer fazer as duas coisas. Por exemplo, você pode incorporar um carrinho em sua página inicial para receber compras de botões de compra que você incorpora em postagens individuais.

Para adicionar código incorporado aos elementos da página no Squarespace:

  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ê deseja 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. Do seu administrador 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 desativa o JavaScript em seu painel, você precisa visualizar sua página separadamente para ver o botão Comprar ou o carrinho incorporado que você adicionou.

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

Depois de criar um botão de compra ou coleção no seu administrador da Shopify, você pode adicioná-lo ao seu site Wix usando o Editor de site Wix.

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 administrador da Shopify para os produtos que você deseja exibir no Wix.

Para incorporar um único botão de compra para um produto ou coleção em seu site Wix:

  1. A partir do seu administrador do Shopify, crie um botão Comprar para um produto ou coleção e copie seu código de incorporação.
  2. Na sua conta Wix, encontre o site que você deseja editar na seção Meus sites e clique em Editar site.
  3. No Editor de sites da Wix, clique no botão + e, em seguida, clique 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 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.
  7. 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.
  8. Ao terminar, clique em Salvar.

Incorporar vários produtos ou coleções

Para incorporar vários produtos ou coleções em seu site Wix:

  1. A partir do seu administrador do Shopify, crie um botão Comprar para um produto ou coleção e copie seu 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 de compra necessários.
  3. Edite os códigos incorporados 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, em seguida, clique 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.

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.

Para adicionar tags de script separadamente:

  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 administrador 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 trecho do código <div> na página.

  3. Salve as alterações.

Pronto(a) para começar a vender com a Shopify?

Experimente de graça