Jump to content

How to change the logo on product detail pages

Recommended Posts

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

Lucy O'Reilly
Designs For Growth Ltd
www.designsforgrowth.ie

Link to comment
  • Replies 4
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

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  ⬇️

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
  • 1 year later...
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.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.