Make the size of Product Page Full Width with sample

Solved

Make the size of Product Page Full Width with sample

Mabinibooks
Shopify Partner
64 0 26

 Hello, good evening!

I just need assistance regarding the product page Width, how can I make it full Width similar to this (First image)

Mabinibooks_0-1728555350313.png

1st Image


This is the current look ( 2nd Image)

Mabinibooks_1-1728555385015.png

2nd Image

This is the store and the sample product page - https://valiantactiveclothing.com/products/the-ivory-set

Please assist.

Thank you so much!

Accepted Solution (1)
Tech_Coding
Shopify Partner
378 105 89

This is an accepted solution.

Hello @Mabinibooks 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  product-info .page-width {
      max-width: 100% !important;
      padding: 0 !important;
  }
</style>

Tech_Coding_0-1728557461040.png

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.

View solution in original post

Replies 10 (10)

rajweb
Shopify Partner
211 16 13

Hey @Mabinibooks ,

Add CSS for full width: You can add a custom CSS rule to make the product page full width. Open the theme.scss.liquid or theme.css file (usually located under the Assets folder), and add the following CSS at the bottom:

 

.product-page-container {
   max-width: 100% !important;
   padding: 0 !important;
   margin: 0 auto !important;
}

.product-template__container {
   width: 100% !important;
   max-width: 100% !important;
   padding: 0 !important;
}

 

Save the changes and preview your product page to ensure the full-width design is working.

 

If your theme is structured differently, let me know and I can guide you further.

 
 
-Need a Shopify developer?
https://rajatweb.dev/
Email: [email protected]
Mabinibooks
Shopify Partner
64 0 26

Thank you, I have another request

Would you be able to customized it like this? A smaller Product information column

Mabinibooks_0-1728558585350.png

 

This is their website - https://www.oneractive.com/products/effortless-seamless-leggings-blackberry-purple?nosto=frontpage-n...

Thank you!

ZestardTech
Shopify Partner
5833 1058 1396

Hi @Mabinibooks 

Please share your store URL and password.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: [email protected]
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Mabinibooks
Shopify Partner
64 0 26

Hello, thanks for responding. Sorry I was not able to include it

This is the store and the sample product page - https://valiantactiveclothing.com/products/the-ivory-set

Thank you!

Tech_Coding
Shopify Partner
378 105 89

This is an accepted solution.

Hello @Mabinibooks 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  product-info .page-width {
      max-width: 100% !important;
      padding: 0 !important;
  }
</style>

Tech_Coding_0-1728557461040.png

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
Mabinibooks
Shopify Partner
64 0 26

Thank you, it worked, I have another request

Would you be able to customized it like this? A smaller Product information column

Mabinibooks_0-1728558437954.png

This is their website - https://www.oneractive.com/products/effortless-seamless-leggings-blackberry-purple?nosto=frontpage-n...

Thank you!

Tech_Coding
Shopify Partner
378 105 89

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media only screen and (max-width: 1370px) and (min-width: 992px) {
   .oa-single-product_image-container.oa-single-product_image-container.visible-md.visible-lg {
      flex: 2 !important;
      max-width: 76% !important;
  }
  #oa-fashion .oa-single-product_meta-container {
      margin-left: 10px !important;
      flex: 2 !important;
      max-width: 23% !important;
  }
}

 .oa-content .container {
    width: 100% !important;
  }
</style>

Tech_Coding_0-1728561402546.png

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
Mabinibooks
Shopify Partner
64 0 26

Thanks for responding again, this time it did not work.

I may have confused you, I mean I want the code to be implemented on this product page - https://valiantactiveclothing.com/products/the-ivory-set


Made4uo-Ribe
Shopify Partner
8758 2094 2568

Hi @Mabinibooks 

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
Mabinibooks
Shopify Partner
64 0 26

Hello, thanks for responding. Sorry I was not able to include it

This is the store and the sample product page - https://valiantactiveclothing.com/products/the-ivory-set

it was already fixed now, but I have another request

I have another request

Would you be able to customized it like this? A smaller Product information column

Mabinibooks_1-1728558676897.png

 

 

This is their website - https://www.oneractive.com/products/effortless-seamless-leggings-blackberry-purple?nosto=frontpage-n...



Thank you!