Demonstraremos junto a plataforma Loja integrada, a como inserir o ícone de PIX ao lado do ícone da bandeira do boleto, isso quando estivermos na tela de checkout de pagamento da sua loja.
Para isso vamos precisar acessar o nosso painel da Loja integrada e ir nas configurações ( ícone de engrenagem )
Agora vamos localizar a opção " incluir código html "
Feito isso, caso já tenha algum código personalizado vamos clicar no botão " Adicionar Código " , caso contrário vamos em " Avançado " e depois " Adicionar Código "
Na tela que abrir vamos fazer algumas configurações, sendo elas:
- Descrição - Titulo para identificação do código inserido
- Local Publicação - Selecionamos a opção "Rodapé"
- Página publicação - Selecionamos a opção "Página de checkout"
- Tipo - Selecionamos a opção "Javascript"
No campo "Conteúdo" vamos inserir o nosso código, que será responsável por adicionar o nosso ícone PIX. Para isso vamos copiar o seguinte código:
$(function(){
$("#pagamento6 img[src*='https://cdn.awsli.com.br/production/static/loja/estrutura/v1/img/bandeiras/boleto.png']").parent().append('<img src="https://meiosdepagamento.s3.sa-east-1.amazonaws.com/pix.png" style="margin: 0 0 0 20px;" alt="Pague com Boleto ou Pix">')
});
Ficando assim
Depois de inserido o código, vamos clicar em " Salvar código HTML "
Pronto agora limpe o cache do seu navegador e confira se o ícone do PIX estará junto com o ícone do boleto.
Para adicionar o ícone também na pagina do produto, repita os passos anteriores, alterando o campo "Local Publicação" para "Página do Produto"
No campo "Conteúdo" vamos inserir o seguinte código:
$(function(){
$("img[src*='https://cdn.awsli.com.br/production/static/img/formas-de-pagamento/boleto-logo.png']").parent().append('<img src="https://meiosdepagamento.s3.sa-east-1.amazonaws.com/pix.png" style="margin: 0 0 0 20px;" alt="Pague com Boleto ou Pix">')
});
E por fim clique novamente em " Salvar código HTML "
Agora limpe o cache do seu navegador e confira se o ícone do PIX estará junto com o ícone do boleto.
OBS: Caso sua loja utilize um tema personalizado ou possua um layout diferente do padrão da Loja Integrada e o passo a passo não surtiu efeito, é necessário que verifique com a empresa responsável por seu tema ou técnico responsável pela modificação da sua loja.
Comentários
0 comentário
Artigo fechado para comentários.