Change Logo image based on current URL

Solved
Highlighted
New Member
9 0 0

I need help changing the logo based on the URL, I need space for 7 variables.

 

  1. If URL contains "A" > then show imageurl1.png
  2. If URL contains "B" > then show imageurl2.png
  3. If URL contains "C" > then show imageurl3.png
  4. If URL contains "D" > then show imageurl4.png
  5. If URL contains "E" > then show imageurl5.png
  6. If URL contains "F" > then show imageurl6.png
  7. If URL contains "G" > then show imageurl7.png
0 Likes
Astronaut
955 116 221

Well you can't really grab the whole url with liquid, but you can construct it based off of some conditions, like checking which template you're on and appending it to the string:

 

{% assign url = shop.url %}
{% if template == "page" %}
{% assign url = url | append: page.url %}
{% elsif template == "collection" %}
{% assign url = url | append: collection.url %}
{% endif %}

// If you're on a page it would output https://your-shopify-site.com/pages/contact
// If you're on a collectionit would output https://your-shopify-site.com/collections/all

Then after that you could run another condition:

 

{% if url contains 'A' %}
{% assign img_src="/path-to-your-A-image.jpg" %}
{% elsif  url contains 'B' %}
{% assign img_src="/path-to-your-B-image.jpg" %}
{% endif %}

<img src="{{ img_src }}">
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
9 0 0

would this affect the way the visitor views the website or analytics by appending URLS ?

 

I also was wondering perhaps its just easier to accomplish this with jquery rather than liquid.

I'm open to suggestions.

0 Likes
Astronaut
955 116 221

No it shouldn't affect anything, you're just constructing a string based off of already existing information, you aren't actually modifying the url or anything. It might be easier with jquery since you can always get the exact url and use indexOf to see if it contains what you're looking for. Problem there is that jQuery loads after HTML, so there's a chance that people will see your initial logo, then see it change to whatever you set up through javascript because it will take a second or 2 to load. Liquid compiles before HTML so that would circumvent that issue. jQuerywould be like:

 

let url = location.href;
var src;
if (url.indexOf('A') != -1){
src="/path-to-your-A-image.jpg";
}else if(url.indexOf('B') != -1){
src="/path-to-your-B-image.jpg";
}
$('.your-logo-class').attr('src', src);

I would see if you can do it with liquid first, and if that proves to be too much of an issue just try it out with jquery

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
9 0 0

image (1).png

0 Likes
Astronaut
955 116 221

Yeah, but you should cover all of your bases with the previous part to. Are you only changing the logo on different "pages" or are you going to be switching it on the cart, search, blog page, article page, etc?  

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
9 0 0
This would only apply to different pages.
The cart/blog/search/articles etc can all resolve to the main logo or default logo.
0 Likes

Success.

Astronaut
955 116 221

Ah okay, then you really only need the first condition if you're just doing it on pages. And yeah just copy and paste for as many different keywords that you need to check and assign them their image path associated with the keyword.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
New Member
9 0 0

thank you so much for your help and fast replies

0 Likes
Astronaut
955 116 221

No problem, if you have any other questions you can send me a direct message on here but you have to enable messaging in your profile.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes