On mobile view? yes and also if only it could appear in the center when using mobile. On desktop view it works pretty well
Hi @OLDTIMEMF ,
Please change code:
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'newsletter' -%}
{%- unless block.settings.show_only_on_index and template != 'index' -%}
{%- unless block.settings.show_only_for_visitors and customer -%}
{% capture popup_settings %}
{
"apparitionDelay": {{ block.settings.apparition_delay | json }},
"showOnlyOnce": {{ block.settings.show_only_once | json }}
}
{% endcapture %}
{%- if block.settings.title != blank -%}
### {{ block.settings.title | escape }}
{%- endif -%}
{%- if block.settings.content != blank -%}
{{ block.settings.content }}
{%- endif -%}
{%- if block.settings.show_newsletter -%}
{%- form 'customer', id: 'newsletter-popup', class: 'form popup-newsletter__form' -%}
{%- if form.posted_successfully? -%}
{{ 'general.popup.success' | t }}
{%- else -%}
{%- endif -%}
{%- endform -%}
{%- endif -%}
{%- endunless -%}
{%- endunless -%}
{%- when 'exit' -%}
{%- unless block.settings.show_only_for_visitors and customer -%}
{% capture popup_settings %}
{
"showOnlyOnce": {{ block.settings.show_only_once | json }}
}
{% endcapture %}
{%- if block.settings.title != blank -%}
### {{ block.settings.title | escape }}
{%- endif -%}
{%- if block.settings.subheading != blank -%}
{{ block.settings.subheading | escape }}
{%- endif -%}
{%- assign is_form_valid = false -%}
{%- if block.settings.show_newsletter -%}
{%- form 'customer', id: 'exit-popup', class: 'form exit-popup__form' -%}
{%- if form.posted_successfully? -%}
{%- assign is_form_valid = true -%}
{{ block.settings.success_message }}
{%- else -%}
{%- endif -%}
{%- endform -%}
{%- endif -%}
{%- if block.settings.close_message != blank and is_form_valid == false -%}
{%- endif -%}
{%- endunless -%}
{%- when 'image' -%}
{%- unless block.settings.show_only_for_visitors and customer -%}
{% capture popup_settings %}
{
"apparitionDelay": {{ block.settings.apparition_delay | json }},
"showOnlyOnce": {{ block.settings.show_only_once | json }}
}
{% endcapture %}
{%- if block.settings.image -%}
{%- capture supported_sizes -%}{%- render 'image-size', sizes: '300,400,500,600,700,800,900,1000,1100,1200', image: block.settings.image -%}{%- endcapture -%}
{%- assign image_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- else -%}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
{%- endunless -%}
{%- endcase -%}
{%- endfor -%}
{% schema %}
{
"name": "Popups",
"max_blocks": 3,
"blocks": [
{
"name": "Newsletter popup",
"type": "newsletter",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "show_only_on_index",
"label": "Show only on home page",
"default": true
},
{
"type": "checkbox",
"id": "show_only_for_visitors",
"label": "Disable for account holders",
"default": true
},
{
"type": "checkbox",
"id": "show_only_once",
"label": "Show once to visitors",
"default": true
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Popup"
},
{
"type": "richtext",
"id": "content",
"label": "Text",
"default": "
You can use this popup to display some useful information to your customers.
"
},
{
"type": "checkbox",
"id": "show_newsletter",
"label": "Show newsletter form",
"info": "Customers who subscribe will have their email address added to the \"accepts marketing\" [customer list](/admin/customers?query=&accepts_marketing=1).",
"default": true
},
{
"type": "range",
"id": "apparition_delay",
"min": 0,
"max": 15,
"step": 1,
"unit": "sec",
"label": "Delay until the popup appears",
"default": 5
}
]
},
{
"name": "Image popup",
"type": "image",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "show_only_on_index",
"label": "Show only on home page",
"default": true
},
{
"type": "checkbox",
"id": "show_only_for_visitors",
"label": "Disable for account holders",
"default": true
},
{
"type": "checkbox",
"id": "show_only_once",
"label": "Show once to visitors",
"default": true
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "url",
"id": "link",
"label": "Link"
},
{
"type": "range",
"id": "apparition_delay",
"min": 0,
"max": 15,
"step": 1,
"unit": "sec",
"label": "Delay until the popup appears",
"default": 5
}
]
},
{
"name": "Exit popup",
"type": "exit",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "Enable an exit popup if user attempts to navigate away from current page as a means of influencing user action on store."
},
{
"type": "paragraph",
"content": "Only visible on desktop."
},
{
"type": "checkbox",
"id": "show_only_for_visitors",
"label": "Disable for account holders",
"default": true
},
{
"type": "checkbox",
"id": "show_only_once",
"label": "Show once to visitors",
"default": true
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Get 15% off"
},
{
"type": "text",
"id": "subheading",
"label": "Subheading",
"default": "on your next order + exclusive offers"
},
{
"type": "header",
"content": "Newsletter"
},
{
"type": "checkbox",
"id": "show_newsletter",
"label": "Show sign up form",
"default": true
},
{
"type": "text",
"id": "button_text",
"label": "Button text",
"default": "Get my 15% off"
},
{
"type": "text",
"id": "success_message",
"label": "Success message",
"info": "Text displayed after the customer has entered their email.",
"default": "You will receive soon an email containing your discount code!"
},
{
"type": "text",
"id": "close_message",
"label": "Close message",
"default": "No thanks, I'd rather pay more"
}
]
}
]
}
{% endschema %}
1 Like
@LitExtension Thankyou so much!
1 Like
Hi! @LitExtension hope your doing great! Sorry to open up this concern again. I would like to ask if I can add more image in the pop up? Because it only allows me to add 1 image. Hope we can do this. Thankyou!!
Hi @OLDTIMEMF ,
You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.
1 Like
@LitExtension Please refer to this one. I’am using the code that you provide.
https://community.shopify.com/c/technical-q-a/image-pop-up/m-p/1549288#M85393
I am trying to apply your code above for the Dawn Theme 5.0 and am a beginner. I created a section called popup.liquid and put the above code in it, but it doesn’t work. The data entered into the PopUp section (via Customize) ends up showing on the home page. How do I make it appear as a popup?
Thank you for your help.
Here is a screen shot:
Hi @LitExtension ,
I see that your code is really great and I also like to know How I can add popup image
My theme is prestige and you can visit my website here organics.ph
Thank you in advance to your help.
I am sorry but I stopped coding and I have completely forgotten it. Good
luck finding your answer.