Jump to content

Replace logo image only on SHOP page and for all products that fall under it

Recommended Posts

Hi! I want to replace the logo on my page, but only on one of my shop pages (and all of the product listings that fall under it) This code I got from a helpful user on here earlier, overrides the logo on the shop page as desired, but the original logo is still visible when you click into any of the product pages.


  /* Hide current logo on shop page */
    #collection-5d41998789ce3b0001e47211 .logo-image img {
        visibility: hidden;
    }
    /* Insert new logo on shop page */
    body#collection-5d41998789ce3b0001e47211 .logo-image a {
        background-image: url(https://static1.squarespace.com/static/5bf1b4f6f8370a9863e71c8d/t/5d4525d5b0f59800018daf77/1564812757406/destashlogo_2_original.png);
        display: block;
        width: 325px;
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        margin-top: 0px;
        margin-bottom: 0px;
    }


page I want the changes to effect: www.lexadazy.com/dazydestash (and all of the product listings that fall underneath this shop page)

Anything I can alter in this code to make it function under all of the product listings too?

Thanks so much!

Link to comment
  • Replies 13
  • Views 622
  • Created
  • Last Reply

@lexcamille


/* Hide current logo on Product Listing Pages */
.collection-type-products.view-list .logo-image a {
   visibility: hidden;
}
.collection-type-products.view-list .logo-image img {
   display: none;
}
/* Insert New Logo on Product Listing Pages */
.collection-type-products.view-list .logo-image a:after {
   visibility: visible;
   content: "";
   background-image: url(https://image.flaticon.com/icons/svg/1279/1279537.svg);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center center;
   width: 200px;
   height: 100px;
   display: inline-block;
   margin-bottom: 10px;
}




Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Sorry that didn't work for me either :( This code overrides my uploaded logo on all pages (except the product listing pages)

I was hoping to keep my original, uploaded logo on my main shop page (www.lexadazy.com/shop) and all of its sub-pages.

I want my secondary logo to only appear on my 2nd shop page (www.lexadazy.com/dazydestash) and all of the product listings underneath it. When I applied this code to my Custom CSS section, the original logo is still there when I click into the product listings.

Link to comment

Nope sorry I didn't specify- the categories retain the logo and look great (with the previous code you gave me) but Individual product pages still show the original logo.. example:

https://www.lexadazy.com/dazydestash/13x18mm-mother-of-pearl-oval-cab-1-pc

The code you gave me earlier, is the code I am using currently because it displays the correct logo's on the correct shop pages (jewelry [lexadazy logo] vs. dazydestash [dazydestash logo])

Link to comment

@lexcamille It will need a lot of CSS.Products belonging to a certain product category will have different CSS ID/Class. You will need to write CSS for all those categories, it seems lot of code, but that is the easiest and only way I think now.

I will send in the next few hours.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@lexcamille I checked. The way I said above seems impossible. You will need to write CSS manually, if you have 100 products, it will need a few dozen CSS lines

eg. product01-id, product02-id, product03 id,.... {.logo-image img {CSS}}

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.