Shopify features and tools
Create A Customizable Pop-up - Works with Dawn Theme

Crie um pop-up personalizável - Funciona com o tema Dawn

Log in or Sign up to ensure access to FREE code across multiple devices.

Compatibilidade: Compatível com a maioria dos temas do Shopify, do Debut ao Dawn 2.0.

Como criar uma seção modal de descontos que pode ser personalizada.

Este pop-up funciona com o tema Debut e também com o tema Dawn.

Para iniciar:

1. Configure o EmailJS primeiro, consulte o link para obter mais instruções sobre como configurar seu EmailJS
2. Vá para a loja do seu administrador no Shopify
3. Clique em “Temas”, “ações”, “editar código”
4. Encontre a pasta da seção
5. Crie uma seção e nomeie-a como “modal de desconto”
6. Copie e cole o código abaixo e clique em SALVAR



7. Vá para a pasta Layout e clique em theme.liquid
8. cole o código abaixo antes de </body> e clique em SALVAR

Caso queira que o modal de desconto apareça apenas na página inicial. Cole o código abaixo

Tudo o que resta fazer é “Personalizar tema”. Deixe-me saber se você tem perguntas (",)

Atualização 23/10/21: Corrigi o CSS para que funcione com o tema Dawn. Também adicionei uma opção para ocultar o campo de e-mail. Além disso, foi adicionada uma opção na etapa 8 para que o pop-up seja exibido apenas na página inicial

Copied!

Lutando com instruções?

Não se preocupe, nós oferecemos cobertura por um preço razoável. Entre em contato conosco através de "Converse conosco" para obter um orçamento.

Relaxe enquanto nós cuidamos disso para você!

Voltar para o blogue

5 comentários

Unfortunately, this code is old. We do have other pop up modal that will not appear once the customer opt out. You can see the code here https://made4uo.com/blogs/shopify-tutorial/pop-up-modal-with-timer

Made4Uo

How can I just display the popup one per session (not on everypage)

Edward Carroll

Hello, I just followed your directions to a T for creating the pop up only on the homepage. Where do I go to then edit the pop up? Or where will I see it happen? I clicked the preview store button, and I didn’t see anything pop up. I also don’t see any way to edit it in the Customize Theme space. Is it CSS and HTML coding only?

Kaydee Miller

@deepak you can place this code {% section ‘discount-modal’ %} in the index.liquid inside section folder instead placing it in the theme.liquid

Made4uo

how to show only front page

deepak

Deixe um comentário