How can I add a custom pop up image to my website?

Good day! Can someone help me on how can I add a pop up image on my website when someone access it without using any apps? For example image for our discount voucher, upcoming sales etc. I badly needed help on this one. Thank you!

Hi @OLDTIMEMF ,

What theme are you using? please send me the theme name, I will help you check it

1 Like

@LitExtension is this the name of the theme? sorry im not kinda familiar with this

IamLLIIME_0-1647419735835.png

@LitExtension for your reference here is my site: https://eurorich.ph/

Hi @OLDTIMEMF ,

You are using Warehouse theme.

Please go to sections > popups.liquid file and change all 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": "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 %}

Then you go to Customize > Popups and add block image, it will display fine.

1 Like

I’m going to try this one. I’ll let you know if its work @LitExtension

1 Like

Hi @OLDTIMEMF ,

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

1 Like

@LitExtension Can I also add link to it?

@LitExtension can we also removed the boarder? and also can we put the X button to the picture

@LitExtension I’m referring to this

Hi @OLDTIMEMF ,

Please change all 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": "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 %}

Hope it helps!

1 Like

@LitExtension now the boarder is gone but can I add a link to it also an x button?

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": "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

Wow. Thanks! Last question how can I add a link to that picture? @LitExtension

Hi @OLDTIMEMF ,

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

1 Like

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 Sorry, but can we also adjust the size of it on mobile view?

Hi @OLDTIMEMF ,

I saw you liked my answer. If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

1 Like

Thanks @LitExtension can you also help me on how can I adjust it on mobile view? please refer to the image above. This would be my last question. Thank you!

Hi @OLDTIMEMF ,

Do you want it to display smaller?

1 Like