Transparent Logo Overlapping with Content + Alignment Issue (Screenshots Included)

Store Design
, , , , , ,
1

Hi everyone,

I’m having some issues with my store’s layout and could use some help. I’ve noticed that my transparent logo is overlapping with content as I scroll down the page, and I’m unsure how to fix it.

Additionally, I’m struggling with the alignment of two elements:

  • On the product page, I want to elevate the WhatsApp icon (in the bottom right) to match the height of the currency converter.
  • On the home page, I need the opposite: to lower the currency converter so it aligns with the WhatsApp icon at the bottom.

It’s important to note that the heights of these icons are different on the home page vs. the product page. I’ve attached two screenshots to give a clearer idea of what I mean.

I’d really appreciate any guidance on how to adjust these elements and fix the overlapping issue.

Thanks in advance for your help!

Kind Regards,
Ibrahim W.

Product Page
Product Page575×1280 74.7 KB

Home Page
Home Page575×1280 49.1 KB

2

Hi @

You can add this code to theme.liquid file, after in Online Store > Themes > Edit code to edit position of currency and whats app icons

{% if template == 'index' %}

{% endif %}
{%- if template.name contains 'product' -%}
.whatsapp-widget {
    bottom: 49px !important;
}

{%- endif -%}
3

Hi,
I’m sorry. I followed your instruction, I placed the above code under in theme.liquid file, but there seems to be no change.
I reccently changed my domain for the store, maybe it could due to that?
the original domain now is www.barakatcharger.com
Thank you so much for you response!
Kind Regards,
Ibrahm W.