I’m using the Dawn theme and I’m having trouble with excessive vertical spacing on my product pages.
To explain it properly, I’ve included:
My own product page showing the current spacing issue
On my page, the product title, price, variant picker (size/colour), quantity are all sitting much lower than the product image, which creates a lot of unused space — especially on mobile.
On the competitor page, the variant options sit much closer under the image, making the page feel tighter and more conversion-focused.
I’ve already tried adjusting margins with CSS (targeting things like .product__info-container, .product__title, .product-form__input etc.), which helps slightly, but it feels like the main issue is coming from the product grid / wrapper layout rather than just margins.
What I’m trying to achieve:
Reduce vertical spacing between title → price → variants
Move the variant picker closer to the product image
Match a tighter, more compact layout similar to the example page
Is this controlled by main-product.liquid, or is there a specific wrapper/selector in Dawn that controls this spacing?
Any advice or examples would be massively appreciated.
Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.
Horrible cliche of new merchants, don’t do this.
If your not making gangbusters money do you really have time to spend undermining the stores design.
Prioritize actual business issues of playing theme-designer.
It is being used as WHITESPACE, don’t turn your store into a cramped mess just because other stores are making mistakes.
Don’t apply personal aesthetics while ignoring that the original designers whose literal job is to be a design expert… designed it that way on purpose.
Wearing the designer hat tends to just be an excuse to not spend time on actual real business problems.
While introducing a whole set of new old UX||typography problems, https://en.wikipedia.org/wiki/Scriptio_continua
Based on what, do you have access to their internal sales numbers.
Being conversion focused is literally about factualdata over personal feelings.
This is how merchants slowly ruin their stores to look like klunky cramped dime store bodegas.
You do NOT want to be looking like every other dripshuffler.
If you don’t have 10k traffic day/month along with the budget to be ab-testing then don’t turn aesthetics into wishcasting metrics. That is a nasty habit that will blow up in your face and can waste ad spend like mad crazy.
If your not making gangbusters money do you really have time to spend undermining the stores design.
I’d agree with Paul – don’t turn your store into a cramped mess.
UI/UX is a separate science.
Say, any interactable element must have space around so that your visitors do not touch/click other elements…
Say, you complain about space between images and product info, but, hey – there are buttons and those must have some air to allow for fat fingers, especially on mobile.
@JNOYCE1966 you need simple but multiple changes, hence I request please get a developer and ask him/her to make all the changes. The changes are simple, it would take around 30-60 minutes.
I agree with others on not make clusters but if you still want to reduce the gap use the highlighted css in the screenshot: Screenshot by Lightshot , you can also adjust the margin based on what you like but still not recommended.
That is a nasty habit that will blow up in your face and can waste ad spend like mad crazy.