Como adicionar o ícone da lista de compras na imagem dos produtos

Para adicionar o ícone de coração na imagem dos produtos em sua loja 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 Dawn versão 7.0.1. 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 responsável por mostrar a imagem do produto

O arquivo responsável por mostrar a imagem dos produtos no tema Dawn versão 7.0.1 é chamado “card-product.liquid”. O mesmo pode ser encontrado na pasta “Snippets”. Lembre-se que se você estiver usando um outro tema, ou mesmo uma outra versão do tema Dawn, o arquivo poderá ser diferente. Clique no nome do arquivo para abrir o código.

Passo 3 - Adicione o código

Neste passo você precisa inserir o código abaixo no local exato onde a imagem do produto aparece no código:

{% render 'firstwish-icon' with product_card_product as product %}

Este código irá incluir o ícone da lista de compra com a configuração padrão. É possível customizar os seguintes parâmetros:

• position: posição do ícone em relação à imagem. Valores aceitos: 'top-right', 'top-left', 'bottom-right', 'bottom-left'. Padrão: 'top-right'.
• extra_margin: margem em relação à imagem (somente números). Padrão: 0.
• size: tamanho do ícone em pixels (somente números). Padrão: 24.
• border_color: cor da borda. Padrão: #000000.
• color_active: cor do ícone ao passar o mouse ou quando o produto está na lista de compras. Padrão: #000000.
• color_inactive: cor do ícone quando o item não está na lista de compras. Padrão: #FFFFFF.

Abaixo você pode ver como o código fica com todas as opções inclusas:

{% render 'firstwish-icon' with product_card_product as product, position: 'top-right', extra_margin: 10, border_color: '#000000', color_active: '#000000', color_inactive: '#FFFFFF', size: 24 %}

No tema Dawn o local ideal para adicionar o código é entre as linhas 34-35.

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 uma rápida referência, o vídeo abaixo mostra todo o processo descrito neste tutorial.