How to change the logo on product detail pages

Hi,

I want to change the logo on a shop page to a dark version, but I only want it implemented on the individual product detail pages, not the main shop page.

The page url is https://interiors-atelier.squarespace.com/shop and the password is IA2023

The code I was going to use in the page header is below, but it's affecting the entire shop page. I just want the individual product pages to show the alternative logo.

<style> 
div.header-title-logo a {
content:url("//static1.squarespace.com/static/63e2412469a5643c74aa9ea9/t/63e51699af1ea54d58c5cf71/1675957913529/Interiors+Atelier+Colour+w%3ATagline.png") !important;     
max-width: 290px;
  max-height: 700px;
margin-left: auto;
margin-right: auto;
}
</style>

Thanks in advance,

Lucy

1 hour ago, LucyDesigns said:

I want to change the logo on a shop page to a dark version, but I only want it implemented on the individual product detail pages, not the main shop page.

Hi Lucy

To limit the CSS to the Product Detail Pages (PDPs) and not the Product List Page, you can prefix your CSS with the collection class - in this case ".collection-63e24150f018f6216e17f9a9". This collection class will only appear on PDPs for this store. 

For example:

.collection-63e24150f018f6216e17f9a9 div.header-title-logo a {
  content:url("//static1.squarespace.com/static/63e2412469a5643c74aa9ea9/t/63e51699af1ea54d58c5cf71/1675957913529/Interiors+Atelier+Colour+w%3ATagline.png") !important;     
max-width: 290px;
  max-height: 700px;
  margin-left: auto;
  margin-right: auto;
}

Did this help? Please give feedback by clicking an icon below  ⬇️

Thanks very much, works perfectly. I did find code to invert the logo colour, but this is better. Thank you 🙏🏻

I used the same code and it did achieve changing the logo on my product details page, but it still also changed it on the shop page. Any ideas?

14 hours ago, jesspetro said:

I used the same code and it did achieve changing the logo on my product details page, but it still also changed it on the shop page.

To allow us to take a look, please ensure you've added the CSS and then share the URL of your page.

Hello, I'm also trying to change the logo on my product pages only. I'm having issues locating the collection id for my shop. The URL is www.wrenandgordon.com. Password: Maisy.

I tried this, but it's the ID# isn't right, it's just for the section of the product, not the header nav.

 section[data-section-id="66957536bb31c4253a56ab2f"] div.header-title-logo a {

content:url("///static1.squarespace.com/static/669574953815b51e3efd6dbc/t/66982c016fd9bc6c55c214af/1721248770202/WrenAndGordon_Logo1_Horizontal_Black.png") !important;     

 max-width: 290px;

  max-height: 700px;

  margin-left: auto;

  margin-right: auto;

}

Thanks in advance for the help!

On 7/22/2024 at 10:07 PM, jdunc said:

Hello, I'm also trying to change the logo on my product pages only. I'm having issues locating the collection id for my shop. The URL is www.wrenandgordon.com. Password: Maisy.

I tried this, but it's the ID# isn't right, it's just for the section of the product, not the header nav.

 section[data-section-id="66957536bb31c4253a56ab2f"] div.header-title-logo a {

content:url("///static1.squarespace.com/static/669574953815b51e3efd6dbc/t/66982c016fd9bc6c55c214af/1721248770202/WrenAndGordon_Logo1_Horizontal_Black.png") !important;     

 max-width: 290px;

  max-height: 700px;

  margin-left: auto;

  margin-right: auto;

}

Thanks in advance for the help!

With Product (Shop, Category, Detail Product), use this CSS code

body[class*="type-products"] header#header img {
    content: url(https://images.squarespace-cdn.com/content/v1/669574953815b51e3efd6dbc/a3adc94f-9e81-451e-86d7-6ce20a2b546c/WrenAndGordon_Logo1_Horizontal_White.png?format=1500w);
}

On 7/25/2024 at 3:13 AM, tuanphan said:

With Product (Shop, Category, Detail Product), use this CSS code

body[class*="type-products"] header#header img {
    content: url(https://images.squarespace-cdn.com/content/v1/669574953815b51e3efd6dbc/a3adc94f-9e81-451e-86d7-6ce20a2b546c/WrenAndGordon_Logo1_Horizontal_White.png?format=1500w);
}

 

Thanks, @tuanphan . That worked, but is there a way to make the logo on the products page different from that on the shop page? This code changed both. 

On 8/13/2024 at 1:01 AM, jdunc said:

Thanks, @tuanphan . That worked, but is there a way to make the logo on the products page different from that on the shop page? This code changed both. 

Use this code for Product detail page

body[class*="type-products"].view-item header#header img {
    content: url(https://images.squarespace-cdn.com/content/v1/669574953815b51e3efd6dbc/a3adc94f-9e81-451e-86d7-6ce20a2b546c/WrenAndGordon_Logo1_Horizontal_White.png?format=1500w);
}

.view-item will target product detail

.view-list will target list page

without .view-item/.view-list, it will target both