How to make my logo invertible on mobile as I scroll through the banner photo

Store Design
,

Topic summary

Goal: Make the mobile logo invert (switch color) only while overlapping the homepage slideshow banner, mirroring desktop behavior.

What happened:

  • A custom solution was suggested: add code to the Shopify theme.liquid file before .
  • After adding it, the logo inverted correctly, but on product pages (no slideshow) the logo initially appeared inverted and reverted only after scrolling.

Fix provided:

  • Update the implementation by wrapping the logic in a Liquid conditional so it only runs on the homepage:
    • Use a template check (e.g., {% if template == ‘index’ %} … {% endif %}).
    • This scopes the inversion effect to the home page with the slideshow; other pages keep the original logo at all times.

Notes:

  • Attachments (screenshots) illustrated the incorrect inversion on product pages.
  • Edits involved Shopify Liquid (theme.liquid) and a template condition targeting the index (homepage) template.

Outcome: The requester confirmed the update resolved the issue; discussion closed/resolved.

Summarized with AI on December 16. AI used: gpt-5.
1

Hello I would like to invert my logo on mobile the same way it inverts on desktop.

As you scroll through the initial banner (slideshow) photo

I cannot upload the inverted logo for mobile through the theme. is there a custom way to do so?

website: https://4bubs.com/

password: timo23

Thank you for all the help!

2

Hi @timo23

Please add this code to theme.liquid file, before in Online Store > Themes > Edit code then check and check again
1 Like
3

I have added your code, and it worked almost perfectly.

However for instance when I go to product, the logo at the start is inverted. Once i scroll down it changes to original.
Any option to have it original all the time on all the pages that do not have slideshow banner image on top.

So inverted logo is only active while in overlay of banner, otherwise it is always original logo.

Attaching photo for reference

IMG_2872.PNG
IMG_2872.PNG1170×2532 188 KB

IMG_2873.PNG
IMG_2873.PNG1170×2532 212 KB

4

Please update code to this

{% if template == 'index' %}

{% else %}

{% endif %}
1 Like
5

Thank you so much, greatly appreciated!

1 Like
6

You are very welcome!