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

Aviso

Este é um tutorial avançado e não é atendido pela Shopify. Seu uso requer conhecimento de linguagens de web design, como HTML, CSS, JavaScript e Liquid, portanto, contrate um Parceiro da Shopify se você precisar de ajuda.

Botões e carrinhos de compra são gerados a partir dos snippets que você copia do seu admin da Shopify e cola no HTML de origem da sua página da web. Esses snippets são referidos como código de incorporação. Se você quiser alterar a aparência ou o comportamento de um botão ou carrinho, precisará editar o código de incorporação associado.

Observação

Estas instruções aplicam-se ao código de incorporação do Botão Comprar gerado depois de 26 de setembro de 2016. Se você quiser alterar o código de incorporação gerado antes dessa data, será necessário seguir as instruções herdadas. Também é possível recriar seu código de incorporação com o canal de vendas Botão Comprar.

Se você não tem certeza de qual versão do código de incorporação você tem, verifique se ele começa com <script data-shopify-buy-ui>. Se sim, você tem a versão mais atualizada. Se começar com <div data-emebd_type=... ou outro tipo de tag <div>, você tem a versão herdada.

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

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>. Para um Botão Comprar, o código de incorporação se parece com o seguinte:

<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.

O Botão Comprar, a coleção incorporada ou o carrinho incorporado não aparecerão mais na sua página da web.

Editar um Botão Comprar

Para alterar a aparência ou as configurações de um Botão Comprar existente, você precisa editar o código de incorporação que adicionou ao HTML de origem.

Cada botão Comprar é formado por diferentes componentes no código de inserção. Por exemplo, ao adicionar um produto com um carrinho na página da web, o código de inserção gera um componente product, um componente cart e um componente toggle carrinho:

Se você quiser que o componente do produto abra uma janela modal com informações do produto, o código de inserção vai gerar um componente modal e um componente modalProduct:

No snippet de código a seguir, há componentes separados para o product e o 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'
          }
        }
      }
    }
  });
});

Esses componentes são configurados separadamente por meio de objetos de configuração no código de incorporação. Você pode alterar a aparência ou o comportamento de seus Botões Comprar editando os objetos de configuração no código de incorporação.

Dica

Em JavaScript, um objeto é um conjunto de duplas de valores-chave no formato {key: value}. Pensar nisso como uma planilha: a chave é como um nome de coluna e o valor é como o conteúdo de uma célula.

Cada componente tem muitos atributos que você pode editar. Para obter uma lista completa de opções editáveis, consulte nossa documentação do desenvolvedor. Se você quiser configurar uma opção que ainda não aparece no seu código de incorporação, você precisará adicionar a chave adequada ao objeto adequado (veja o exemplo).

Editar o estilo de um componente

Cada componente tem um objeto de configuração de styles aninhados, que você pode editar ou adicionar para alterar a aparência do componente. Esses estilos são formatados de maneira semelhante ao CSS. Cada chave de nível superior no objeto styles representa um elemento no componente, como o título ou o botão. Dentro desse objeto, cada chave é 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. Observe que os nomes de propriedade com traços precisam estar entre aspas.

Para mais informações sobre personalização do CSS, consulte a documentação do desenvolvedor.

Exemplo: substituir link do carrinho por modal de informações do produto

Neste exemplo, você pode alterar seu código de incorporação atual para direcionar seu cliente a um modal de informações do produto em vez do carrinho:

1. Abra o HTML da página que contém o produto incorporado que você deseja alterar.
2. Encontre o objeto de configuração do product.
3. Encontre a chave buttonDestination no objeto:

options: {
      product: {
        buttonDestination: 'cart'
      }
}

1. Altere o valor dessa chave para 'modal' (não se esqueça de incluir as aspas):

options: {
      product: {
        buttonDestination: 'modal'
      }
}

1. Salve as alterações.

Exemplo: alterar o layout do seu produto incorporado

Neste exemplo, você pode alterar o layout do produto incorporado para que a imagem apareça na lateral em vez de na parte superior:

1. Abra o HTML da página que contém o produto incorporado que você deseja alterar.
2. Encontre o objeto de configuração do product.
3. Adicione uma chave de layout e defina o valor como 'horizontal':

options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}

<aside class="note">
<h4>Observação</h4>
<p>When you add the <code>&#39;horizontal&#39;</code> value, make sure that it includes the quotation marks, and that the previous line ends with a comma.</p>
</aside>

1. Salve as alterações.

Editar o carrinho do seu site

Se você quiser alterar a aparência ou o comportamento do carrinho do seu site, precisará editar o objeto de configuração do cart em seu código de incorporação.

Etapas:

1. Abra o HTML da página que contém o carrinho que você deseja editar.
2. Encontre o objeto de configuração do cart em seu código de incorporação:

options: {
      cart: {
        startOpen: false
      }
}

1. Edite ou adicione a propriedade que você gostaria de alterar. Para obter uma lista completa de propriedades configuráveis, consulte a documentação do desenvolvedor.
2. Salve as alterações.

Editar uma coleção incorporada

A edição de uma coleção incorporada é semelhante à edição de um produto ou carrinho. Para editar as propriedades dos produtos dentro da coleção (por exemplo, o layout de cada produto), é necessário localizar o objeto de configuração do product e editá-lo da mesma forma que você editaria um produto incorporado. Para editar as propriedades da própria coleção (por exemplo, o texto do botão Próxima página), edite a chave productSet.

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

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