I need help changing the logo based on the URL, I need space for 7 variables.
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 }}">
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.
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
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?
This would only apply to different pages.
The cart/blog/search/articles etc can all resolve to the main logo or default logo.
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.
thank you so much for your help and fast replies
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.
Don’t mean to kick up an old thread but this seems to only work on product detail pages and not regular pages where the URL contains keywords to trigger specific logo images.
On a similar note, does anybody know if it’s possible to change the store logo and perhaps a home page banner if a certain URL parameter exists?
For example:
www.mysite.com - normal Shopify store logo for that website
www.mysite.com?partnerID=Acme - normal Shopify store logo for that website
Upon landing on www.mysite.com?partnerID=Acme - the Acme logo would be displayed instead of the normal shop logo.
