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.
4

Please update code to this

{% if template == 'index' %}

{% else %}

{% endif %}
1 Like