Increase product photo side and decrease info sizing

Store Design
, ,

Topic summary

A store owner wants to adjust their product page layout on desktop to prioritize images over product information, similar to a reference example. They also want to reduce the size of the “x people are viewing this” text.

Solutions Provided:

  • One responder suggested adding custom CSS code to the theme.liquid file (above the </body> tag) to adjust the layout proportions.
  • Another recommended changing the “Desktop media width” setting to “Large” in the theme customizer (Homepage > Products > Product template), plus adding CSS to reduce the live visitors text size.

Outstanding Issues:

  • The original poster requested the product images extend to the top of the page (touching the header), which hasn’t been fully addressed.
  • After implementing suggestions, the left-side product information appears too compressed or pushed too far right, requiring further adjustment to achieve the desired compact but balanced layout.
Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hi on desktop I would like the images to take up more of the space then the info does.
Exactly like this: https://modemischiefstudios.com/en-nz/products/zip-sleeveless-dress-blue-copy

Is this possible?

Also is it possible to decrease the size of " “x” amount of people are viewing this"

my website is: studio-seductress.com
password: yesyesyes

Thanjyou so much

1 Like
2

Hey @studioseductres

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT

Moeed_0-1739258485626.png
Moeed_0-1739258485626.png1905×916 275 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hi @studioseductres

Please go to your store admin > Sales channels > Online store > Themes > Customize > click Homepage dropdown menu at the top center > Products > select your product template > selecet Desktop media width option is Large.

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

.live_visitors.no-js-hidden { font-size: 13px; }
html .live_visitors::before { margin-left: 20px; }
4

Thanks do you know how to make the photo go all they way to the top like the example i gave you? Onto the header

5

Hi thanks but do you know how to make the left side info more compact now as it is too far to the right and looks squished.

see product for example: https://modemischiefstudios.com/en-nz/products/zip-sleeveless-dress-blue-copy