Adicionando ícone PIX junto a bandeira de Boleto

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:

1. Descrição - Titulo para identificação do código inserido
2. Local Publicação - Selecionamos a opção "Rodapé"
3. Página publicação - Selecionamos a opção "Página de checkout"
4. 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.

Veja nosso vídeo explicativo também