Alpi87 Posted May 16, 2020 Share Posted May 16, 2020 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
tuanphan Posted May 16, 2020 Share Posted May 16, 2020 Product detail page or shop page? Also, can you post the code here? 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
Alpi87 Posted May 17, 2020 Author Share Posted May 17, 2020 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; } Link to comment
tuanphan Posted May 17, 2020 Share Posted May 17, 2020 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
Alpi87 Posted May 18, 2020 Author Share Posted May 18, 2020 It looks like is working perfectly! Thank you very much! 🙂 🙂 Link to comment
Alpi87 Posted May 18, 2020 Author Share Posted May 18, 2020 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. Link to comment
tuanphan Posted May 20, 2020 Share Posted May 20, 2020 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
tuanphan Posted May 20, 2020 Share Posted May 20, 2020 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
tuanphan Posted May 25, 2020 Share Posted May 25, 2020 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.