Ajuda
Fazer login

Personalizar ou remover um Botão Comprar, uma coleção incorporada ou um carrinho incorporado

É possível alterar a aparência ou o comportamento de um Botão Comprar, uma coleção incorporada ou um carrinho incorporado editando o respectivo código de incorporação no HTML de origem da página da web. Para excluir uma incorporação, basta remover o código da página da web.

O Botão Comprar exibe um produto com um botão de compra. A coleção incorporada exibe vários produtos. O carrinho incorporado exibe um carrinho independente que os clientes podem usar em várias páginas.

Código de incorporação é o snippet que você copiou do admin da Shopify e colou no HTML da página da web ao criar o Botão Comprar ou o carrinho. Ele é escrito em JavaScript, a linguagem de programação usada para adicionar recursos interativos a páginas da web.

Nesta página

Entender o código de incorporação do Botão Comprar

Cada Botão Comprar é construído com partes separadas chamadas componentes. O componente é uma seção nomeada do código de incorporação que controla uma parte da experiência do Botão Comprar. Por exemplo, ao adicionar um produto com um carrinho à página da web, o código de incorporação gera os seguintes componentes:

  • um componente product, que exibe as informações do produto e o botão de compra
  • um componente cart, que exibe o conteúdo do carrinho
  • um componente toggle de carrinho, que exibe o ícone que abre o carrinho

Se o componente do produto abrir uma janela pop-up de detalhes do produto, o código de incorporação gerará dois componentes adicionais: um componente modal para o próprio pop-up e um componente modalProduct para as informações do produto dentro do pop-up.

No snippet de código a seguir, existem componentes separados para product e cart:

ShopifyBuy.UI.onReady(client).then(function (ui) {
  ui.createComponent('product', {
    id: 12345,
    options: {
      product: {
        buttonDestination: 'cart',
        contents: {
          description: true
        },
        text: {
          button: 'Add to Cart'
        },
        styles: {
          button: {
            'background-color': 'blue'
          }
        }
      },
      cart: {
        styles: {
          button: {
            'background-color': 'orange'
          }
        }
      }
    }
  });
});

Cada componente é configurado por meio de um objeto de configuração no código de incorporação. Esse objeto é um grupo estruturado de configurações, formatado como uma lista de pares chave-valor:

  • Uma chave é o nome de uma configuração, como buttonDestination.
  • Um valor é o que foi definido para a configuração, como 'cart'.

O objeto é semelhante a uma planilha: cada chave corresponde a um nome de coluna e cada valor corresponde ao conteúdo de uma célula. Para alterar a aparência ou o comportamento dos Botões Comprar, edite as chaves e os valores dentro dos objetos de configuração.

Cada componente tem várias chaves editáveis. Para ver a lista completa delas, consulte a documentação do desenvolvedor. Caso queira configurar uma chave que ainda não está no código de incorporação, adicione-a ao objeto adequado. Veja um exemplo em Alterar o layout de uma incorporação de produto.

Personalizar estilos de componentes

Cada componente tem um objeto de configuração aninhado styles que controla a aparência. Um objeto aninhado é um objeto colocado dentro de outro.

O objeto styles usa CSS, a linguagem utilizada para descrever como os elementos da página da web são estilizados visualmente. Cada chave de nível superior no objeto styles representa um elemento no componente, como o título ou o botão. Dentro dessa chave, cada chave aninhada é uma propriedade CSS (por exemplo, background-color ou border) e o valor é um valor CSS.

options: {
  product: {
    styles: {
      button: {
        'background-color': 'red',
        'border-radius': '5px'
      }
    }
  }
}

Qualquer propriedade CSS válida pode ser adicionada a styles. Certifique-se de que os nomes de propriedades com traços estejam entre aspas.

Para mais informações sobre a personalização de CSS, consulte a documentação para desenvolvedores.

Componentes de coleção incorporada

As coleções incorporadas usam os mesmos objetos de configuração dos Botões Comprar. Para editar o layout ou outras propriedades de produtos na coleção, encontre o objeto de configuração product e edite-o da mesma forma que uma incorporação de produto. Caso queira editar as propriedades da coleção em si, como o texto do botão Próxima página, edite o objeto de configuração productSet.

Algumas chaves, como o texto de um componente, são configuradas por meio de objetos aninhados. Por exemplo, o texto do botão Próxima página está dentro do objeto text do componente productSet:

options: {
  productSet: {
    text: {
      nextPageButton: 'Continue'
    }
  }
}

Uma janela modal de detalhes do produto é uma janela pop-up que exibe informações do produto. Para direcionar o cliente a uma janela modal em vez do carrinho, edite o código de incorporação do Botão Comprar no HTML de origem da página da web.

Etapas:

  1. Abra o HTML da página que contém a incorporação de produto que você quer alterar.
  2. Encontre o objeto de configuração product.
  3. Encontre a chave buttonDestination no objeto:
options: {
      product: {
        buttonDestination: 'cart'
      }
}
  1. Altere o valor dessa chave para 'modal', incluindo as aspas:
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. Salve as alterações.

Alterar o layout de uma incorporação de produto

O layout horizontal de incorporação de produto coloca a imagem ao lado dos detalhes do produto, e não acima deles. Para mudar para esse layout, edite o código de incorporação do Botão Comprar no HTML de origem da página da web.

Etapas:

  1. Abra o HTML da página que contém a incorporação de produto que você quer alterar.
  2. Encontre o objeto de configuração product.
  3. Adicione uma chave layout e defina o valor como 'horizontal'. Certifique-se de que o valor inclua as aspas e que a linha anterior termine com uma vírgula:
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}
  1. Salve as alterações.

Alterar a aparência e o comportamento de uma incorporação de carrinho

Para alterar a aparência ou o comportamento de um carrinho, edite o objeto de configuração cart no código de incorporação.

Etapas:

  1. Abra o HTML da página que contém o carrinho que você quer editar.
  2. Encontre o objeto de configuração cart no código de incorporação:
options: {
      cart: {
        startOpen: false
      }
}
  1. Edite uma chave atual ou adicione uma nova para alterar a aparência ou o comportamento do carrinho. Para ver a lista completa de chaves configuráveis, consulte a documentação do desenvolvedor.
  2. Salve as alterações.

Excluir um Botão Comprar, uma coleção incorporada ou um carrinho incorporado

Para remover um Botão Comprar, uma coleção incorporada ou um carrinho incorporado da página da web, exclua o respectivo código de incorporação do HTML de origem.

Etapas:

  1. Abra o HTML de origem da página da web que contém o Botão Comprar, a coleção incorporada ou o carrinho incorporado.
  2. Exclua todo o código de incorporação do HTML de origem, começando com <script data-shopify-buy-ui> e terminando com </script>. Veja a seguir um exemplo do código de incorporação do Botão Comprar:
<script data-shopify-buy-ui>
   var scriptURL = "https://cndurl.com/buy-button-storefront.js";
    if (window.ShopifyBuy && window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      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({
        apiKey: 'your-api-key',
        domain: 'your-store.myshopify.com',
        appId: '6'
      });

      ShopifyBuy.UI.onReady(client).then(function (ui) {
        ui.createComponent('product', {
          id: 12345,
          options: {
            product: {
              buttonDestination: 'cart',
              contents: {
                description: true
              },
              text: {
                button: 'Add to Cart'
              },
              styles: {
                button: {
                  'background-color': 'blue'
                }
              }
            },
            cart: {
              styles: {
                button: {
                  'background-color': 'orange'
                }
              }
            }
          }
        });
      });
    }
</script>
  1. Salve as alterações.