Page header code injection in product pages

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!

Product detail page or shop page? Also, can you post the code here?

 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;
    }

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;
}

It looks like is working perfectly! Thank you very much!  🙂 🙂 

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.

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.

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?

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