Shopify themes, liquid, logos, and UX
Hello, good evening!
I just need assistance regarding the product page Width, how can I make it full Width similar to this (First image)
1st Image
This is the current look ( 2nd Image)
2nd Image
This is the store and the sample product page - https://valiantactiveclothing.com/products/the-ivory-set
Please assist.
Thank you so much!
Solved! Go to the solution
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>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
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.
Thank you, I have another request
Would you be able to customized it like this? A smaller Product information column
This is their website - https://www.oneractive.com/products/effortless-seamless-leggings-blackberry-purple?nosto=frontpage-n...
Thank you!
Hi @Mabinibooks
Please share your store URL and password.
So that I will check and let you know the exact solution here.
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!
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>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Thank you, it worked, I have another request
Would you be able to customized it like this? A smaller Product information column
This is their website - https://www.oneractive.com/products/effortless-seamless-leggings-blackberry-purple?nosto=frontpage-n...
Thank you!
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>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
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
Hi @Mabinibooks
Would you mind to share your Store URL website? with password if its unpublish. Thanks!
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
This is their website - https://www.oneractive.com/products/effortless-seamless-leggings-blackberry-purple?nosto=frontpage-n...
Thank you!
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024