Change Logo image based on current URL

Solved
Excursionist
21 0 10

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
Highlighted
Shopify Partner
1200 162 324

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 my solution helped you, please like and accept as solution!
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
Highlighted
Excursionist
21 0 10

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
Highlighted
Shopify Partner
1200 162 324

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 my solution helped you, please like and accept as solution!
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
Highlighted
Excursionist
21 0 10

image (1).png

0 Likes
Highlighted
Shopify Partner
1200 162 324

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 my solution helped you, please like and accept as solution!
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
Highlighted
Excursionist
21 0 10
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
Highlighted

Success.

Shopify Partner
1200 162 324

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 my solution helped you, please like and accept as solution!
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
Highlighted
Excursionist
21 0 10

thank you so much for your help and fast replies

0 Likes
Highlighted
Shopify Partner
1200 162 324

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 my solution helped you, please like and accept as solution!
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