How to make a product page / images less wide without making everything else wide - Debutify

Store Design
1

I made my entire store (ex. front page) is full width (1800px) wide as a clothing/fashion brand but my product page is way too wide to the point where you can’t even see the image when you land on the page. Is there any way I can scale down my product pages to a regular for example 1200px size without doing it to the entire theme? Please help thanks!

(1st picture is my store, 2nd is what I want it to look like)

question.png
question.png1902×931 159 KB

demo.png
demo.png1902×826 93.5 KB

2

Hello @Revail ,
Please share your store URL.
So that I will check and let you know the exact solution here.

3

My store URL is https://www.revailco.com thanks!

4

Hello @Revail ,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.scss.css and paste this at the bottom of the file:
.main-content {
		margin: 0 auto;
		width: 1200px;
	}

@media only screen and (max-width: 749px){
	.main-content {
		margin: inherit !important;
		width: unset !important;
	}
}

Hope it will help to you!

Thanks.

5

Hey unfortunately I cannot findtheme.scss.css in my codes. I attached an image below

code.png
code.png170×766 8.51 KB

6

Hey, it did work once I copy and pasted that at the bottom of theme.scss.liquid but my homepage and everything else was also cropped out too which I do not want. Is there another method without editing the entire website width?

7

Hello @Revail

Please remove below CSS code in the theme.scss file,

.main-content {
		margin: 0 auto;
		width: 1200px;
	}

@media only screen and (max-width: 749px){
	.main-content {
		margin: inherit !important;
		width: unset !important;
	}
}

And add this below CSS code:

.template-product .main-content {
		margin: 0 auto;
		width: 1200px;
	}

@media only screen and (max-width: 749px){
	.template-product .main-content {
		margin: inherit !important;
		width: unset !important;
	}
}

Thanks.

8

It worked thanks for your help!

9

Hey just one more question if you don’t mind, do you know how to move the currency converter I have to the left of the account, search, and cart on my header rather than to the right?

header.png

10

Hello @Revail

You need to change the currency code place from the code file

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Sections => header.liquid and find currency code and paste currency code below the account menu LI tag:

bhavini_1-1629369232200.png
bhavini_1-1629369232200.png921×206 12.7 KB

After changes it will display like below:

bhavini_0-1629369173006.png

Hope it will help to you!

Thanks.

11

Can I make it all the way to the left? As in even before the account icon.

12

@Revail

Yes, you can add it before the account like the currency menu first after that all menus likewise.

Please find currency code from header.liquid file and add currency code before menus from code file of header.liquid.

Please check attached screenshot:

bhavini_0-1629371157836.png
bhavini_0-1629371157836.png1129×551 52 KB