Motion theme product page customization page width - urgent

Sivadarshan · ‎04-22-2025

For my Motion theme website, I'd like to customize the product page to add extra padding to the product image and its contents, but only for desktop view. I've attached a reference image showing the desired design.

website: https://www.taramajeans.com/

Reference Image:

Now it is like this:

Dan-From-Ryviu · ‎04-22-2025

Please update the code.

.template-product .product-section .page-width { max-width: 1300px !important; }

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

ZestardTech · ‎04-22-2025

Hello @Sivadarshan ,

Here are the steps to apply the necessary changes in your Shopify store:

In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
Locate Asset > base.css and paste the following code at the bottom of the file:

.page-width {
    max-width: 1300px !important;
}

Let me know if you need further assistance!

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

Sivadarshan · ‎04-22-2025

@ZestardTech Thanks for the code, but I Need to make like that only in product page

ZestardTech · ‎04-22-2025

Hi @Sivadarshan ,

Here are the steps to apply the necessary changes in your Shopify store:

In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
Locate theme. liquid and paste the following code at the bottom of the <body> tag:

{% if template == 'product' %}
<style>
.page-width {
    max-width: 1300px !important;
}
</style>
{% endif %}

Change the template name according to your product page template.

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

Sivadarshan · ‎04-22-2025

@ZestardTech I've used this but the entire page is going to 1300px including header, review section, footer and recently bought section, But I want to customize only the product image and product content.

ZestardTech · ‎04-22-2025

You can Add below given code inside the style tag in above given solution, It will work for sure.

.product-section .page-width {
max-width: 1300px !important;
}

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

vm-web · ‎04-22-2025

@Sivadarshan

Please add the following code to your assets/theme.css file at the bottom of the file.

.template-product .page-width {
    width: 100% !important;
    max-width: 1300px !important;
    padding: 0 20px;
}

Thanks!

If helpful then please Like and Accept Solution. | Email: vickyzilpe@gmail.com

Sivadarshan · ‎04-22-2025

@vm-web Sorry the code is not working

Dan-From-Ryviu · ‎04-22-2025

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings.

.template-product .page-width { max-width: 1300px !important; }

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Sivadarshan · ‎04-22-2025

@Dan-From-Ryviu It's working but the entire page like header, reviews, recently bought together etc... is gone to 1300px, but I want only the product image and content to 1300px

Dan-From-Ryviu · ‎04-22-2025

Please update the code.

.template-product .product-section .page-width { max-width: 1300px !important; }

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Motion theme product page customization page width - urgent

Motion theme product page customization page width - urgent

Community Blog Articles