Incluir imagem no pop-up do newsletter

Olá, navegando aqui pelo site vi vários posts sobre o assunto com diversos códigos para incluir imagem no pop-up do newsletter, porém não está dando certo na minha loja. O código que estou utilizando é este:

#modalNewsletter .componente {background: url(https://cdn.awsli.com.br/963/963498/arquivos/images_1.jpg); width: 580px; height: 370px;} div.fancybox-skin {padding: 0px !important;} div.fancybox-wrap.fancybox-desktop.fancybox-type-html.modal-modalNewsletter.fancybox-opened {width: 580px !important; height: 370px !important;left: 50% !important;margin-left: -290px !important;} div.fancybox-inner {width: auto !important; height: auto !important;}
#modalNewsletter .componente .interno {padding: 120px !important;}

Coloquei lá no CSS e já fiz o upload da imagem e coloquei o link no código. Alguém poderia me ajudar se estou fazendo algo errado? O URL da minha loja é: https://www.glostonemodas.com.br
Obs: loja em desenvolvimento com vários produtos duplicados.

Por favor, alguém poderia ajudar!

Olá, eu vi que vc conseguiu colocar a foto no popup Newsletter, ficou bem legal… Como vc fez?

Não sei kkkk. Como não consegui aqui pela comunidade, eu paguei pra um rapaz que trabalha com CSS, HTML, banners e etc. O nome dele é @Otavio_Bonjour WhatsApp (28) 99909-0467 e nem se preocupe com valor pois ele cobra bem baratinho e vc poderá incluir imagem na newsletter e editar algo que queira no seu site.

3 Curtidas

Oi @muydahora

Você quer algo assim?
image

É uma aplicação bem comum, pode me chamar se precisar, caso não consiga com o contato que o Romario indicou acima :wink:

Abraço!

Oi @Romario_Dos_Santos_1

Sua foto do popup está espremida, a foto com largura natural iria dar um destaque melhor, veja:
image

Abraço!

Legal Alexandre.
Pode disponibilizar o código pra comunidade?
Grato.

Realmente fica bem melhor, inclusive do jeito que está atualmente está com um bug que ainda não consegui resolver. Tem como vc me ajudar? Vc usa algum código que possa disponibilizar?

@Alexandre_Bard td bem? Agradeço muito se puder me ajudar com o código dessa Newsletter… :sweat_smile:

1 Curtida

@muydahora
Oi! desculpe pela demora

Estou te enviando uma mensagem em privado, para vermos melhor isso

Abraço!

Oba, manda pra gente também :star_struck:

Olá, alguem poderia me ajudar com uma duvida;
Modifiquei o codigo da pop up newsletter, e ficou muito bom quando abre a loja pelo PC.
Porém ficou grande para a tela dos celulares e a pessoa que entrar na loja pelo mobile tem q arrastar pro lado pra fechar a pop up. Será que alguem pode criar, ajustar, ou me dar uma ajuda de como faço para que fique bacana tanto no pc quanto no mobile?

Vou colar o codigo para analise. ( estou tentando trabalhar isso, mas tem anos q nao mexo em css e tô me batendo um pouco) Desde ja , grata

#modalNewsletter .componente {
background: url(“https://cdn.awsli.com.br/413/413797/arquivos/bannerinicio-250fretegratis.jpg”);
width: 585px;
height: 444px;
}
#modalNewsletter .componente .interno {
padding: 18px;
padding-top: 240px;
padding-right: 81px;
background-color: transparent;
}

#modalNewsletter .newsletter input[type=“text”] {
width: 92%;
margin: 0;
}

#modalNewsletter .newsletter .botao {
font-size: 21px;
padding: 7px 10px;
margin-right: 0px;
}
div.fancybox-skin {
padding: 10px !important;
}
div.fancybox-wrap.fancybox-desktop.fancybox-type-html.modal-modalNewsletter.fancybox-opened {
width: 620px !important;
height: 464px !important;
left: 50% !important;
margin-left: -290px !important;
}
div.fancybox-inner {
width: auto !important;
height: auto !important;
}
#modalNewsletter .componente .titulo {
font-size: 25px;
margin-bottom: 15px;
color: Transparent;
}
#modalNewsletter .componente .texto-newsletter {
font-size: 15px;
color: transparent;
}
#modalNewsletter .icon-envelope-alt:before {
content: “\f003”;
color: transparent;
}
#modalNewsletter .icon-chevron-right:before {
content: “\f054”;
color: white;
}
#modalNewsletter .newsletter .botao {
font-size: 21px;
padding: 7px 10px;
}
#modalNewsletter .newsletter .input-conteiner input {
height: 15px;
font-weight: 400;
font-style:opensans;
}
#modalNewsletter .newsletter .input-conteiner {
margin-top: 20px;
margin-left: 68px;
}
#modalNewsletter .componente .interno:hover {
background-color: transparent;
}

#modalNewsletter .newsletter .newsletter-confirmacao span {
font-size: 20px;
line-height: 89px;
}
.newsletter .newsletter-confirmacao .icon-ok {
float: left;
color: green;
margin-top: 31px;
}
.newsletter .newsletter-confirmacao span {
display: block;
margin-left: 41px;
padding: 5px 0;
}
.alert-danger, .alert-error {
background-color: #d2d2d2;
color: #b94a48;
margin-top: 22px;
}