Colocar uma imagem como pop up

Existe alguma maneira de colocar uma imagem pronta como popup? ou trocar o popup da newsletter por uma imagem? Gostaria de ter uma popup pra avisar sobre cupons por exemplo.

1 curtida

O que acha da ideia de colocar uma imagem/texto informando um cupom de desconto no carrinho?

1 curtida

Quando a pessoa acessar o carrinho?

Sim, para pessoa finalizar a compra ela tem que ir até o carrinho. Da para colocar algo que sinalize ou mostre o cupom. Acredito eu que, popup as pessoas fecham rapidamente e não dão muita atenção.
Mas se não achar a ideia legal posso fazer o POPUP pra você.

1 curtida

Sim a ideia é boa, mas a intenção do popup é já dar aquela animada na pessoa pra comprar rsrs, e também serviria pra outras coisa.


Até coloquei um banner, mas não ficou legal.

Na verdade achei boa as duas coisas, o popup só no home e essa sinalização no carrinho.

1 curtida

Vi aqui e o POPUP da bastante trabalho pra fazer do 0, e infelizmente não estou com tempo. O que acha de adicionar um botão bem visível que mostre o seu banner do cupom? Podemos colocar este mesmo botão em outras áreas do site, coloquei esse para você ter noção de como ficaria.


Passos para instalação:

  1. Adicionar HTML
  2. Rodapé
  3. Página Inicial
  4. HTML
<script>
  $('.coluna.span3.esquerda').after(

'<div class="discount-item span1">'+ 
  '<li class="discount-ticket"><i class="fa fa-ticket"></i> Cupom de Desconto</li>'+
   '<div class="discount-content">'+
    '<img src="https://global.discourse-cdn.com/business7/uploads/lojaintegrada/original/3X/2/4/24a00a77af23104afa739f2502a5b6e0e5723c9a.jpeg"</img>'+              
   '</div>'+
'</div>'
);

$('.discount-item').hover( 
function () {
  $('.discount-content').fadeIn(400).show();
},

function(){
  $('.discount-content').fadeOut(400).hide();
});
</script>


<style>
    .discount-content {
        position: absolute;
        background: rgb(255, 255, 255);
        z-index: 999;
        padding: 10px;
        text-align: center;
        border-radius: 0px;
        border: 1px solid rgba(228, 228, 228, 0.59);
        display: none;
        box-shadow: 0 7px 15px rgba(0, 0, 0, 0.07);
        margin-top: 7px;
    }
    .discount-item {
        cursor: pointer;
        background: rgba(255, 255, 255, 0);
        width: 150px;
        height: 31px;
        width: auto !important;
    }
</style>
1 curtida

Ficou bacana, mas o texto onde tem que passar o mouse pra aparecer o banner ficou um pouco pequeno.

Oi @AlexandreSoares , tudo bem?

Pelo o que entendi, você deseja personalizar o Pop-up com imagem e texto, certo? Neste caso, é necessário realizar uma personalização em sua loja, nosso parceiro pode te ajudar, dê uma olhada: Ferramenta Pop-Up Inicial com Imagem | Temas para E-commerce | Loja Integrada

1 curtida

Coloca dentro da tag style, antes do fechamento dela “/style”. É só alterar o tamanho da fonte para o que quiser, alterando o “18px”. Caso quiser, pode alterar a cor também, se não necessitar, é só excluir a linha color.

li.discount-ticket {
    font-size: 18px;
    color: #eeb706;
}

Agora se quiser o banner no popup da Newsletter, achei um tópico na comunidade a respeito disso.

Obrigado, vou fazer uns testes.

Bacana essa ideia de um cupom de desconto para não perder a venda, se colocar esse código na pagina do carinho, iria funcionar também ?
Obrigado

1 curtida

Bom, se é de ajuda, tem como colocar o banner no carrinho. Segue o tópico abordado para melhor entendimento. O amigo ai do tópico, fez um banner em .GIF, ficou show demais (quem sabe possa reaproveitar a ideia).

1 curtida