Discount popup not showing on mobile

BillyAzevedo
New Member
2 0 0

Hey folks, I am having a hard time trying to figure out how to make the discount popup show on mobile.

The popup section code is below.

Thanks a lot in advance!

 

{%- comment -%}
/sections/popup.liquid
{%- endcomment -%}
{%- assign popup_title = section.settings.popup_header -%}
{%- assign popup_content = section.settings.popup_content -%}
{%- assign show_popup = section.settings.show_popup -%}

{%- if show_popup == 'enabled' -%}
{%- assign show_popup = true -%}
{%- assign testmode = false -%}
{%- elsif show_popup == 'disabled' -%}
{%- assign show_popup = false -%}
{%- assign testmode = false -%}
{%- else -%}
{%- assign show_popup = true -%}
{%- assign testmode = true -%}
{%- endif -%}

<div data-section-id="{{ section.id }}" data-section-type="popup">
{%- if show_popup or testmode -%}
{%- assign image = section.settings.image -%}
{%- assign overlay_color = section.settings.overlay_color -%}
{%- assign overlay_opacity = section.settings.overlay_opacity | times: 0.01 -%}

{%- style -%}
.popup__background::after { background-color: {{ overlay_color }}; opacity: {{ overlay_opacity }}; }
.popup--text-dark .input-group__btn { color: {{ overlay_color }}; }
.popup--text-light .input-group__btn:hover { color: {{ overlay_color }}; }
{%- endstyle -%}

<div id="popup" class="modal popup text-center popup--{{ section.settings.popup_width }} popup--align-{{ section.settings.popup_position }} popup--text-{{ section.settings.text_color }}"
style="display: none;"
data-reappear-time="{{ section.settings.popup_reappear_time }}"
data-delay="{{ section.settings.popup_delay }}"
data-enabled="{{ show_popup }}"
data-testmode="{{ testmode }}">
{%- if image != blank -%}
<div class="popup__background lazyload"
data-bgset="{% render 'bgset', image: image %}"
data-sizes="auto"
data-parent-fit="cover">
</div>
<noscript>
<div class="popup__background" style="background-image: url( {{ image | img_url: '1024x' }} );"></div>
</noscript>
{%- else -%}
<div class="popup__background"></div>
{%- endif -%}
<div class="popup__container">
{%- if popup_content != blank or popup_title != blank -%}
{%- if popup_title != blank -%}
<h2>{{ popup_title | truncatewords: 10 }}</h2>
{%- endif -%}

{%- if popup_content != blank -%}
<div class="popup__text">
{{- popup_content -}}
</div>
{%- endif -%}
{%- else -%}
{{- 'homepage.onboarding.popup_html' | t -}}
{%- endif -%}

{%- if section.settings.show_popup_newsletter -%}
{%- capture newsletter_form_id -%}NewsletterForm--{{section.id}}{%- endcapture -%}
{%- form 'customer', id: 'PopupNewsletter' -%}
<div class="newsletter">
{%- if form.posted_successfully? -%}
<div class="newsletter--form">
<div class="note form-success">{{ 'general.newsletter_form.newsletter_success' | t }}</div>
</div>
{%- elsif form.errors -%}
{{- form.errors | default_errors -}}
{%- endif -%}

<input type="hidden" name="contact[accepts_marketing]" value="true">

<div class="newsletter--form">
<div class="input-group">

<input type="email" value="{% if customer %}{{ customer.email }}{% endif %}" placeholder="{{ 'general.newsletter_form.email' | t }}" name="contact[email]" id="Email--{{ section.id }}" class="input-group__field input-group__field--email" aria-label="{{ 'general.newsletter_form.email' | t }}" autocorrect="off" autocapitalize="off">

<span class="input-group__btn-wrapper">
<button type="submit" name="subscribe" id="SubscribeSubmit--{{ section.id }}" class="input-group__btn" value="">
<i class="custom-icon-long-arrow"></i>
</button>
</span>
</div>
</div>
</div>
{%- endform -%}
{%- endif -%}
</div>
</div>
{%- endif -%}
</div>

{% schema %}
{
"name": "Popup",
"settings": [
{
"type": "select",
"id": "show_popup",
"label": "Display mode",
"default": "disabled",
"options": [
{
"value": "enabled",
"label": "Enabled"
},
{
"value": "disabled",
"label": "Disabled"
},
{
"value": "testmode",
"label": "Test mode"
}
]
},
{
"type": "select",
"id": "popup_width",
"label": "Width",
"default": "medium",
"options": [
{
"value": "large",
"label": "Large"
},
{
"value": "medium",
"label": "Medium"
}
]
},
{
"type": "select",
"id": "popup_position",
"label": "Position",
"info": "For medium width only",
"default": "center",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "header",
"content": "Background"
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "color",
"id": "overlay_color",
"label": "Overlay color",
"default": "#fff"
},
{
"type": "range",
"id": "overlay_opacity",
"label": "Overlay opacity",
"min": 0,
"max": 100,
"step": 5,
"unit": "%",
"default": 100
},
{
"label": "Header",
"type": "text",
"id": "popup_header",
"default": "20% Off - Summer Sale"
},
{
"label": "Text",
"type": "richtext",
"id": "popup_content",
"default": "<p>Popups are an ideal place to offer promotions and collect emails.</p>"
},
{
"type": "select",
"id": "text_color",
"label": "Text color",
"default": "dark",
"options": [
{
"value": "dark",
"label": "Dark"
},
{
"value": "light",
"label": "Light"
}
]
},
{
"label": "Show newsletter signup",
"type": "checkbox",
"id": "show_popup_newsletter",
"default": true
},
{
"type": "select",
"id": "popup_delay",
"info": "Subscribers are added in the Customers section of your site admin.",
"label": "Choose a delay until popup appears",
"options": [
{
"value": "0",
"label": "None"
},
{
"value": "3000",
"label": "3 seconds"
},
{
"value": "10000",
"label": "10 seconds"
},
{
"value": "30000",
"label": "30 seconds"
},
{
"value": "60000",
"label": "1 minute"
},
{
"value": "120000",
"label": "2 minutes"
},
{
"value": "300000",
"label": "5 minutes"
}
]
},
{
"type": "select",
"id": "popup_reappear_time",
"label": "Choose a duration until popup reappears",
"info": "Popups can detract from a user's experience, so try to limit how often they appear.",
"options": [
{
"value": "0",
"label": "None"
},
{
"value": "7",
"label": "1 week"
},
{
"value": "14",
"label": "2 weeks"
}
]
}
]
}
{% endschema %}

0 Likes
UmairA
Shopify Partner
872 85 172

Hey there @BillyAzevedo,

From where did you got that code? and why do you believe it should work?

Need help with theme customization or to add a new feature? Hire me
Email: umairabbascs@gmail.com
WhatsApp: WhatsApp
Theme customization | Custom coding | Store Setup | SEO Audit | Speed Optimization | Tweaks & Bugs fixing
0 Likes
BillyAzevedo
New Member
2 0 0

Hey Umair,

This code came from Palo Alto theme, purchased on Shopify Store. I have been using on my store for a couple of months now, and it's been doing great on desktop.

However, my customers were messaging me about not seeing the popup on their phones, so I believe there must be a way to fix that...

 

Thanks for the reply

Cheers

0 Likes
jerm
New Member
2 0 0

I'm having the same issue with my website. The area to enter in the discount code isn't appearing on mobile, and I can't figure out how to get it to show. It works fine on a desktop browser.

 

Update: I did some more digging, and it's hidden in the order summary. Now I know what to tell my customers.

0 Likes
UmairA
Shopify Partner
872 85 172

Hey there @jerm,

Can you please include the URL of your store? I'll take a look for you before I can offer any solution/guidance. Thanks

Need help with theme customization or to add a new feature? Hire me
Email: umairabbascs@gmail.com
WhatsApp: WhatsApp
Theme customization | Custom coding | Store Setup | SEO Audit | Speed Optimization | Tweaks & Bugs fixing
jerm
New Member
2 0 0

Hello, @UmairA. My apologies. I received messages from customers saying that they couldn't find it on mobile, but it's actually hidden in the Show order summary section of the Information page (checkout process). I called this out in the Help section of my website (www.darkpawpets.com), so I think everything is good now.

0 Likes