Facing issues with an app for Whatsapp widget on my store

swatisinghal7
New Member
7 0 0

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

 

screenshot_2.jpegsreenshot_1.jpeg

 

Replies 11 (11)

nyqropi
Tourist
14 0 3

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:

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

 
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
New Member
7 0 0

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

harivishwakarma
Shopify Partner
322 46 54

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,

banned
swatisinghal7
New Member
7 0 0

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
Shopify Partner
322 46 54

@swatisinghal7 

paste below code at theme.liquid above </head> tag

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

banned
swatisinghal7
New Member
7 0 0

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
Shopify Partner
322 46 54

@swatisinghal7 

I have checked it. no such problem now.see screenshotScreenShot Tool -20230221113129.png

banned
swatisinghal7
New Member
7 0 0

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

57FAA093-3B94-4BA8-A128-845A6D634A83.png

swatisinghal7
New Member
7 0 0

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

harivishwakarma
Shopify Partner
322 46 54

yes

banned
swatisinghal7
New Member
7 0 0

Please find the edited theme.liquid

 

<!doctype html>
<html class="no-js" lang="{{ request.locale.iso_code }}">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-M3EJDV12CD"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'G-M3EJDV12CD');
</script>
<!-- Showcase 5.4.0 -->

<link rel="preload" href="{{ 'styles.css' | asset_url }}" as="style">

{% 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 -%}<link rel="preload" as="font" href="{{ base_font_medium | font_url }}" type="font/woff2" crossorigin>{%- endif -%}
{%- if base_font_semibold -%}<link rel="preload" as="font" href="{{ base_font_semibold | font_url }}" type="font/woff2" crossorigin>{%- endif -%}

<meta name="theme-color" content="{{ settings.col_btn_bg }}">

<title>
{{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} &ndash; {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} &ndash; {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless %}
</title>

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

<script>
document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
window.theme = window.theme || {};
{% if settings.currency_code_enabled %}
theme.money_format_with_code_preference = {{ shop.money_with_currency_format | json }};
{% else %}
theme.money_format_with_code_preference = {{ shop.money_format | json }};
{% endif %}
theme.money_format = {{ shop.money_format | json }};
theme.money_container = '.theme-money';
theme.strings = {
previous: {{ 'general.accessibility_labels.previous' | t | json }},
next: {{ 'general.accessibility_labels.next' | t | json }},
close: {{ 'general.accessibility_labels.close' | t | json }},
addressError: {{ 'map.errors.address_error' | t | json }},
addressNoResults: {{ 'map.errors.address_no_results' | t | json }},
addressQueryLimit: {{ 'map.errors.address_query_limit_html' | t | json }},
authError: {{ 'map.errors.auth_error' | t | json }},
back: {{ 'layout.navigation.back' | t | json }},
cartConfirmation: {{ 'cart.terms.confirmation' | t | json }},
loadMore: {{ 'general.accessibility_labels.load_more' | t | json }},
infiniteScrollNoMore: {{ 'collections.general.infinite_scroll_no_more' | t | json }},
priceNonExistent: {{ 'products.variant.non_existent' | t | json }},
buttonDefault: {{ 'products.product.add_to_cart' | t | json }},
buttonPreorder: {{ 'products.product.preorder' | t | json }},
buttonNoStock: {{ 'products.variant.out_of_stock' | t | json }},
buttonNoVariant: {{ 'products.variant.non_existent' | t | json }},
variantNoStock: {{ 'products.variant.no_stock' | t | json }},
unitPriceSeparator: {{ 'products.product.unit_price_separator' | t | json }},
colorBoxPrevious: {{ 'general.lightbox.previous' | t | json }},
colorBoxNext: {{ 'general.lightbox.next' | t | json }},
colorBoxClose: {{ 'general.lightbox.close' | t | json }},
navigateHome: {{ 'layout.navigation.home' | t | json }},
productAddingToCart: {{ 'products.product.adding_to_cart' | t | json }},
productAddedToCart: {{ 'products.product.added_to_cart' | t | json }},
popupWasAdded: {{ 'products.product.popup_was_added' | t | json }},
popupCheckout: {{ 'products.product.popup_checkout' | t | json }},
popupContinueShopping: {{ 'products.product.popup_continue_shopping' | t | json }},
onlyXLeft: {{ 'products.labels.only_x_left' | t: quantity: '[[ quantity ]]' | json }},
priceSoldOut: {{ 'products.labels.sold_out' | t | json }},
inventoryLowStock: {{ 'products.labels.low_stock' | t | json }},
inventoryInStock: {{ 'products.labels.in_stock' | t | json }},
loading: {{ 'products.listing.loading' | t | json }},
viewCart: {{ 'layout.cart_summary.cart' | t | json }},
page: {{ 'general.meta.page' | t | json }},
imageSlider: {{ 'general.slider.images' | t | json }},
clearAll: {{ 'collections.filtering.clear_all' | t | json }}
};
theme.routes = {
root_url: '{{ routes.root_url }}',
cart_url: '{{ routes.cart_url }}',
cart_add_url: '{{ routes.cart_add_url }}',
checkout: '/checkout'
};
theme.settings = {
animationEnabledDesktop: {{ settings.animation_enabled_desktop | json }},
animationEnabledMobile: {{ settings.animation_enabled_mobile | json }}
};

theme.checkViewportFillers = function(){
var toggleState = false;
var elPageContent = document.getElementById('page-content');
if(elPageContent) {
var elOverlapSection = elPageContent.querySelector('.header-overlap-section');
if (elOverlapSection) {
var padding = parseInt(getComputedStyle(elPageContent).getPropertyValue('padding-top'));
toggleState = ((Math.round(elOverlapSection.offsetTop) - padding) === 0);
}
}
if(toggleState) {
document.getElementsByTagName('body')[0].classList.add('header-section-overlap');
} else {
document.getElementsByTagName('body')[0].classList.remove('header-section-overlap');
}
};

theme.assessAltLogo = function(){
var elsOverlappers = document.querySelectorAll('.needs-alt-logo');
var useAltLogo = false;
if(elsOverlappers.length) {
var elSiteControl = document.querySelector('#site-control');
var elSiteControlInner = document.querySelector('#site-control .site-control__inner');
var headerMid = elSiteControlInner.offsetTop + elSiteControl.offsetTop + elSiteControlInner.offsetHeight / 2;
Array.prototype.forEach.call(elsOverlappers, function(el, i){
var thisTop = el.getBoundingClientRect().top;
var thisBottom = thisTop + el.offsetHeight;
if(headerMid > thisTop && headerMid < thisBottom) {
useAltLogo = true;
return false;
}
});
}
if(useAltLogo) {
document.getElementsByTagName('body')[0].classList.add('use-alt-logo');
} else {
document.getElementsByTagName('body')[0].classList.remove('use-alt-logo');
}
};
</script>
<style>
.wh-widget-greeting{
margin-top: 80px !important;
}
.wh-widget-greeting img{
height: 40px !important;
width: 40px !important;
}
.wh-widget-container div{
border-radius: 5px;
}
</style>
</head>

<body class="page-{{ page_title | handle }} {% if customer %}customer-logged-in {% endif %}template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }}{% if template.suffix != blank %} template-suffix-{{ template.suffix }}{% endif %}{% if template contains 'customers' %} template-customer-area{% endif %}{% if logo_html contains 'img' %} has-logo{% endif %} animation-speed-{{ settings.animation_speed }}"
{% if settings.animation_speed == "fast" %}data-cc-animate-timeout="0"{% endif %}>
{% if settings.animation_enabled_mobile %}
<script>
if(window.innerWidth < 768 && window.localStorage.getItem('is_first_visit') !== null) {
var pageFadedIn = false;
document.body.style.opacity = 0;

function fadeInPageMob(){
if(!pageFadedIn) {
document.body.classList.add("cc-animate-enabled");
document.body.style.transition = 'opacity 0.{% if settings.animation_speed == "fast" %}2{% else %}4{% endif %}s';
setTimeout(function () {
document.body.style.opacity = 1;
}, {% if settings.animation_speed == "fast" %}50{% else %}200{% endif %});
pageFadedIn = true;
}
}

window.addEventListener("load", fadeInPageMob);
setTimeout(fadeInPageMob, 3000);
}

window.addEventListener("pageshow", function(){
document.getElementById('cc-veil').classList.remove('-in');
});
</script>
{% endif %}

{% if settings.animation_enabled_desktop %}
<script>
if ('IntersectionObserver' in window) {
document.body.classList.add("cc-animate-enabled");
}

window.addEventListener("pageshow", function(){
document.getElementById('cc-veil').classList.remove('-in');
});
</script>
{% endif %}

<a class="skip-link visually-hidden" href="#page-content">{{ 'general.accessibility_labels.skip_to_content' | t }}</a>

{% section 'header' %}

<main id="page-content">
{{ content_for_layout }}

{%- if template contains 'faq' -%}
<aside class="faq-sidebar" id="faq-sidebar" data-cc-animate></aside>
{%- endif -%}
</main>

<script>
var firstSection = document.body.querySelector('#page-content .shopify-section:first-child');
if(firstSection) {
var firstBgSet = firstSection.querySelector('[data-bgset]');

if (firstBgSet) {
var bgSets = firstBgSet.dataset.bgset.split(',');
if(bgSets) {
for (var i = 0; i < bgSets.length; i++) {
var widthMatch = bgSets[i].match(/ [0-9]+w/g);
var heightMatch = bgSets[i].match(/ [0-9]+h/g);

if(widthMatch && heightMatch) {
var width = parseInt(widthMatch[0].replace('w', '').trim());
var height = parseInt(heightMatch[0].replace('h', '').trim());

if (width >= window.innerWidth && height >= window.innerHeight) {
firstBgSet.style.backgroundImage = "url('" + bgSets[i].trim().split(' ')[0] + "')";
firstBgSet.classList.remove('fade-in');
break;
}
}
}
}
} else if (firstSection.querySelector('[data-src]')) {
var firstDatasrc=firstSection.querySelector('[data-src]');
var widths = JSON.parse(firstDataSrc.dataset.widths);
for (var i = 0; i < widths.length; i++) {
var width = parseInt(widths[i]);
if (width >= window.innerWidth) {
firstDataSrc.setAttribute('src', firstDataSrc.dataset.src.replace('{width}', width));
firstDataSrc.classList.remove('fade-in');
break;
}
}
}
}
</script>

{% section 'popup' %}
{% section 'footer' %}

<!-- Search form -->
<div id="search-modal" class="theme-modal theme-modal--fullscreen" tabindex="-1">
<a href="#" data-modal-close class="modal-close">&times;</a>
<div class="inner">
<div class="container growth-area">
<form action="{{ routes.search_url }}" method="get" class="search-form" role="search">
{% comment %} Remove the following line to search everything, not just products {% endcomment %}
<input type="hidden" name="type" value="{{ settings.search_type }}" />
<input type="hidden" name="options[prefix]" value="last" />

<div class="inline-mini-form inline-mini-form--arrow">
<input type="text" name="q"
placeholder="{{ 'general.search.page_placeholder' | t }}"
class="focus-me"
value="{{ search.terms | escape }}"
aria-label="{{ 'general.search.input_label' | t | escape }}"
autocomplete="off" required />
<button class="compact no-hover" type="submit" aria-label="{{ 'general.search.search_button' | t | escape }}"
>{% render 'svg-rarrow-long' %}</button>
</div>
</form>
</div>
</div>
</div>

<div id="cc-veil" class="{% if settings.animation_loading %}cc-veil--animate{% endif %}">
{% if settings.animation_loading %}
<div class="cc-veil-loader cc-veil-loader--{{ settings.animation_loading_animation }}
{% if settings.animation_loading_message != blank and settings.animation_loading_image != blank %}cc-veil-loader--image-text{% endif %}
{% if settings.animation_loading_message == blank and settings.animation_loading_image == blank %}cc-veil-loader--blank{% endif %}">

{% if settings.animation_loading_image != blank %}
<img class="cc-veil-loader__image"
src="{{ settings.animation_loading_image | img_url: '500x500' }}"
alt="{{ settings.animation_loading_image.alt | escape }}"
width="{{ settings.animation_loading_image.width }}"
height="{{ settings.animation_loading_image.height }}">
{% endif %}

{% if settings.animation_loading_message != blank %}
<p class="cc-veil-loader__message">
{{ settings.animation_loading_message }}
</p>
{% endif %}
</div>
{% endif %}
</div>

<script>
//Eliminate a bit of CLS
document.documentElement.style.setProperty('--nav-height',
document.getElementById('site-control').clientHeight + "px");

//Calculate the viewport height
theme.calc100vh = function() {
var nav = document.getElementById('site-control');
document.documentElement.style.setProperty('--viewport-height-first-section',
`${(nav.dataset.opacity === 'opaque') ? window.innerHeight - nav.clientHeight : window.innerHeight}px`);
document.documentElement.style.setProperty('--viewport-height',
(nav.dataset.opacity.indexOf('opaque') > -1 && nav.dataset.positioning === "sticky") ? `calc(100vh - ${nav.clientHeight}px)` : "100vh");
}
theme.calc100vh();
</script>

<script src="{{ 'vendor.min.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>

{% render 'body-end-tag' %}
</body>
</html>