Solved

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

IamLLIIME
Trailblazer
269 2 50

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!

Accepted Solutions (10)

LitExtension
Shopify Partner
4860 1002 1145

This is an accepted solution.

Hi @IamLLIIME,

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

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

LitExtension
Shopify Partner
4860 1002 1145

This is an accepted solution.

Hi @IamLLIIME,

You are using Warehouse theme.

Please go to sections > popups.liquid file and change all code:

<div data-section-id="{{ section.id }}" data-section-type="popups">
  {%- 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 %}

            <aside class="modal modal--newsletter" data-popup-type="newsletter" data-popup-settings='{{ popup_settings }}' aria-hidden="true" {{ block.shopify_attributes }}>
              <div class="modal__dialog" role="dialog">
                <div class="popup-newsletter">
                  {%- if block.settings.title != blank -%}
                    <h3 class="popup-newsletter__title heading">{{ block.settings.title | escape }}</h3>
                  {%- endif -%}

                  <button class="popup-newsletter__close link" data-action="close-popup" aria-label="{{ 'general.accessibility.close' | t }}">
                    {%- render 'icon', icon: 'close' -%}
                  </button>

                  {%- if block.settings.content != blank -%}
                    <div class="popup-newsletter__content rte">
                      {{ block.settings.content }}
                    </div>
                  {%- endif -%}

                  {%- if block.settings.show_newsletter -%}
                    {%- form 'customer', id: 'newsletter-popup', class: 'form popup-newsletter__form' -%}
                      {%- if form.posted_successfully? -%}
                        <p class="alert alert--success alert--center">{{ 'general.popup.success' | t }}</p>
                      {%- else -%}
                        <input type="hidden" name="contact[tags]" value="newsletter">

                        <div class="form__input-wrapper form__input-wrapper--labelled">
                          <input id="newsletter-popup[email]" type="email" class="form__field form__field--text" name="contact[email]" autofocus required="required">
                          <label for="newsletter-popup[email]" class="form__floating-label">{{ 'general.popup.email_placeholder' | t }}</label>
                        </div>

                        <button class="button button--primary button--full" type="submit">{{ 'general.popup.subscribe' | t }}</button>
                      {%- endif -%}
                    {%- endform -%}
                  {%- endif -%}
                </div>
              </div>
            </aside>
          {%- endunless -%}
        {%- endunless -%}

      {%- when 'exit' -%}
        {%- unless block.settings.show_only_for_visitors and customer -%}
          {% capture popup_settings %}
            {
              "showOnlyOnce": {{ block.settings.show_only_once | json }}
            }
          {% endcapture %}

          <aside class="modal modal--exit-popup" data-popup-type="exit" data-popup-settings='{{ popup_settings }}' aria-hidden="true" {{ block.shopify_attributes }}>
            <div class="modal__dialog" role="dialog">
              <div class="exit-popup">
                {%- if block.settings.title != blank -%}
                  <h3 class="exit-popup__title heading">{{ block.settings.title | escape }}</h3>
                {%- endif -%}

                {%- if block.settings.subheading != blank -%}
                  <p class="exit-popup__subheading heading">{{ block.settings.subheading | escape }}</p>
                {%- endif -%}

                <button class="exit-popup__close link" data-action="close-popup" aria-label="{{ 'general.accessibility.close' | t }}">
                  {%- render 'icon', icon: 'close' -%}
                </button>

                {%- 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 -%}
                      <p class="alert alert--success alert--center">{{ block.settings.success_message }}</p>
                    {%- else -%}
                      <input type="hidden" name="contact[tags]" value="newsletter">

                      <div class="form__input-wrapper form__input-wrapper--labelled">
                        <input id="exit-popup[email]" type="email" class="form__field form__field--large form__field--text" name="contact[email]" autofocus required="required">
                        <label for="exit-popup[email]" class="form__floating-label">{{ 'general.popup.email_placeholder' | t }}</label>
                      </div>

                      <button class="button button--primary button--extra-large button--full" type="submit">{{ block.settings.button_text | escape }}</button>
                    {%- endif -%}
                  {%- endform -%}
                {%- endif -%}

                {%- if block.settings.close_message != blank and is_form_valid == false -%}
                  <button class="exit-popup__pay-more link link--accented" data-action="close-popup">{{ block.settings.close_message }}</button>
                {%- endif -%}
              </div>
            </div>
          </aside>
        {%- 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 %}

            <aside class="modal modal--newsletter" data-popup-type="newsletter" data-popup-settings='{{ popup_settings }}' aria-hidden="true" {{ block.shopify_attributes }}>
              <div class="modal__dialog" role="dialog" style="padding: 40px;">
                <div class="popup-newsletter">
                  <button class="popup-newsletter__close link" data-action="close-popup" aria-label="{{ 'general.accessibility.close' | t }}" style="right: 10px;top: 10px;">
                    {%- render 'icon', icon: 'close' -%}
                  </button>
                  {%- if block.settings.image -%}
                  <div class="aspect-ratio" style="padding-bottom: {{ 100.0 | divided_by: block.settings.image.aspect_ratio }}%">
                    {%- 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.' -%}

                    <img class="lazyload image--fade-in" data-src="{{ image_url }}" data-widths="[{{ supported_sizes }}]" data-sizes="auto" alt="{{ block.settings.image.alt | escape }}">

                    <noscript>
                      <img src="{{ block.settings.image | img_url: '800x' }}" alt="{{ block.settings.image.alt | escape }}">
                    </noscript>
                  </div>
                  {%- else -%}
                  {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                  {%- endif -%}
                </div>
              </div>
            </aside>
          {%- endunless -%}
    {%- endcase -%}
  {%- endfor -%}
</div>

{% 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": "<p>You can use this popup to display some useful information to your customers.</p>"
        },
        {
          "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. 

Screenshot.png

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

LitExtension
Shopify Partner
4860 1002 1145

This is an accepted solution.

Hi @IamLLIIME,

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

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

LitExtension
Shopify Partner
4860 1002 1145

This is an accepted solution.

Hi @IamLLIIME,

Please change all code:

<div data-section-id="{{ section.id }}" data-section-type="popups">
  {%- 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 %}

            <aside class="modal modal--newsletter" data-popup-type="newsletter" data-popup-settings='{{ popup_settings }}' aria-hidden="true" {{ block.shopify_attributes }}>
              <div class="modal__dialog" role="dialog">
                <div class="popup-newsletter">
                  {%- if block.settings.title != blank -%}
                    <h3 class="popup-newsletter__title heading">{{ block.settings.title | escape }}</h3>
                  {%- endif -%}

                  <button class="popup-newsletter__close link" data-action="close-popup" aria-label="{{ 'general.accessibility.close' | t }}">
                    {%- render 'icon', icon: 'close' -%}
                  </button>

                  {%- if block.settings.content != blank -%}
                    <div class="popup-newsletter__content rte">
                      {{ block.settings.content }}
                    </div>
                  {%- endif -%}

                  {%- if block.settings.show_newsletter -%}
                    {%- form 'customer', id: 'newsletter-popup', class: 'form popup-newsletter__form' -%}
                      {%- if form.posted_successfully? -%}
                        <p class="alert alert--success alert--center">{{ 'general.popup.success' | t }}</p>
                      {%- else -%}
                        <input type="hidden" name="contact[tags]" value="newsletter">

                        <div class="form__input-wrapper form__input-wrapper--labelled">
                          <input id="newsletter-popup[email]" type="email" class="form__field form__field--text" name="contact[email]" autofocus required="required">
                          <label for="newsletter-popup[email]" class="form__floating-label">{{ 'general.popup.email_placeholder' | t }}</label>
                        </div>

                        <button class="button button--primary button--full" type="submit">{{ 'general.popup.subscribe' | t }}</button>
                      {%- endif -%}
                    {%- endform -%}
                  {%- endif -%}
                </div>
              </div>
            </aside>
          {%- endunless -%}
        {%- endunless -%}

      {%- when 'exit' -%}
        {%- unless block.settings.show_only_for_visitors and customer -%}
          {% capture popup_settings %}
            {
              "showOnlyOnce": {{ block.settings.show_only_once | json }}
            }
          {% endcapture %}

          <aside class="modal modal--exit-popup" data-popup-type="exit" data-popup-settings='{{ popup_settings }}' aria-hidden="true" {{ block.shopify_attributes }}>
            <div class="modal__dialog" role="dialog">
              <div class="exit-popup">
                {%- if block.settings.title != blank -%}
                  <h3 class="exit-popup__title heading">{{ block.settings.title | escape }}</h3>
                {%- endif -%}

                {%- if block.settings.subheading != blank -%}
                  <p class="exit-popup__subheading heading">{{ block.settings.subheading | escape }}</p>
                {%- endif -%}

                <button class="exit-popup__close link" data-action="close-popup" aria-label="{{ 'general.accessibility.close' | t }}">
                  {%- render 'icon', icon: 'close' -%}
                </button>

                {%- 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 -%}
                      <p class="alert alert--success alert--center">{{ block.settings.success_message }}</p>
                    {%- else -%}
                      <input type="hidden" name="contact[tags]" value="newsletter">

                      <div class="form__input-wrapper form__input-wrapper--labelled">
                        <input id="exit-popup[email]" type="email" class="form__field form__field--large form__field--text" name="contact[email]" autofocus required="required">
                        <label for="exit-popup[email]" class="form__floating-label">{{ 'general.popup.email_placeholder' | t }}</label>
                      </div>

                      <button class="button button--primary button--extra-large button--full" type="submit">{{ block.settings.button_text | escape }}</button>
                    {%- endif -%}
                  {%- endform -%}
                {%- endif -%}

                {%- if block.settings.close_message != blank and is_form_valid == false -%}
                  <button class="exit-popup__pay-more link link--accented" data-action="close-popup">{{ block.settings.close_message }}</button>
                {%- endif -%}
              </div>
            </div>
          </aside>
        {%- 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 %}

            <aside class="modal modal--newsletter" data-popup-type="newsletter" data-popup-settings='{{ popup_settings }}' aria-hidden="true" {{ block.shopify_attributes }}>
              <div class="modal__dialog" role="dialog" style="padding: 0px;">
                <div class="popup-newsletter">
                  {%- if block.settings.image -%}
                  <div class="aspect-ratio" style="padding-bottom: {{ 100.0 | divided_by: block.settings.image.aspect_ratio }}%">
                    {%- 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.' -%}

                    <img class="lazyload image--fade-in" data-src="{{ image_url }}" data-widths="[{{ supported_sizes }}]" data-sizes="auto" alt="{{ block.settings.image.alt | escape }}">

                    <noscript>
                      <img src="{{ block.settings.image | img_url: '800x' }}" alt="{{ block.settings.image.alt | escape }}">
                    </noscript>
                  </div>
                  {%- else -%}
                  {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                  {%- endif -%}
                </div>
              </div>
            </aside>
          {%- endunless -%}
    {%- endcase -%}
  {%- endfor -%}
</div>

{% 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": "<p>You can use this popup to display some useful information to your customers.</p>"
        },
        {
          "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!

 

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

LitExtension
Shopify Partner
4860 1002 1145

This is an accepted solution.

Hi @IamLLIIME,

Please change code:

<div data-section-id="{{ section.id }}" data-section-type="popups">
  {%- 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 %}

            <aside class="modal modal--newsletter" data-popup-type="newsletter" data-popup-settings='{{ popup_settings }}' aria-hidden="true" {{ block.shopify_attributes }}>
              <div class="modal__dialog" role="dialog">
                <div class="popup-newsletter">
                  {%- if block.settings.title != blank -%}
                    <h3 class="popup-newsletter__title heading">{{ block.settings.title | escape }}</h3>
                  {%- endif -%}

                  <button class="popup-newsletter__close link" data-action="close-popup" aria-label="{{ 'general.accessibility.close' | t }}">
                    {%- render 'icon', icon: 'close' -%}
                  </button>

                  {%- if block.settings.content != blank -%}
                    <div class="popup-newsletter__content rte">
                      {{ block.settings.content }}
                    </div>
                  {%- endif -%}

                  {%- if block.settings.show_newsletter -%}
                    {%- form 'customer', id: 'newsletter-popup', class: 'form popup-newsletter__form' -%}
                      {%- if form.posted_successfully? -%}
                        <p class="alert alert--success alert--center">{{ 'general.popup.success' | t }}</p>
                      {%- else -%}
                        <input type="hidden" name="contact[tags]" value="newsletter">

                        <div class="form__input-wrapper form__input-wrapper--labelled">
                          <input id="newsletter-popup[email]" type="email" class="form__field form__field--text" name="contact[email]" autofocus required="required">
                          <label for="newsletter-popup[email]" class="form__floating-label">{{ 'general.popup.email_placeholder' | t }}</label>
                        </div>

                        <button class="button button--primary button--full" type="submit">{{ 'general.popup.subscribe' | t }}</button>
                      {%- endif -%}
                    {%- endform -%}
                  {%- endif -%}
                </div>
              </div>
            </aside>
          {%- endunless -%}
        {%- endunless -%}

      {%- when 'exit' -%}
        {%- unless block.settings.show_only_for_visitors and customer -%}
          {% capture popup_settings %}
            {
              "showOnlyOnce": {{ block.settings.show_only_once | json }}
            }
          {% endcapture %}

          <aside class="modal modal--exit-popup" data-popup-type="exit" data-popup-settings='{{ popup_settings }}' aria-hidden="true" {{ block.shopify_attributes }}>
            <div class="modal__dialog" role="dialog">
              <div class="exit-popup">
                {%- if block.settings.title != blank -%}
                  <h3 class="exit-popup__title heading">{{ block.settings.title | escape }}</h3>
                {%- endif -%}

                {%- if block.settings.subheading != blank -%}
                  <p class="exit-popup__subheading heading">{{ block.settings.subheading | escape }}</p>
                {%- endif -%}

                <button class="exit-popup__close link" data-action="close-popup" aria-label="{{ 'general.accessibility.close' | t }}">
                  {%- render 'icon', icon: 'close' -%}
                </button>

                {%- 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 -%}
                      <p class="alert alert--success alert--center">{{ block.settings.success_message }}</p>
                    {%- else -%}
                      <input type="hidden" name="contact[tags]" value="newsletter">

                      <div class="form__input-wrapper form__input-wrapper--labelled">
                        <input id="exit-popup[email]" type="email" class="form__field form__field--large form__field--text" name="contact[email]" autofocus required="required">
                        <label for="exit-popup[email]" class="form__floating-label">{{ 'general.popup.email_placeholder' | t }}</label>
                      </div>

                      <button class="button button--primary button--extra-large button--full" type="submit">{{ block.settings.button_text | escape }}</button>
                    {%- endif -%}
                  {%- endform -%}
                {%- endif -%}

                {%- if block.settings.close_message != blank and is_form_valid == false -%}
                  <button class="exit-popup__pay-more link link--accented" data-action="close-popup">{{ block.settings.close_message }}</button>
                {%- endif -%}
              </div>
            </div>
          </aside>
        {%- 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 %}

            <aside class="modal modal--newsletter" data-popup-type="newsletter" data-popup-settings='{{ popup_settings }}' aria-hidden="true" {{ block.shopify_attributes }}>
              <div class="modal__dialog" role="dialog" style="padding: 0px;">
                <div class="popup-newsletter">
                  <button class="popup-newsletter__close link" data-action="close-popup" aria-label="{{ 'general.accessibility.close' | t }}" style="right: 10px;top: 10px;z-index: 9;">
                    {%- render 'icon', icon: 'close' -%}
                  </button>
                  {%- if block.settings.image -%}
                  <div class="aspect-ratio" style="padding-bottom: {{ 100.0 | divided_by: block.settings.image.aspect_ratio }}%">
                    {%- 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.' -%}

                    <img class="lazyload image--fade-in" data-src="{{ image_url }}" data-widths="[{{ supported_sizes }}]" data-sizes="auto" alt="{{ block.settings.image.alt | escape }}">

                    <noscript>
                      <img src="{{ block.settings.image | img_url: '800x' }}" alt="{{ block.settings.image.alt | escape }}">
                    </noscript>
                  </div>
                  {%- else -%}
                  {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                  {%- endif -%}
                </div>
              </div>
            </aside>
          {%- endunless -%}
    {%- endcase -%}
  {%- endfor -%}
</div>

{% 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": "<p>You can use this popup to display some useful information to your customers.</p>"
        },
        {
          "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 %}
LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

LitExtension
Shopify Partner
4860 1002 1145

This is an accepted solution.

Hi @IamLLIIME,

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

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

LitExtension
Shopify Partner
4860 1002 1145

This is an accepted solution.

Hi @IamLLIIME,

Please change code:

<div data-section-id="{{ section.id }}" data-section-type="popups">
  {%- 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 %}

            <aside class="modal modal--newsletter" data-popup-type="newsletter" data-popup-settings='{{ popup_settings }}' aria-hidden="true" {{ block.shopify_attributes }}>
              <div class="modal__dialog" role="dialog">
                <div class="popup-newsletter">
                  {%- if block.settings.title != blank -%}
                    <h3 class="popup-newsletter__title heading">{{ block.settings.title | escape }}</h3>
                  {%- endif -%}

                  <button class="popup-newsletter__close link" data-action="close-popup" aria-label="{{ 'general.accessibility.close' | t }}">
                    {%- render 'icon', icon: 'close' -%}
                  </button>

                  {%- if block.settings.content != blank -%}
                    <div class="popup-newsletter__content rte">
                      {{ block.settings.content }}
                    </div>
                  {%- endif -%}

                  {%- if block.settings.show_newsletter -%}
                    {%- form 'customer', id: 'newsletter-popup', class: 'form popup-newsletter__form' -%}
                      {%- if form.posted_successfully? -%}
                        <p class="alert alert--success alert--center">{{ 'general.popup.success' | t }}</p>
                      {%- else -%}
                        <input type="hidden" name="contact[tags]" value="newsletter">

                        <div class="form__input-wrapper form__input-wrapper--labelled">
                          <input id="newsletter-popup[email]" type="email" class="form__field form__field--text" name="contact[email]" autofocus required="required">
                          <label for="newsletter-popup[email]" class="form__floating-label">{{ 'general.popup.email_placeholder' | t }}</label>
                        </div>

                        <button class="button button--primary button--full" type="submit">{{ 'general.popup.subscribe' | t }}</button>
                      {%- endif -%}
                    {%- endform -%}
                  {%- endif -%}
                </div>
              </div>
            </aside>
          {%- endunless -%}
        {%- endunless -%}

      {%- when 'exit' -%}
        {%- unless block.settings.show_only_for_visitors and customer -%}
          {% capture popup_settings %}
            {
              "showOnlyOnce": {{ block.settings.show_only_once | json }}
            }
          {% endcapture %}

          <aside class="modal modal--exit-popup" data-popup-type="exit" data-popup-settings='{{ popup_settings }}' aria-hidden="true" {{ block.shopify_attributes }}>
            <div class="modal__dialog" role="dialog">
              <div class="exit-popup">
                {%- if block.settings.title != blank -%}
                  <h3 class="exit-popup__title heading">{{ block.settings.title | escape }}</h3>
                {%- endif -%}

                {%- if block.settings.subheading != blank -%}
                  <p class="exit-popup__subheading heading">{{ block.settings.subheading | escape }}</p>
                {%- endif -%}

                <button class="exit-popup__close link" data-action="close-popup" aria-label="{{ 'general.accessibility.close' | t }}">
                  {%- render 'icon', icon: 'close' -%}
                </button>

                {%- 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 -%}
                      <p class="alert alert--success alert--center">{{ block.settings.success_message }}</p>
                    {%- else -%}
                      <input type="hidden" name="contact[tags]" value="newsletter">

                      <div class="form__input-wrapper form__input-wrapper--labelled">
                        <input id="exit-popup[email]" type="email" class="form__field form__field--large form__field--text" name="contact[email]" autofocus required="required">
                        <label for="exit-popup[email]" class="form__floating-label">{{ 'general.popup.email_placeholder' | t }}</label>
                      </div>

                      <button class="button button--primary button--extra-large button--full" type="submit">{{ block.settings.button_text | escape }}</button>
                    {%- endif -%}
                  {%- endform -%}
                {%- endif -%}

                {%- if block.settings.close_message != blank and is_form_valid == false -%}
                  <button class="exit-popup__pay-more link link--accented" data-action="close-popup">{{ block.settings.close_message }}</button>
                {%- endif -%}
              </div>
            </div>
          </aside>
        {%- 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 %}

            <aside class="modal modal--newsletter" data-popup-type="newsletter" data-popup-settings='{{ popup_settings }}' aria-hidden="true" {{ block.shopify_attributes }}>
              <div class="modal__dialog" role="dialog" style="padding: 0px;">
                <div class="popup-newsletter">
                  <button class="popup-newsletter__close link" data-action="close-popup" aria-label="{{ 'general.accessibility.close' | t }}" style="right: 10px;top: 10px;z-index: 9;">
                    {%- render 'icon', icon: 'close' -%}
                  </button>
                  {%- if block.settings.image -%}
                  <a href="{{ block.settings.link }}">
                    <div class="aspect-ratio" style="padding-bottom: {{ 100.0 | divided_by: block.settings.image.aspect_ratio }}%">
                      {%- 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.' -%}

                      <img class="lazyload image--fade-in" data-src="{{ image_url }}" data-widths="[{{ supported_sizes }}]" data-sizes="auto" alt="{{ block.settings.image.alt | escape }}">

                      <noscript>
                        <img src="{{ block.settings.image | img_url: '800x' }}" alt="{{ block.settings.image.alt | escape }}">
                      </noscript>
                    </div>
                  </a>
                  {%- else -%}
                  {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                  {%- endif -%}
                </div>
              </div>
            </aside>
          {%- endunless -%}
    {%- endcase -%}
  {%- endfor -%}
</div>

{% 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": "<p>You can use this popup to display some useful information to your customers.</p>"
        },
        {
          "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 %}
LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

LitExtension
Shopify Partner
4860 1002 1145

This is an accepted solution.

Hi @IamLLIIME,

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

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

LitExtension
Shopify Partner
4860 1002 1145

This is an accepted solution.

Hi @IamLLIIME,

Do you want it to display smaller? 

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

LitExtension
Shopify Partner
4860 1002 1145

This is an accepted solution.

Hi @IamLLIIME,

Please change code:

<div data-section-id="{{ section.id }}" data-section-type="popups">
  {%- 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 %}

            <aside class="modal modal--newsletter" data-popup-type="newsletter" data-popup-settings='{{ popup_settings }}' aria-hidden="true" {{ block.shopify_attributes }}>
              <div class="modal__dialog" role="dialog">
                <div class="popup-newsletter">
                  {%- if block.settings.title != blank -%}
                    <h3 class="popup-newsletter__title heading">{{ block.settings.title | escape }}</h3>
                  {%- endif -%}

                  <button class="popup-newsletter__close link" data-action="close-popup" aria-label="{{ 'general.accessibility.close' | t }}">
                    {%- render 'icon', icon: 'close' -%}
                  </button>

                  {%- if block.settings.content != blank -%}
                    <div class="popup-newsletter__content rte">
                      {{ block.settings.content }}
                    </div>
                  {%- endif -%}

                  {%- if block.settings.show_newsletter -%}
                    {%- form 'customer', id: 'newsletter-popup', class: 'form popup-newsletter__form' -%}
                      {%- if form.posted_successfully? -%}
                        <p class="alert alert--success alert--center">{{ 'general.popup.success' | t }}</p>
                      {%- else -%}
                        <input type="hidden" name="contact[tags]" value="newsletter">

                        <div class="form__input-wrapper form__input-wrapper--labelled">
                          <input id="newsletter-popup[email]" type="email" class="form__field form__field--text" name="contact[email]" autofocus required="required">
                          <label for="newsletter-popup[email]" class="form__floating-label">{{ 'general.popup.email_placeholder' | t }}</label>
                        </div>

                        <button class="button button--primary button--full" type="submit">{{ 'general.popup.subscribe' | t }}</button>
                      {%- endif -%}
                    {%- endform -%}
                  {%- endif -%}
                </div>
              </div>
            </aside>
          {%- endunless -%}
        {%- endunless -%}

      {%- when 'exit' -%}
        {%- unless block.settings.show_only_for_visitors and customer -%}
          {% capture popup_settings %}
            {
              "showOnlyOnce": {{ block.settings.show_only_once | json }}
            }
          {% endcapture %}

          <aside class="modal modal--exit-popup" data-popup-type="exit" data-popup-settings='{{ popup_settings }}' aria-hidden="true" {{ block.shopify_attributes }}>
            <div class="modal__dialog" role="dialog">
              <div class="exit-popup">
                {%- if block.settings.title != blank -%}
                  <h3 class="exit-popup__title heading">{{ block.settings.title | escape }}</h3>
                {%- endif -%}

                {%- if block.settings.subheading != blank -%}
                  <p class="exit-popup__subheading heading">{{ block.settings.subheading | escape }}</p>
                {%- endif -%}

                <button class="exit-popup__close link" data-action="close-popup" aria-label="{{ 'general.accessibility.close' | t }}">
                  {%- render 'icon', icon: 'close' -%}
                </button>

                {%- 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 -%}
                      <p class="alert alert--success alert--center">{{ block.settings.success_message }}</p>
                    {%- else -%}
                      <input type="hidden" name="contact[tags]" value="newsletter">

                      <div class="form__input-wrapper form__input-wrapper--labelled">
                        <input id="exit-popup[email]" type="email" class="form__field form__field--large form__field--text" name="contact[email]" autofocus required="required">
                        <label for="exit-popup[email]" class="form__floating-label">{{ 'general.popup.email_placeholder' | t }}</label>
                      </div>

                      <button class="button button--primary button--extra-large button--full" type="submit">{{ block.settings.button_text | escape }}</button>
                    {%- endif -%}
                  {%- endform -%}
                {%- endif -%}

                {%- if block.settings.close_message != blank and is_form_valid == false -%}
                  <button class="exit-popup__pay-more link link--accented" data-action="close-popup">{{ block.settings.close_message }}</button>
                {%- endif -%}
              </div>
            </div>
          </aside>
        {%- 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 %}

            <aside class="modal modal--newsletter modal--image" data-popup-type="newsletter" data-popup-settings='{{ popup_settings }}' aria-hidden="true" {{ block.shopify_attributes }}>
              <div class="modal__dialog" role="dialog" style="padding: 0px;">
                <div class="popup-newsletter">
                  <button class="popup-newsletter__close link" data-action="close-popup" aria-label="{{ 'general.accessibility.close' | t }}" style="right: 10px;top: 10px;z-index: 9;">
                    {%- render 'icon', icon: 'close' -%}
                  </button>
                  {%- if block.settings.image -%}
                  <a href="{{ block.settings.link }}">
                    <div class="aspect-ratio" style="padding-bottom: {{ 100.0 | divided_by: block.settings.image.aspect_ratio }}%">
                      {%- 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.' -%}

                      <img class="lazyload image--fade-in" data-src="{{ image_url }}" data-widths="[{{ supported_sizes }}]" data-sizes="auto" alt="{{ block.settings.image.alt | escape }}">

                      <noscript>
                        <img src="{{ block.settings.image | img_url: '800x' }}" alt="{{ block.settings.image.alt | escape }}">
                      </noscript>
                    </div>
                  </a>
                  {%- else -%}
                  {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                  {%- endif -%}
                </div>
              </div>
            </aside>
          {%- endunless -%}
    {%- endcase -%}
  {%- endfor -%}
</div>

<style>
  @media screen and (max-width: 640px) {
    .modal--image {
      top: auto;
      bottom: auto;
      padding: 15px;
      right: 0;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  
</style>

{% 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": "<p>You can use this popup to display some useful information to your customers.</p>"
        },
        {
          "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 %}
LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

Replies 28 (28)

LitExtension
Shopify Partner
4860 1002 1145

This is an accepted solution.

Hi @IamLLIIME,

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

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
IamLLIIME
Trailblazer
269 2 50

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

IamLLIIME_0-1647419735835.png

 

IamLLIIME
Trailblazer
269 2 50

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

LitExtension
Shopify Partner
4860 1002 1145

This is an accepted solution.

Hi @IamLLIIME,

You are using Warehouse theme.

Please go to sections > popups.liquid file and change all code:

<div data-section-id="{{ section.id }}" data-section-type="popups">
  {%- 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 %}

            <aside class="modal modal--newsletter" data-popup-type="newsletter" data-popup-settings='{{ popup_settings }}' aria-hidden="true" {{ block.shopify_attributes }}>
              <div class="modal__dialog" role="dialog">
                <div class="popup-newsletter">
                  {%- if block.settings.title != blank -%}
                    <h3 class="popup-newsletter__title heading">{{ block.settings.title | escape }}</h3>
                  {%- endif -%}

                  <button class="popup-newsletter__close link" data-action="close-popup" aria-label="{{ 'general.accessibility.close' | t }}">
                    {%- render 'icon', icon: 'close' -%}
                  </button>

                  {%- if block.settings.content != blank -%}
                    <div class="popup-newsletter__content rte">
                      {{ block.settings.content }}
                    </div>
                  {%- endif -%}

                  {%- if block.settings.show_newsletter -%}
                    {%- form 'customer', id: 'newsletter-popup', class: 'form popup-newsletter__form' -%}
                      {%- if form.posted_successfully? -%}
                        <p class="alert alert--success alert--center">{{ 'general.popup.success' | t }}</p>
                      {%- else -%}
                        <input type="hidden" name="contact[tags]" value="newsletter">

                        <div class="form__input-wrapper form__input-wrapper--labelled">
                          <input id="newsletter-popup[email]" type="email" class="form__field form__field--text" name="contact[email]" autofocus required="required">
                          <label for="newsletter-popup[email]" class="form__floating-label">{{ 'general.popup.email_placeholder' | t }}</label>
                        </div>

                        <button class="button button--primary button--full" type="submit">{{ 'general.popup.subscribe' | t }}</button>
                      {%- endif -%}
                    {%- endform -%}
                  {%- endif -%}
                </div>
              </div>
            </aside>
          {%- endunless -%}
        {%- endunless -%}

      {%- when 'exit' -%}
        {%- unless block.settings.show_only_for_visitors and customer -%}
          {% capture popup_settings %}
            {
              "showOnlyOnce": {{ block.settings.show_only_once | json }}
            }
          {% endcapture %}

          <aside class="modal modal--exit-popup" data-popup-type="exit" data-popup-settings='{{ popup_settings }}' aria-hidden="true" {{ block.shopify_attributes }}>
            <div class="modal__dialog" role="dialog">
              <div class="exit-popup">
                {%- if block.settings.title != blank -%}
                  <h3 class="exit-popup__title heading">{{ block.settings.title | escape }}</h3>
                {%- endif -%}

                {%- if block.settings.subheading != blank -%}
                  <p class="exit-popup__subheading heading">{{ block.settings.subheading | escape }}</p>
                {%- endif -%}

                <button class="exit-popup__close link" data-action="close-popup" aria-label="{{ 'general.accessibility.close' | t }}">
                  {%- render 'icon', icon: 'close' -%}
                </button>

                {%- 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 -%}
                      <p class="alert alert--success alert--center">{{ block.settings.success_message }}</p>
                    {%- else -%}
                      <input type="hidden" name="contact[tags]" value="newsletter">

                      <div class="form__input-wrapper form__input-wrapper--labelled">
                        <input id="exit-popup[email]" type="email" class="form__field form__field--large form__field--text" name="contact[email]" autofocus required="required">
                        <label for="exit-popup[email]" class="form__floating-label">{{ 'general.popup.email_placeholder' | t }}</label>
                      </div>

                      <button class="button button--primary button--extra-large button--full" type="submit">{{ block.settings.button_text | escape }}</button>
                    {%- endif -%}
                  {%- endform -%}
                {%- endif -%}

                {%- if block.settings.close_message != blank and is_form_valid == false -%}
                  <button class="exit-popup__pay-more link link--accented" data-action="close-popup">{{ block.settings.close_message }}</button>
                {%- endif -%}
              </div>
            </div>
          </aside>
        {%- 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 %}

            <aside class="modal modal--newsletter" data-popup-type="newsletter" data-popup-settings='{{ popup_settings }}' aria-hidden="true" {{ block.shopify_attributes }}>
              <div class="modal__dialog" role="dialog" style="padding: 40px;">
                <div class="popup-newsletter">
                  <button class="popup-newsletter__close link" data-action="close-popup" aria-label="{{ 'general.accessibility.close' | t }}" style="right: 10px;top: 10px;">
                    {%- render 'icon', icon: 'close' -%}
                  </button>
                  {%- if block.settings.image -%}
                  <div class="aspect-ratio" style="padding-bottom: {{ 100.0 | divided_by: block.settings.image.aspect_ratio }}%">
                    {%- 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.' -%}

                    <img class="lazyload image--fade-in" data-src="{{ image_url }}" data-widths="[{{ supported_sizes }}]" data-sizes="auto" alt="{{ block.settings.image.alt | escape }}">

                    <noscript>
                      <img src="{{ block.settings.image | img_url: '800x' }}" alt="{{ block.settings.image.alt | escape }}">
                    </noscript>
                  </div>
                  {%- else -%}
                  {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                  {%- endif -%}
                </div>
              </div>
            </aside>
          {%- endunless -%}
    {%- endcase -%}
  {%- endfor -%}
</div>

{% 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": "<p>You can use this popup to display some useful information to your customers.</p>"
        },
        {
          "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. 

Screenshot.png

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
IamLLIIME
Trailblazer
269 2 50

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

LitExtension
Shopify Partner
4860 1002 1145

This is an accepted solution.

Hi @IamLLIIME,

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

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
IamLLIIME
Trailblazer
269 2 50

@LitExtension  Can I also add link to it?

IamLLIIME
Trailblazer
269 2 50

@LitExtension  I'm referring to this

 

IamLLIIME_0-1647481328908.png

 

LitExtension
Shopify Partner
4860 1002 1145

This is an accepted solution.

Hi @IamLLIIME,

Please change all code:

<div data-section-id="{{ section.id }}" data-section-type="popups">
  {%- 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 %}

            <aside class="modal modal--newsletter" data-popup-type="newsletter" data-popup-settings='{{ popup_settings }}' aria-hidden="true" {{ block.shopify_attributes }}>
              <div class="modal__dialog" role="dialog">
                <div class="popup-newsletter">
                  {%- if block.settings.title != blank -%}
                    <h3 class="popup-newsletter__title heading">{{ block.settings.title | escape }}</h3>
                  {%- endif -%}

                  <button class="popup-newsletter__close link" data-action="close-popup" aria-label="{{ 'general.accessibility.close' | t }}">
                    {%- render 'icon', icon: 'close' -%}
                  </button>

                  {%- if block.settings.content != blank -%}
                    <div class="popup-newsletter__content rte">
                      {{ block.settings.content }}
                    </div>
                  {%- endif -%}

                  {%- if block.settings.show_newsletter -%}
                    {%- form 'customer', id: 'newsletter-popup', class: 'form popup-newsletter__form' -%}
                      {%- if form.posted_successfully? -%}
                        <p class="alert alert--success alert--center">{{ 'general.popup.success' | t }}</p>
                      {%- else -%}
                        <input type="hidden" name="contact[tags]" value="newsletter">

                        <div class="form__input-wrapper form__input-wrapper--labelled">
                          <input id="newsletter-popup[email]" type="email" class="form__field form__field--text" name="contact[email]" autofocus required="required">
                          <label for="newsletter-popup[email]" class="form__floating-label">{{ 'general.popup.email_placeholder' | t }}</label>
                        </div>

                        <button class="button button--primary button--full" type="submit">{{ 'general.popup.subscribe' | t }}</button>
                      {%- endif -%}
                    {%- endform -%}
                  {%- endif -%}
                </div>
              </div>
            </aside>
          {%- endunless -%}
        {%- endunless -%}

      {%- when 'exit' -%}
        {%- unless block.settings.show_only_for_visitors and customer -%}
          {% capture popup_settings %}
            {
              "showOnlyOnce": {{ block.settings.show_only_once | json }}
            }
          {% endcapture %}

          <aside class="modal modal--exit-popup" data-popup-type="exit" data-popup-settings='{{ popup_settings }}' aria-hidden="true" {{ block.shopify_attributes }}>
            <div class="modal__dialog" role="dialog">
              <div class="exit-popup">
                {%- if block.settings.title != blank -%}
                  <h3 class="exit-popup__title heading">{{ block.settings.title | escape }}</h3>
                {%- endif -%}

                {%- if block.settings.subheading != blank -%}
                  <p class="exit-popup__subheading heading">{{ block.settings.subheading | escape }}</p>
                {%- endif -%}

                <button class="exit-popup__close link" data-action="close-popup" aria-label="{{ 'general.accessibility.close' | t }}">
                  {%- render 'icon', icon: 'close' -%}
                </button>

                {%- 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 -%}
                      <p class="alert alert--success alert--center">{{ block.settings.success_message }}</p>
                    {%- else -%}
                      <input type="hidden" name="contact[tags]" value="newsletter">

                      <div class="form__input-wrapper form__input-wrapper--labelled">
                        <input id="exit-popup[email]" type="email" class="form__field form__field--large form__field--text" name="contact[email]" autofocus required="required">
                        <label for="exit-popup[email]" class="form__floating-label">{{ 'general.popup.email_placeholder' | t }}</label>
                      </div>

                      <button class="button button--primary button--extra-large button--full" type="submit">{{ block.settings.button_text | escape }}</button>
                    {%- endif -%}
                  {%- endform -%}
                {%- endif -%}

                {%- if block.settings.close_message != blank and is_form_valid == false -%}
                  <button class="exit-popup__pay-more link link--accented" data-action="close-popup">{{ block.settings.close_message }}</button>
                {%- endif -%}
              </div>
            </div>
          </aside>
        {%- 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 %}

            <aside class="modal modal--newsletter" data-popup-type="newsletter" data-popup-settings='{{ popup_settings }}' aria-hidden="true" {{ block.shopify_attributes }}>
              <div class="modal__dialog" role="dialog" style="padding: 0px;">
                <div class="popup-newsletter">
                  {%- if block.settings.image -%}
                  <div class="aspect-ratio" style="padding-bottom: {{ 100.0 | divided_by: block.settings.image.aspect_ratio }}%">
                    {%- 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.' -%}

                    <img class="lazyload image--fade-in" data-src="{{ image_url }}" data-widths="[{{ supported_sizes }}]" data-sizes="auto" alt="{{ block.settings.image.alt | escape }}">

                    <noscript>
                      <img src="{{ block.settings.image | img_url: '800x' }}" alt="{{ block.settings.image.alt | escape }}">
                    </noscript>
                  </div>
                  {%- else -%}
                  {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                  {%- endif -%}
                </div>
              </div>
            </aside>
          {%- endunless -%}
    {%- endcase -%}
  {%- endfor -%}
</div>

{% 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": "<p>You can use this popup to display some useful information to your customers.</p>"
        },
        {
          "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!

 

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
IamLLIIME
Trailblazer
269 2 50

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

LitExtension
Shopify Partner
4860 1002 1145

This is an accepted solution.

Hi @IamLLIIME,

Please change code:

<div data-section-id="{{ section.id }}" data-section-type="popups">
  {%- 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 %}

            <aside class="modal modal--newsletter" data-popup-type="newsletter" data-popup-settings='{{ popup_settings }}' aria-hidden="true" {{ block.shopify_attributes }}>
              <div class="modal__dialog" role="dialog">
                <div class="popup-newsletter">
                  {%- if block.settings.title != blank -%}
                    <h3 class="popup-newsletter__title heading">{{ block.settings.title | escape }}</h3>
                  {%- endif -%}

                  <button class="popup-newsletter__close link" data-action="close-popup" aria-label="{{ 'general.accessibility.close' | t }}">
                    {%- render 'icon', icon: 'close' -%}
                  </button>

                  {%- if block.settings.content != blank -%}
                    <div class="popup-newsletter__content rte">
                      {{ block.settings.content }}
                    </div>
                  {%- endif -%}

                  {%- if block.settings.show_newsletter -%}
                    {%- form 'customer', id: 'newsletter-popup', class: 'form popup-newsletter__form' -%}
                      {%- if form.posted_successfully? -%}
                        <p class="alert alert--success alert--center">{{ 'general.popup.success' | t }}</p>
                      {%- else -%}
                        <input type="hidden" name="contact[tags]" value="newsletter">

                        <div class="form__input-wrapper form__input-wrapper--labelled">
                          <input id="newsletter-popup[email]" type="email" class="form__field form__field--text" name="contact[email]" autofocus required="required">
                          <label for="newsletter-popup[email]" class="form__floating-label">{{ 'general.popup.email_placeholder' | t }}</label>
                        </div>

                        <button class="button button--primary button--full" type="submit">{{ 'general.popup.subscribe' | t }}</button>
                      {%- endif -%}
                    {%- endform -%}
                  {%- endif -%}
                </div>
              </div>
            </aside>
          {%- endunless -%}
        {%- endunless -%}

      {%- when 'exit' -%}
        {%- unless block.settings.show_only_for_visitors and customer -%}
          {% capture popup_settings %}
            {
              "showOnlyOnce": {{ block.settings.show_only_once | json }}
            }
          {% endcapture %}

          <aside class="modal modal--exit-popup" data-popup-type="exit" data-popup-settings='{{ popup_settings }}' aria-hidden="true" {{ block.shopify_attributes }}>
            <div class="modal__dialog" role="dialog">
              <div class="exit-popup">
                {%- if block.settings.title != blank -%}
                  <h3 class="exit-popup__title heading">{{ block.settings.title | escape }}</h3>
                {%- endif -%}

                {%- if block.settings.subheading != blank -%}
                  <p class="exit-popup__subheading heading">{{ block.settings.subheading | escape }}</p>
                {%- endif -%}

                <button class="exit-popup__close link" data-action="close-popup" aria-label="{{ 'general.accessibility.close' | t }}">
                  {%- render 'icon', icon: 'close' -%}
                </button>

                {%- 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 -%}
                      <p class="alert alert--success alert--center">{{ block.settings.success_message }}</p>
                    {%- else -%}
                      <input type="hidden" name="contact[tags]" value="newsletter">

                      <div class="form__input-wrapper form__input-wrapper--labelled">
                        <input id="exit-popup[email]" type="email" class="form__field form__field--large form__field--text" name="contact[email]" autofocus required="required">
                        <label for="exit-popup[email]" class="form__floating-label">{{ 'general.popup.email_placeholder' | t }}</label>
                      </div>

                      <button class="button button--primary button--extra-large button--full" type="submit">{{ block.settings.button_text | escape }}</button>
                    {%- endif -%}
                  {%- endform -%}
                {%- endif -%}

                {%- if block.settings.close_message != blank and is_form_valid == false -%}
                  <button class="exit-popup__pay-more link link--accented" data-action="close-popup">{{ block.settings.close_message }}</button>
                {%- endif -%}
              </div>
            </div>
          </aside>
        {%- 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 %}

            <aside class="modal modal--newsletter" data-popup-type="newsletter" data-popup-settings='{{ popup_settings }}' aria-hidden="true" {{ block.shopify_attributes }}>
              <div class="modal__dialog" role="dialog" style="padding: 0px;">
                <div class="popup-newsletter">
                  <button class="popup-newsletter__close link" data-action="close-popup" aria-label="{{ 'general.accessibility.close' | t }}" style="right: 10px;top: 10px;z-index: 9;">
                    {%- render 'icon', icon: 'close' -%}
                  </button>
                  {%- if block.settings.image -%}
                  <div class="aspect-ratio" style="padding-bottom: {{ 100.0 | divided_by: block.settings.image.aspect_ratio }}%">
                    {%- 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.' -%}

                    <img class="lazyload image--fade-in" data-src="{{ image_url }}" data-widths="[{{ supported_sizes }}]" data-sizes="auto" alt="{{ block.settings.image.alt | escape }}">

                    <noscript>
                      <img src="{{ block.settings.image | img_url: '800x' }}" alt="{{ block.settings.image.alt | escape }}">
                    </noscript>
                  </div>
                  {%- else -%}
                  {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                  {%- endif -%}
                </div>
              </div>
            </aside>
          {%- endunless -%}
    {%- endcase -%}
  {%- endfor -%}
</div>

{% 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": "<p>You can use this popup to display some useful information to your customers.</p>"
        },
        {
          "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 %}
LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
IamLLIIME
Trailblazer
269 2 50

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

LitExtension
Shopify Partner
4860 1002 1145

This is an accepted solution.

Hi @IamLLIIME,

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

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
LitExtension
Shopify Partner
4860 1002 1145

This is an accepted solution.

Hi @IamLLIIME,

Please change code:

<div data-section-id="{{ section.id }}" data-section-type="popups">
  {%- 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 %}

            <aside class="modal modal--newsletter" data-popup-type="newsletter" data-popup-settings='{{ popup_settings }}' aria-hidden="true" {{ block.shopify_attributes }}>
              <div class="modal__dialog" role="dialog">
                <div class="popup-newsletter">
                  {%- if block.settings.title != blank -%}
                    <h3 class="popup-newsletter__title heading">{{ block.settings.title | escape }}</h3>
                  {%- endif -%}

                  <button class="popup-newsletter__close link" data-action="close-popup" aria-label="{{ 'general.accessibility.close' | t }}">
                    {%- render 'icon', icon: 'close' -%}
                  </button>

                  {%- if block.settings.content != blank -%}
                    <div class="popup-newsletter__content rte">
                      {{ block.settings.content }}
                    </div>
                  {%- endif -%}

                  {%- if block.settings.show_newsletter -%}
                    {%- form 'customer', id: 'newsletter-popup', class: 'form popup-newsletter__form' -%}
                      {%- if form.posted_successfully? -%}
                        <p class="alert alert--success alert--center">{{ 'general.popup.success' | t }}</p>
                      {%- else -%}
                        <input type="hidden" name="contact[tags]" value="newsletter">

                        <div class="form__input-wrapper form__input-wrapper--labelled">
                          <input id="newsletter-popup[email]" type="email" class="form__field form__field--text" name="contact[email]" autofocus required="required">
                          <label for="newsletter-popup[email]" class="form__floating-label">{{ 'general.popup.email_placeholder' | t }}</label>
                        </div>

                        <button class="button button--primary button--full" type="submit">{{ 'general.popup.subscribe' | t }}</button>
                      {%- endif -%}
                    {%- endform -%}
                  {%- endif -%}
                </div>
              </div>
            </aside>
          {%- endunless -%}
        {%- endunless -%}

      {%- when 'exit' -%}
        {%- unless block.settings.show_only_for_visitors and customer -%}
          {% capture popup_settings %}
            {
              "showOnlyOnce": {{ block.settings.show_only_once | json }}
            }
          {% endcapture %}

          <aside class="modal modal--exit-popup" data-popup-type="exit" data-popup-settings='{{ popup_settings }}' aria-hidden="true" {{ block.shopify_attributes }}>
            <div class="modal__dialog" role="dialog">
              <div class="exit-popup">
                {%- if block.settings.title != blank -%}
                  <h3 class="exit-popup__title heading">{{ block.settings.title | escape }}</h3>
                {%- endif -%}

                {%- if block.settings.subheading != blank -%}
                  <p class="exit-popup__subheading heading">{{ block.settings.subheading | escape }}</p>
                {%- endif -%}

                <button class="exit-popup__close link" data-action="close-popup" aria-label="{{ 'general.accessibility.close' | t }}">
                  {%- render 'icon', icon: 'close' -%}
                </button>

                {%- 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 -%}
                      <p class="alert alert--success alert--center">{{ block.settings.success_message }}</p>
                    {%- else -%}
                      <input type="hidden" name="contact[tags]" value="newsletter">

                      <div class="form__input-wrapper form__input-wrapper--labelled">
                        <input id="exit-popup[email]" type="email" class="form__field form__field--large form__field--text" name="contact[email]" autofocus required="required">
                        <label for="exit-popup[email]" class="form__floating-label">{{ 'general.popup.email_placeholder' | t }}</label>
                      </div>

                      <button class="button button--primary button--extra-large button--full" type="submit">{{ block.settings.button_text | escape }}</button>
                    {%- endif -%}
                  {%- endform -%}
                {%- endif -%}

                {%- if block.settings.close_message != blank and is_form_valid == false -%}
                  <button class="exit-popup__pay-more link link--accented" data-action="close-popup">{{ block.settings.close_message }}</button>
                {%- endif -%}
              </div>
            </div>
          </aside>
        {%- 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 %}

            <aside class="modal modal--newsletter" data-popup-type="newsletter" data-popup-settings='{{ popup_settings }}' aria-hidden="true" {{ block.shopify_attributes }}>
              <div class="modal__dialog" role="dialog" style="padding: 0px;">
                <div class="popup-newsletter">
                  <button class="popup-newsletter__close link" data-action="close-popup" aria-label="{{ 'general.accessibility.close' | t }}" style="right: 10px;top: 10px;z-index: 9;">
                    {%- render 'icon', icon: 'close' -%}
                  </button>
                  {%- if block.settings.image -%}
                  <a href="{{ block.settings.link }}">
                    <div class="aspect-ratio" style="padding-bottom: {{ 100.0 | divided_by: block.settings.image.aspect_ratio }}%">
                      {%- 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.' -%}

                      <img class="lazyload image--fade-in" data-src="{{ image_url }}" data-widths="[{{ supported_sizes }}]" data-sizes="auto" alt="{{ block.settings.image.alt | escape }}">

                      <noscript>
                        <img src="{{ block.settings.image | img_url: '800x' }}" alt="{{ block.settings.image.alt | escape }}">
                      </noscript>
                    </div>
                  </a>
                  {%- else -%}
                  {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                  {%- endif -%}
                </div>
              </div>
            </aside>
          {%- endunless -%}
    {%- endcase -%}
  {%- endfor -%}
</div>

{% 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": "<p>You can use this popup to display some useful information to your customers.</p>"
        },
        {
          "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 %}
LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
IamLLIIME
Trailblazer
269 2 50

@LitExtension  Sorry, but can we also adjust the size of it on mobile view?  

IamLLIIME_0-1647494461254.png

 

LitExtension
Shopify Partner
4860 1002 1145

This is an accepted solution.

Hi @IamLLIIME,

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

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
IamLLIIME
Trailblazer
269 2 50

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!

LitExtension
Shopify Partner
4860 1002 1145

This is an accepted solution.

Hi @IamLLIIME,

Do you want it to display smaller? 

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
IamLLIIME
Trailblazer
269 2 50

On mobile view? yes and also if only it could appear in the center when using mobile. On desktop view it works pretty well

 

IamLLIIME_0-1647562384581.png

 

LitExtension
Shopify Partner
4860 1002 1145

This is an accepted solution.

Hi @IamLLIIME,

Please change code:

<div data-section-id="{{ section.id }}" data-section-type="popups">
  {%- 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 %}

            <aside class="modal modal--newsletter" data-popup-type="newsletter" data-popup-settings='{{ popup_settings }}' aria-hidden="true" {{ block.shopify_attributes }}>
              <div class="modal__dialog" role="dialog">
                <div class="popup-newsletter">
                  {%- if block.settings.title != blank -%}
                    <h3 class="popup-newsletter__title heading">{{ block.settings.title | escape }}</h3>
                  {%- endif -%}

                  <button class="popup-newsletter__close link" data-action="close-popup" aria-label="{{ 'general.accessibility.close' | t }}">
                    {%- render 'icon', icon: 'close' -%}
                  </button>

                  {%- if block.settings.content != blank -%}
                    <div class="popup-newsletter__content rte">
                      {{ block.settings.content }}
                    </div>
                  {%- endif -%}

                  {%- if block.settings.show_newsletter -%}
                    {%- form 'customer', id: 'newsletter-popup', class: 'form popup-newsletter__form' -%}
                      {%- if form.posted_successfully? -%}
                        <p class="alert alert--success alert--center">{{ 'general.popup.success' | t }}</p>
                      {%- else -%}
                        <input type="hidden" name="contact[tags]" value="newsletter">

                        <div class="form__input-wrapper form__input-wrapper--labelled">
                          <input id="newsletter-popup[email]" type="email" class="form__field form__field--text" name="contact[email]" autofocus required="required">
                          <label for="newsletter-popup[email]" class="form__floating-label">{{ 'general.popup.email_placeholder' | t }}</label>
                        </div>

                        <button class="button button--primary button--full" type="submit">{{ 'general.popup.subscribe' | t }}</button>
                      {%- endif -%}
                    {%- endform -%}
                  {%- endif -%}
                </div>
              </div>
            </aside>
          {%- endunless -%}
        {%- endunless -%}

      {%- when 'exit' -%}
        {%- unless block.settings.show_only_for_visitors and customer -%}
          {% capture popup_settings %}
            {
              "showOnlyOnce": {{ block.settings.show_only_once | json }}
            }
          {% endcapture %}

          <aside class="modal modal--exit-popup" data-popup-type="exit" data-popup-settings='{{ popup_settings }}' aria-hidden="true" {{ block.shopify_attributes }}>
            <div class="modal__dialog" role="dialog">
              <div class="exit-popup">
                {%- if block.settings.title != blank -%}
                  <h3 class="exit-popup__title heading">{{ block.settings.title | escape }}</h3>
                {%- endif -%}

                {%- if block.settings.subheading != blank -%}
                  <p class="exit-popup__subheading heading">{{ block.settings.subheading | escape }}</p>
                {%- endif -%}

                <button class="exit-popup__close link" data-action="close-popup" aria-label="{{ 'general.accessibility.close' | t }}">
                  {%- render 'icon', icon: 'close' -%}
                </button>

                {%- 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 -%}
                      <p class="alert alert--success alert--center">{{ block.settings.success_message }}</p>
                    {%- else -%}
                      <input type="hidden" name="contact[tags]" value="newsletter">

                      <div class="form__input-wrapper form__input-wrapper--labelled">
                        <input id="exit-popup[email]" type="email" class="form__field form__field--large form__field--text" name="contact[email]" autofocus required="required">
                        <label for="exit-popup[email]" class="form__floating-label">{{ 'general.popup.email_placeholder' | t }}</label>
                      </div>

                      <button class="button button--primary button--extra-large button--full" type="submit">{{ block.settings.button_text | escape }}</button>
                    {%- endif -%}
                  {%- endform -%}
                {%- endif -%}

                {%- if block.settings.close_message != blank and is_form_valid == false -%}
                  <button class="exit-popup__pay-more link link--accented" data-action="close-popup">{{ block.settings.close_message }}</button>
                {%- endif -%}
              </div>
            </div>
          </aside>
        {%- 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 %}

            <aside class="modal modal--newsletter modal--image" data-popup-type="newsletter" data-popup-settings='{{ popup_settings }}' aria-hidden="true" {{ block.shopify_attributes }}>
              <div class="modal__dialog" role="dialog" style="padding: 0px;">
                <div class="popup-newsletter">
                  <button class="popup-newsletter__close link" data-action="close-popup" aria-label="{{ 'general.accessibility.close' | t }}" style="right: 10px;top: 10px;z-index: 9;">
                    {%- render 'icon', icon: 'close' -%}
                  </button>
                  {%- if block.settings.image -%}
                  <a href="{{ block.settings.link }}">
                    <div class="aspect-ratio" style="padding-bottom: {{ 100.0 | divided_by: block.settings.image.aspect_ratio }}%">
                      {%- 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.' -%}

                      <img class="lazyload image--fade-in" data-src="{{ image_url }}" data-widths="[{{ supported_sizes }}]" data-sizes="auto" alt="{{ block.settings.image.alt | escape }}">

                      <noscript>
                        <img src="{{ block.settings.image | img_url: '800x' }}" alt="{{ block.settings.image.alt | escape }}">
                      </noscript>
                    </div>
                  </a>
                  {%- else -%}
                  {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                  {%- endif -%}
                </div>
              </div>
            </aside>
          {%- endunless -%}
    {%- endcase -%}
  {%- endfor -%}
</div>

<style>
  @media screen and (max-width: 640px) {
    .modal--image {
      top: auto;
      bottom: auto;
      padding: 15px;
      right: 0;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  
</style>

{% 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": "<p>You can use this popup to display some useful information to your customers.</p>"
        },
        {
          "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 %}
LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
IamLLIIME
Trailblazer
269 2 50

@LitExtension  Thankyou so much!

IamLLIIME
Trailblazer
269 2 50

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!!

LitExtension
Shopify Partner
4860 1002 1145

Hi @IamLLIIME,

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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
IamLLIIME
Trailblazer
269 2 50

@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

 

Smiley1311
Shopify Partner
47 0 15

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:

 

Screenshot (254).png

IamLLIIME
Trailblazer
269 2 50

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

ITvinz
Visitor
1 0 0

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.

Smiley1311
Shopify Partner
47 0 15
I am sorry but I stopped coding and I have completely forgotten it. Good
luck finding your answer.