Como adicionar o botão adicionar à lista de compras na página do produto em lojas 1.0

Para adicionar o botão adicionar à lista de compras em sua loja 1.0 no Shopify é preciso fazer uma pequena alteração do código do seu tema. O processo é simples caso você já tenho feito alterações no código to seu tema antes. De qualquer forma, sinta-se à vontade para entrar em contato conosco caso precise de ajuda.

Este tutorial mostra como adicionar o ícone no tema Debut, que é o tema padrão para lojas 1.0. O local exato onde o código precisa ser inserido poderá ser diferente se você estiver usando um outro tema.

Passo 1 - Navegue até o editor de código

Antes de fazer qualquer alteração é recomendado que se faça uma cópia do seu tema ou que se escolha tema diferente. Dessa maneira o risco de sua loja ser afetada caso algo dê errado será mínimo. Para fazer isso acesse seu painel de admin de sua loja selecione “Online Store” -> “Themes” e clique em “...” ao lado de “Customize” e selecione “Duplicate”. Assim que fizer isso clique em “Customize”.

No editor de tema clique em “...” e selecione “Edit Code”

Passo 2 - Selecione o template da página do produto

O arquivo responsável por mostrar a página do produto no tema Debut é chamado “product-template.liquid”. O mesmo pode ser encontrado na pasta “Sections”. Lembre-se que se você estiver usando um outro tema, ou mesmo uma versão modificada do tema Debut, o arquivo poderá ser diferente. Clique no nome do arquivo para abrir o código.

Passo 3 - Adicione o código

Adicione o código abaixo no local exato onde deseja que o botão apareça:

{% render 'firstwish-add-button', product %}

No tema Debut o local ideal para adicionar o código é entre as linhas 192-193. Isto irá incluir o botão logo abaixo do botão “Adicionar ao Carrinho”. Sinta-se à vontade em inserir o código acima em qualquer outro local que desejar na mesma página.

Não esqueça de clicar no botão “Save” no canto superior direito da tela.

Está pronto. Você pode agora verificar sua loja e o ícone deverá ser exibido.

Para traduzir o botão, volte ao editor de código e abra o arquivo “firstwish-add-button.liquid” que se encontra na pasta “Snippets”.

O vídeo abaixo mostra todo o processo descrito neste tutorial.