Can we add more images in the pop-up section?

OLDTIMEMF · April 6, 2022, 10:38pm

Hi! I would like to ask if we can add more image in the pop up image section?

OLDTIMEMF · April 7, 2022, 1:42am

BTW this is the code used in popup.liquid

{%- 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 %} {%- endunless -%} {%- endunless -%}

{%- when ‘exit’ -%}
{%- unless block.settings.show_only_for_visitors and customer -%}
{% capture popup_settings %}
{
“showOnlyOnce”: {{ block.settings.show_only_once | json }}
}
{% endcapture %}

{%- 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 %} {%- endunless -%} {%- endcase -%} {%- endfor -%}

@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; } }

{% schema %}
{
“name”: “Popups”,
“max_blocks”: 3,
“blocks”: [
{
“name”: “Newsletter popup”,
“type”: “newsletter”,
“limit”: 1,
“settings”: [
{
“type”: “checkbox”,
“id”: “show_only_on_index”,
“label”: “Show only on home page”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_only_for_visitors”,
“label”: “Disable for account holders”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_only_once”,
“label”: “Show once to visitors”,
“default”: true
},
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”,
“default”: “Popup”
},
{
“type”: “richtext”,
“id”: “content”,
“label”: “Text”,
“default”: “

You can use this popup to display some useful information to your customers.

”
},
{
“type”: “checkbox”,
“id”: “show_newsletter”,
“label”: “Show newsletter form”,
“info”: “Customers who subscribe will have their email address added to the "accepts marketing" customer list.”,
“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 %}

KetanKumar · April 7, 2022, 6:41am

@OLDTIMEMF

sorry for that issue can you try this code


{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'newsletter' -%}
{%- unless block.settings.show_only_on_index and template != 'index' -%}
{%- unless block.settings.show_only_for_visitors and customer -%}
{% capture popup_settings %}
{
"apparitionDelay": {{ block.settings.apparition_delay | json }},
"showOnlyOnce": {{ block.settings.show_only_once | json }}
}
{% endcapture %}

{%- if block.settings.title != blank -%}
### {{ block.settings.title | escape }}
{%- endif -%}

{%- if block.settings.content != blank -%}

{{ block.settings.content }}

{%- endif -%}

{%- if block.settings.show_newsletter -%}
{%- form 'customer', id: 'newsletter-popup', class: 'form popup-newsletter__form' -%}
{%- if form.posted_successfully? -%}

{{ 'general.popup.success' | t }}

{%- else -%}

{%- endif -%}
{%- endform -%}
{%- endif -%}

{%- endunless -%}
{%- endunless -%}

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

{%- if block.settings.title != blank -%}
### {{ block.settings.title | escape }}
{%- endif -%}

{%- if block.settings.subheading != blank -%}

{{ block.settings.subheading | escape }}

{%- endif -%}

{%- assign is_form_valid = false -%}

{%- if block.settings.show_newsletter -%}
{%- form 'customer', id: 'exit-popup', class: 'form exit-popup__form' -%}
{%- if form.posted_successfully? -%}
{%- assign is_form_valid = true -%}

{{ block.settings.success_message }}

{%- else -%}

{%- endif -%}
{%- endform -%}
{%- endif -%}

{%- if block.settings.close_message != blank and is_form_valid == false -%}

{%- endif -%}

{%- endunless -%}
{%- when 'image' -%}
{%- unless block.settings.show_only_for_visitors and customer -%}
{% capture popup_settings %}
{
"apparitionDelay": {{ block.settings.apparition_delay | json }},
"showOnlyOnce": {{ block.settings.show_only_once | json }}
}
{% endcapture %}

{%- if block.settings.image -%}

{%- capture supported_sizes -%}{%- render 'image-size', sizes: '300,400,500,600,700,800,900,1000,1100,1200', image: block.settings.image -%}{%- endcapture -%}
{%- assign image_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{%- else -%}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}

{%- endunless -%}
{%- endcase -%}
{%- endfor -%}

{% schema %}
{
"name": "Popups",
"max_blocks": 3,
"blocks": [
{
"name": "Newsletter popup",
"type": "newsletter",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "show_only_on_index",
"label": "Show only on home page",
"default": true
},
{
"type": "checkbox",
"id": "show_only_for_visitors",
"label": "Disable for account holders",
"default": true
},
{
"type": "checkbox",
"id": "show_only_once",
"label": "Show once to visitors",
"default": true
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Popup"
},
{
"type": "richtext",
"id": "content",
"label": "Text",
"default": "

You can use this popup to display some useful information to your customers.

"
},
{
"type": "checkbox",
"id": "show_newsletter",
"label": "Show newsletter form",
"info": "Customers who subscribe will have their email address added to the \"accepts marketing\" [customer list](/admin/customers?query=&accepts_marketing=1).",
"default": true
},
{
"type": "range",
"id": "apparition_delay",
"min": 0,
"max": 15,
"step": 1,
"unit": "sec",
"label": "Delay until the popup appears",
"default": 5
}
]
},
{
"name": "Image popup",
"type": "image",
"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 %}

OLDTIMEMF · April 7, 2022, 6:46am

Wow thanks for this! @KetanKumar

KetanKumar · April 7, 2022, 6:50am

@OLDTIMEMF

its my pleasure to help us

Topic		Replies	Views
How can I add a custom pop up image to my website? Technical Q&A design	28	365	December 4, 2023
How to create a multicolumn section with popup image and text? Technical Q&A css , shopify-theme	5	140	October 25, 2024
Add Link to entire Slider - Highlight Team Technical Q&A	17	151	May 27, 2022
How can I display different objects in the same liquid block? Technical Q&A migration , javascript , css , html , shopify-theme	5	84	November 23, 2023
Why is the modal box pop up image not appearing on the front end? Technical Q&A third-party-theme , html	4	84	April 25, 2024

Can we add more images in the pop-up section?

Related topics