Jump to content

Page header code injection in product pages

Recommended Posts

Hi all! I would like to introduce some code in my product pages (not where all my products are displayed but in each product page). I usually go to the page I want to tweak and click in Page settings>Advance>Page header code injection (the changes here only applies to this page). If I want to change by instance, the logo on the product pages, How can I do it?

Thanks!

Link to comment
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

 Thanks for the reply.  

Attached are the screenshots of the product page I want to change, and then the result with the changes. The problem I have is that to modified that page, the only place to write the code is in Design> custom CSS, and this affects all the pages in the website, when I only want to change all the product pages.

Basically the change I want to introduce is to set a certain width to the main content (only in product pages) so when the width of the browser decreases, the content does not need to adapt and I can control the behavior better.

This is the code:

.Header-inner, .tweak-site-width-option-full-background .Intro-content, .tweak-site-width-option-full-background .Main-content, .tweak-site-width-option-full-background .Footer-inner, .tweak-site-width-option-full-background .Index-page-content {
    max-width: 900px;
    }

 

product_page.jpg.23275f4d629e76b088b8b594d09be50c.jpgproduct_page_modified.jpg.797c064da0d2f4bcd40ad957fc325829.jpg

Link to comment
7 hours ago, Alpi87 said:

 

Can you share link to product page?

or try adding this to Home > Design > Custom CSS

.collection-type-products.view-item .Main-content {
	max-width: 900px;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Hi! I have followed your instructions. However I have insert some "product additional information". This information displays at the bottom of the page, right above the footer. I would like this information to not be affected by the code before, so it occupies the full width of the browser.

Is there any way this can be achieved?

Regards.

test1.thumb.jpg.be21df5c7e5a7ad5cd62c3b3ff8f26bc.jpg

test2.thumb.jpg.f5bcf1cad6b9130d35c9f8be48cfa7b8.jpg

Link to comment
On 5/18/2020 at 8:07 PM, Alpi87 said:

Hi! I have followed your instructions. However I have insert some "product additional information". This information displays at the bottom of the page, right above the footer. I would like this information to not be affected by the code before, so it occupies the full width of the browser.

Is there any way this can be achieved?

Regards

 

missing your question. Have you solved yet? If no, I will check again.

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
7 minutes ago, Aesthetic_Collab said:

I'm so glad I found this thread! I've been trying to figure this out thank you! Does anyone also know the correct code for having the product item detail image fullscreen above the details and pricing excerpt? Please see screenshot for reference. And then how to center the pricing and details below the image? 

Can you share link to product page?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 5/22/2020 at 12:43 AM, Aesthetic_Collab said:

I can't share the page right now. I am privately building the site. I am just asking in general- I have thoroughly searched for this info and can't find any codes or direction-  I can't figure out the correct code, I'm still learning the ropes of more complex CSS. I think it would be helpful to others to know how to customize the product detail view since the default product view is pretty limited. Thank you for your help and any info! I have found so many threads where your expertise has saved me and info you have provided was exactly what I was searching for, you are truly prolific here in the forum! I appreciate you!  @tuanphan 

When you want to share, you can setup password & share url

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.