How do I reduce spacing on my product page

Store Design
1

Hi guys I want to reduce the spacing on my product pages on my dawn theme.

I would like the “Share” link/button to be directly below the product title, aswell as the “size guide” button and “size” options to have no spacing around it how do I do this?

https://www.contoursyr.com.au/products/let-it-be-known-tee

2

@bibby - share button is already under title and what spacing do you want to remove? can you please share any screenshot if you have?

3

Hey Bibby,

Store is looking great so far, nice job :raising_hands:

I took a look at your page and found that this spacing is stemming from a margin within the Dawn theme.

Kalen_0-1673758349475.png
Kalen_0-1673758349475.png1436×918 89.1 KB

When disabled, you can see that this spacing is removed entirely. This can be adjusted manually within the theme’s code, but I wouldn’t recommend that as it will likely have some unintended impacts other places on your store.

You may also want to play around with the theme settings to adjust the vertical spacing in your layout. I made a quick video demonstrating how to get there from your admin.

https://www.loom.com/share/40c9a7e00127409f8f1caba6e6d1a65d

You can also read more about theme settings in the Shopify Help Center. They have a specific one just for Dawn that has a lot of great answers :slightly_smiling_face:

https://help.shopify.com/en/manual/online-store/themes/themes-by-shopify/dawn

Hope that helps!

4

Im referring to the “size guide” pop up text as it seems to have a lot bigger spacing then the “share” and all other parts?

bibby_2-1673763999151.png
bibby_2-1673763999151.png981×1024 129 KB

5

Thank you for the help but the “size guide” seems to have alot bigger spacing then anything else, the “share” is even less spacing then what “size guide” has around it.

For example if I put a text box where the “size guide” pop up is it has less spacing and looks better it for some reason seems that only the pop up link has extra big spacing.

bibby_1-1673763934532.png
bibby_1-1673763934532.png981×1024 129 KB

you can see above how it has alot more spacing then the rest

6

I think that this is coming from section-main-product.css under Assets in the code.

Kalen_0-1673769958228.png
Kalen_0-1673769958228.png1765×787 58.3 KB

The pop-up modal has these set margins that theoretically should be able to be changed, though that’s a bit outside of my wheelhouse. Perhaps someone else will come along with a more detailed answer.