Motion theme product page customization page width - urgent

Store Design
, , , , , ,
1

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:

Sivadarshan_0-1745297242187.jpeg
Sivadarshan_0-1745297242187.jpeg1280×720 65.2 KB

Now it is like this:

Sivadarshan_1-1745297269575.jpeg
Sivadarshan_1-1745297269575.jpeg1280×720 70 KB

2 Likes
2

Hello @Sivadarshan ,

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

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
.page-width {
    max-width: 1300px !important;
}

ZestardTech_0-1745302304214.png
ZestardTech_0-1745302304214.png1916×851 200 KB

Let me know if you need further assistance!

3

@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!

4

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

5

@vm-web Sorry the code is not working

6

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

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

Hi @Sivadarshan ,

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

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate theme. liquid and paste the following code at the bottom of the tag:
{% if template == 'product' %}

{% endif %}

Change the template name according to your product page template.

8

@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

1 Like
9

Please update the code.

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

@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.

11

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