Solved

Different logo on different pages

obito_uchiha01
Excursionist
46 0 4

How can i assign different logo on different pages, currently home page logo is visible on all the pages:
Logo"MISA" is of golden color and its an image

Screenshot 2023-11-30 at 12.17.00 PM.png

I want to show different logo on collection page:

Screenshot 2023-11-30 at 12.16.46 PM.png

here the logo is of different color
how can i achieve this??

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
7027 1327 1354

This is an accepted solution.

Go to your Online store > Themes > Edit code > open theme.liquid file, add below code after <head> tag

 

{% if template != 'index' %}
<style>
.header__heading-logo-wrapper {
background-image: url('https://community.shopify.com/c/image/serverpage/image-id/391477iF810B6FEFF7C2AC8');
background-size: cover;
background-position: center;
background-repeat: none;
}
.header__heading-logo-wrapper img { opacity: 0; }
</style>
{% endif %}

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 14 (14)

New_Dev
Shopify Partner
44 5 1

check this anwser in old post it may help you 

 

Solved: Different logo on specific pages - Shopify Community

If my feedback was useful, a Like would be greatly appreciated.

If my solution solves the problem, please Mark it as Solution!

Best Regards,
New_Dev

Abdosamer
Shopify Partner
821 146 161

Hi @obito_uchiha01 , can you share your store url and what page do you want to change the logo on?

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio
obito_uchiha01
Excursionist
46 0 4

url - https://misajewels.com/
password - misajewels
different logo to be visible on all the pages apart from home page

Abdosamer
Shopify Partner
821 146 161

@obito_uchiha01 , the password is incorrect.

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio
obito_uchiha01
Excursionist
46 0 4

jewelsmisa

 

Abdosamer
Shopify Partner
821 146 161

@obito_uchiha01 , so you want the logo to be hidden in home page?

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio

Dan-From-Ryviu
Shopify Partner
7027 1327 1354

Do you wan to appear different logo on collection page only? Please send me that logo version so I can give you the code

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

obito_uchiha01
Excursionist
46 0 4

logo2.png
this is the logo i want to be visible on all the pages apart from home page

 

Dan-From-Ryviu
Shopify Partner
7027 1327 1354

Please provide password protected of your store 

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

obito_uchiha01
Excursionist
46 0 4

url - https://misajewels.com/
Password - jewelsmisa

Dan-From-Ryviu
Shopify Partner
7027 1327 1354

This is an accepted solution.

Go to your Online store > Themes > Edit code > open theme.liquid file, add below code after <head> tag

 

{% if template != 'index' %}
<style>
.header__heading-logo-wrapper {
background-image: url('https://community.shopify.com/c/image/serverpage/image-id/391477iF810B6FEFF7C2AC8');
background-size: cover;
background-position: center;
background-repeat: none;
}
.header__heading-logo-wrapper img { opacity: 0; }
</style>
{% endif %}

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

websensepro
Shopify Partner
873 117 126

Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag.

 

 

 

  <script>
    document.addEventListener("DOMContentLoaded", function() {
        var logoImage = document.querySelector('.header__heading-logo');
        var currentPageURL = window.location.href;

        // Function to change the logo based on the page URL
        function changeLogo() {
           if (currentPageURL === "https://developmenthuzaifa.myshopify.com/" || currentPageURL === "https://developmenthuzaifa.myshopify.com") {
console.log("wprking 1")
      var logoImage = document.querySelector('.header__heading-logo-wrapper');
               logoImage.innerHTML = '<img src="https://cdn.shopify.com/s/files/1/0696/7358/2626/files/original-134c5f7eebc42c672529e5542bb34d22.jpg?v=1700205999" ">';
} else if (currentPageURL === "https://developmenthuzaifa.myshopify.com/pages/contact" || currentPageURL === "https://developmenthuzaifa.myshopify.com/pages/contact/") {
console.log("wprking 2")
    var logoImage = document.querySelector('.header__heading-logo-wrapper');
              logoImage.innerHTML = '<img src="https://cdn.shopify.com/s/files/1/0696/7358/2626/files/original-134c5f7eebc42c672529e5542bb34d22.jpg?v=1700205999" ">';
             
}
} 

        changeLogo();
    });
</script>

 

 

 

 

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
websensepro
Shopify Partner
873 117 126

i very Difficult to understand i will clear you

first you have to change URL copy URL of the page where you have change the logo

websensepro_1-1701330868155.png

 

and then you have to add image what you want

 

websensepro_2-1701330959460.png

 

 

 

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

BBE
New Member
10 0 0

Hello I wanted to do the same thing and found your solution. I used the solution that you sent and it worked BUT now it is on each page except for the home page but i do not want that. I only want the updated logo to show on one page. Can you please help?