Jump to content

HELP CHANGING HEADER & FOOTER ON PRODUCT PAGES

Recommended Posts

Hi 

I need some help with custom code please

On my homepage my header & footer are white with black text & logo - happy with this

On my product pages I'd like to make the header and footer pink and the logo & text in the header white

https://thelittlestitchclub.co.uk/

https://thelittlestitchclub.co.uk/shop-all-cross-stitch-kits/new-stuff

I've tried the code suggestions on the forum so far... I managed to change the footer to pink but then it also changed on my homepage and can't for the life of me get the header to change at all!

Thanks

Link to comment

Try this to change the background color, add to Header Code Injection in the store page Advanced settings:

<style>
.header .header-announcement-bar-wrapper .header-border {
    background: hsla( 15.43,77.78%,91.18% ,1);
}
</style>

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Did you put the code in the store page settings code injection or the global header code injection?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
1 minute ago, LITTLESTITCHCLUB said:

How do I get to store page settings please?

Go to the pages menu, click on the gear icon next to the store page to get to the page settings, then go to advanced and code injection.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

This should cover move of your requests:

<style>
  .header .header-announcement-bar-wrapper .header-border {
    background: hsla( 15.43,77.78%,91.18% ,1);
  }
  .header-title-logo img {
    filter: invert(1);
  }
  body:not(.header--menu-open) [data-header-style="solid"].header .header-nav-wrapper a {
    color:#ffffff !important;
  }
  body:not(.header--menu-open) [data-header-style="solid"].header .header-actions .icon--fill svg {
    fill:#ffffff;
  }
  body:not(.header--menu-open) [data-header-style="solid"].header .header-icon:not(.header-icon-border-shape-none).header-icon-border-style-outline {
    color:#ffffff !important;
  }
  #footer-sections {
    .page-section .section-border {
      background-color: hsla( 15.43,77.78%,91.18% ,1);
    }
  }
</style>

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.