Facing issues with an app for Whatsapp widget on my store

[swatisinghal7]

I have integrated the app https://apps.shopify.com/whatsapp-chat-button to add a Whatsapp chat widget to my store & also for Whatsapp order updates/ abandoned cart messages etc. While these features are working, I am facing below issues:

1. The app has a greeting widget which is overlapping my Website Header. Please check screenshot_1. On scrolling down, the header goes away.

2. On clicking the agent name “Natasha”, an opt in window opens up, which too is overlapping my Website Header. Please check screenshot_2. This also becomes fine on scrolling down.

Pls help me resolve this issue. My store is naturetrailindia.com

[nyqropi]

1. Log in to your Shopify store and go to Online Store > Themes. 2. Click on the “Actions” button next to your current theme, and select “Edit code”. 3. Locate the “theme.liquid” file in the left sidebar and click on it to open the file. 4. Look for the

tag in the code. This is the section of the code that creates your website’s header. 5. Add the following CSS code just before the closing tag:

.wh-widget-greeting{ margin-top: 80px !important; } .wh-widget-greeting img{ height: 40px !important; width: 40px !important; } .wh-widget-container div{ border-radius: 5px; }

This code should adjust the positioning of the greeting widget and agent name popup. You can
adjust the value of margin-top as per your need.
6. Save the changes and refresh your website to see if the issue is resolved.
If you still face any issues, you can try contacting the app developer or refer to their documentation
for more information.

[swatisinghal7]

Look for which tag in theme.liquid file? Can you please tell me?

[harivishwakarma]

Hallo @swatisinghal7

You can add code by following these steps to change

1. Go to Online Store → Theme → Edit code > assets > base.css

paste below code at bottom(base.css)

**.wh-widget-greeting{**
**margin-top: 80px !important;**
**}**
**.wh-widget-greeting img{**
**height: 40px !important;**
**width: 40px !important;**
**}**
**.wh-widget-container div{**
**border-radius: 5px;**
**}**

If you require any further information, feel free to contact me.

Best regards,

[swatisinghal7]

Hi, I don’t have a base.css file in my assets folder. I am using Showcase theme. I added your code to styles.css.liquid file in the assets folder, but it’s still giving the same issue.Pls help

[harivishwakarma]

@swatisinghal7

paste below code at theme.liquid above tag

.wh-widget-greeting{
margin-top: 80px !important;
}
.wh-widget-greeting img{
height: 40px !important;
width: 40px !important;
}
.wh-widget-container div{
border-radius: 5px;
}

[swatisinghal7]

Hi,

I did the same. But still giving the same issue. The widget is going behind the header. You can check on mobile. This issue is coming only on mobile, on Desktop, it works fine

[harivishwakarma]

@swatisinghal7

I have checked it. no such problem now.see screenshot

[swatisinghal7]

The issue is still there. I removed the code though, as it wasn’t working, pls see screenshot. Even with the code it’s coming like this only. Where are you checking? The issue comes only on Mobile not desktop

[swatisinghal7]

That code was to be pasted just before the ending of head tag right?. Should I share my theme.liquid file?

[harivishwakarma]

yes

[swatisinghal7]

Please find the edited theme.liquid

{% render ‘head-tag’ %}
{%- assign base_font = settings.type_base_font -%}
{%- assign base_font_medium = base_font | font_modify: ‘weight’, ‘500’ -%}
{%- assign base_font_semibold = base_font | font_modify: ‘weight’, ‘600’ -%}
{%- if base_font_medium -%}{%- endif -%}
{%- if base_font_semibold -%}{%- endif -%}

{{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} – {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} – {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} – {{ shop.name }}{% endunless %}

{% render ‘social-meta-tags’ %}

{% style %}
:root {
–viewport-height: 100vh;
–viewport-height-first-section: 100vh;
–nav-height: 0;
}
{% endstyle %}

{{ ‘styles.css’ | asset_url | stylesheet_tag }}

{{ content_for_header }}

.wh-widget-greeting{ margin-top: 80px !important; } .wh-widget-greeting img{ height: 40px !important; width: 40px !important; } .wh-widget-container div{ border-radius: 5px; } {% if settings.animation_enabled_mobile %}
{% endif %}

{% if settings.animation_enabled_desktop %}

{% endif %}

{{ ‘general.accessibility_labels.skip_to_content’ | t }}

{% section ‘header’ %}

{{ content_for_layout }}

{%- if template contains ‘faq’ -%}

{%- endif -%}

{% section ‘popup’ %}
{% section ‘footer’ %}

×

{% comment %} Remove the following line to search everything, not just products {% endcomment %}

{% render 'svg-rarrow-long' %}

{% if settings.animation_loading %}

{% if settings.animation_loading_image != blank %}

{% endif %}

{% if settings.animation_loading_message != blank %}

{{ settings.animation_loading_message }}

{% endif %}

{% endif %}

{% render ‘body-end-tag’ %}