DICA: Aprenda a personalizar o Botão "Comprar"

ftp
layout

#1

Pessoal, depois de MUITO pesquisar e testar na minha própria loja, descobri uma maneira de mudar o botão “Comprar”.
Esta dica substitui o botão padrão simples para uma imagem à sua escolha que muda quando colocado o mouse em cima. Parece ser uma coisa insignificante, mas eu realmente considero essa mudança importante para o visual e identidade da sua loja. Vamos lá? :slight_smile:

IMPORTANTE: você precisará ter acesso FTP para realizar essa mudança.

Acesse o arquivo Product.tpl
Ele fica na pasta “Templates”

Pesquise pelo termo “addtocart” (sem as aspas). Será esta linha que você irá alterar.

Substitua a linha que contém este código pela linha abaixo (incluir <> no início e fim)

input type=“image” src=“URL_DA_SUA_IMAGEM1.png” onMouseOver=“this.src=‘URL_DA_SUA_IMAGEM2.png’” onMouseOut=“URL_DA_SUA_IMAGEM1.png’” class="addToCart {% if state == ‘nostock’ %}disabled{% endif %}

Onde:
URL_DA_SUA_IMAGEM1.png = significa a imagem número 1 do seu botão comprar
URL_DA_SUA_IMAGEM2.png = significa a imagem número 2 do seu botão, ou seja, a imagem que irá mudar quando o cliente passar o mouse em cima, geralmente muda apenas a cor.

Espero que tenham gostado.
Qualquer dúvida, postem aí :slight_smile:


#2

Poxa, @bazar901, que bacana sua dica!

Obrigado por compartilhar!