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

Botões e carrinhos de compra são gerados a partir dos trechos de código que você copia do seu admin da Shopify e cola no HTML de origem da sua página. Esses trechos de código 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.

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

Passos:

  1. Abra o HTML de origem da página 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 incorporado 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.

Editar um botão Comprar

Para alterar a aparência ou as configurações de um botão de compra 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 do site, 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 trecho 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.

Cada componente tem muitos atributos que você pode editar. Para obter uma lista completa de opções editáveis, consulte nossa documentação para desenvolvedores. 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.

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'
      }
}

  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.

Passos:

  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'
    }
  }
}

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

Experimente de graça