Edição ou exclusão de um Botão Comprar ou carrinho incorporado

Esta página foi impressa em Apr 25, 2024. Para a versão mais recente, acesse https://help.shopify.com/pt-BR/manual/online-sales-channels/buy-button/legacy-edit-delete.

Botões Comprar e carrinhos são gerados a partir do código de incorporação que você adiciona ao HTML de origem da página. Se você quiser alterar a aparência ou o comportamento de um botão ou carrinho em uma página, precisará alterar o código de incorporação associado.

Nesta página

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

Para excluir um Botão Comprar, uma coleção ou um carrinho incorporado existente:

  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 código-fonte HTML. O código de incorporação será parecido com o do Botão Comprar a seguir:

 

<div data-embed_type="product" data-shop="yourstorename.myshopify.com" data-product_name="Product Name" data-product_handle="product-name" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="7db461" data-button_text_color="ffffff" data-product_modal="false" data-product_title_color="000000" data-next_page_button_text="Next page"></div>

<script type="text/javascript">
document.getElementById(&#39;ShopifyEmbedScript&#39;) || document.write(&#39;<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript">&lt;\/script&gt;&#39;);
</script><noscript><a href="https://yourstorename.myshopify.com/cart/1590898625:1" target="_blank">Comprar seu produto</a></noscript>
  1. Salve as alterações.

Editar um Botão Comprar

Para alterar a aparência ou as configurações de um Botão Comprar existente, você precisa editar o conteúdo de sua tag div principal no código de incorporação que aparece no HTML de origem:

 

<div data-embed_type="product" data-shop="yourstorename.myshopify.com" data-product_name="Product Name" data-product_handle="product-name" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="7db461" data-button_text_color="ffffff" data-product_modal="false" data-product_title_color="000000" data-next_page_button_text="Next page"></div>

Cada recurso do Botão Comprar incorporado é controlado por um atributo separado na tag div principal. Você pode adicionar, remover ou atualizar esses atributos diretamente no código HTML.

Por exemplo, se você quiser que um Botão Comprar já existente direcione o usuário para a página do produto em vez da página de checkout:

  1. Abra o HTML da página que contém o Botão Comprar que você deseja alterar.

  2. Encontre o atributo data-redirect_to na tag div principal do código de incorporação do Botão Comprar: 

    data-redirect_to="checkout"

  3. Altere o valor do atributo para o produto: 

    data-redirect_to="product"

  4. Salve as alterações.

A tag div principal do Botão Comprar tem muitos atributos que você pode editar:

Atributos de tag editáveis no botão comprar
Atributo Valor Padrão
data-shop O domínio myshopify (como storename.myshopify.com) conectado ao botão. Seu domínio da Shopify
data-product_handle O identificador do produto em destaque, que é baseado no título do produto. Cada um dos seus produtos tem um identificador exclusivo na Shopify. Identificador do produto em destaque
data-embed_type Distingue entre o código de incorporação de Botões Comprar, coleções incorporadas e carrinhos incorporados. Os valores possíveis são produto, carrinho e coleção. produto
data-display_size A largura máxima de toda a incorporação (não do botão). Pode ser compacto (230px) ou regular (450px). Aplica-se apenas a um único Botão Comprar produto. compacto
data-has_image Indica se é um produto completo incorporado (true) ou apenas um Botão Comprar (false). true
data-redirect_to Destino do Botão Comprar. Pode ser um checkout, produto ou carrinho. Se você quiser que o Botão Comprar se conecte a um carrinho incorporado na mesma página, o atributo data-redirect_to precisa ser cart. checkout
data-product_modal Aciona o modal do produto a ser exibido quando um produto é clicado. Se o valor de data-redirect_to for modal, esse atributo precisará ser true, caso contrário, precisará ser false. false
data-buy_button_text O texto exibido no botão Comprar. Compre já
data-button_background_color O código hexadecimal da cor do Botão Comprar, sem o #. Pode ter três ou seis caracteres hexadecimais. 7db461
data-button_text_color O código hexadecimal da cor do texto do Botão Comprar, sem #. Pode ter três ou seis caracteres hexadecimais. ffffff
data-background_color A cor de fundo da área ao redor do Botão Comprar. Pode ser um código hexadecimal (de acordo com as regras acima) ou transparente. Se for transparente, não será aplicado preenchimento ao conteúdo da incorporação. transparent
data-show_product_price Exibe ou não o preço do produto. Pode ser true ou false. O valor atual de data-has_image
data-show_product_title Substituir para exibir ou não o título do produto. Pode ser true ou false. O valor atual de data-has_image
data-buy_button_out_of_stock_text O texto que aparece quando um produto está fora de estoque. fora de estoque
data-buy_button_product_unavailable_text O texto que aparece quando um produto está indisponível. Indisponível
data-product_title_color O código hexadecimal da cor do texto do título do produto, sem #. Pode ter três ou seis caracteres hexadecimais. 000000

Editar o carrinho do seu site

Se você quiser alterar a aparência ou o comportamento do carrinho do seu site, adicione um snippet de código HTML e edite seus atributos. Cada atributo controla uma parte diferente da aparência do carrinho ou de como ele funciona.

Para editar o carrinho do seu site:

  1. Abra o HTML da página que contém o carrinho que você deseja editar.

  2. Cole o seguinte código:

<div data-sticky="true" data-embed_type="cart" data-shop="your-shop-name.myshopify.com"></div>
<script type="text/javascript">document.getElementById('ShopifyEmbedScript') || document.write('<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript"><\/script>');</script>

  1. Substitua your-shop-name.myshopify.com como endereço myshopify.com da sua loja.

  2. Adicione os atributos relevantes à tag div principal do carrinho e altere-a para incluir o valor desejado. Por exemplo, se você quiser alterar o texto exibido na parte superior do carrinho, adicione data-cart_title="your text" à tag principal div no snippet de código. O resultado seria assim:

<div data-sticky="true" data-embed_type="cart" data-shop="your-shop-name.myshopify.com" data-cart_title="your text">
  1. Quando terminar, salve suas alterações.

Atributos do carrinho

Existem muitos atributos que você pode usar para personalizar o carrinho do seu site:

Atributos de personalização do carrinho
Atributo Valor Padrão
data-shop O domínio relevante myshopify (como nomedaloja.myshopify.com). Seu domínio da Shopify
data-embed_type Distingue entre o código de incorporação de Botões Comprar, coleções incorporadas e carrinhos incorporados. Os valores possíveis são produto, carrinho e coleção. Carrinho
data-checkout_button_text O texto exibido no botão que leva à página de checkout de dentro do carrinho (não do botão de carrinho). Checkout
data-button_text_color O código hexadecimal da cor do texto do botão do carrinho, sem o #. Pode ter três ou seis caracteres hexadecimais. ffffff
data-button_background_color O código hexadecimal da cor do botão do carrinho, sem #. Pode ter três ou seis caracteres hexadecimais. 7db461
data-background_color A cor de fundo da área ao redor do carrinho incorporado. Pode ser um código hexadecimal (de acordo com as regras acima) ou transparente. Se for transparente, não será aplicado preenchimento ao conteúdo da incorporação. transparent
data-text_color O código hexadecimal da cor do texto do botão do carrinho, sem o #. Pode ter três ou seis caracteres hexadecimais. 000000
data-accent_color O código hexadecimal da cor da borda que aparece ao redor do carrinho, sem o #. Pode ter três ou seis caracteres hexadecimais. 000000
data-cart_title O texto que aparece na parte superior do carrinho incorporado quando aberto em uma página. Seu carrinho
data-cart_total_text O texto que aparece ao lado do valor total no carrinho incorporado. Total
data-discount_notice_text O aviso de desconto que aparece no carrinho incorporado. Códigos de frete e desconto são adicionados no checkout.
data-sticky Indica se o botão aparece onde é colocado na marcação ou fica na lateral da página. Os carrinhos embutidos construídos recentemente têm isso definido como verdadeiro na saída do código de incorporação. false
data-empty_cart_text O texto que aparece se o carrinho estiver vazio. Seu carrinho está vazio
data-next_page_button_text O texto que aparece no botão Próxima página dentro de uma coleção incorporada. Próxima página

Editar uma coleção incorporada

O código de incorporação de uma coleção incorporada inclui dois elementos div. O primeiro div contém o código de um carrinho incorporado e o segundo div contém o código dos Botões Comprar incorporados, que assumem a forma de um botão de janela modal para cada produto da coleção.

O segundo elemento div também contém os seguintes atributos:

Definição de atributos no código do botão comprar
Atributo Valor Padrão
data-collection_handle O identificador da coleção em destaque, que é baseado no título da coleção. Cada uma de suas coleções tem um identificador exclusivo na Shopify. O identificador da coleção em destaque
data-embed_type Distingue entre o código de incorporação de Botões Comprar, coleções incorporadas e carrinhos incorporados. Os valores possíveis são produto, carrinho e coleção. coleção

Tudo pronto para começar a vender com a Shopify?

Experimente de graça