How can I reduce the gap between elements on my product page?

Store Design

Topic summary

A user seeks to reduce vertical spacing between elements on their product page, specifically between:

  • Price and star ratings
  • Star ratings and product description
  • Description and the first upload field

A solution is provided involving custom CSS:

Implementation steps:

  1. Navigate to Shopify admin → Online Store → Themes
  2. Click Actions → Edit code on the active theme
  3. Open the CSS file (base.css, style.css, or theme.css) in the Assets folder
  4. Add the following code at the bottom:
#productInfo-template--10172283255940 main * {
    margin-top: .5rem;
    margin-bottom: .5rem;
}
  1. Save changes

Note: The margin values can be adjusted to 0px if .5rem spacing is still too large. The helper includes a screenshot showing the expected result with reduced gaps between product page elements.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

Is there any way to make this gap a little bit smaller? Like between the price and the stars, the stars and the descrip, and the descrip and the first field to upload. Thanks in advance.

sections smaller.jpg
sections smaller.jpg261Ă—228 11.4 KB

1 Like
2

Hi @AlexLundquist ,

Yes, can do that. Would you mind to share your store URL website? with password if its protected. Thanks!

1 Like
3

Pawsitivecreation.com

1 Like
4

Hey are you still interested in helping?

5

Thank you for the infromation. Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
product-info#ProductInfo-template--20117228355904__main * {
    margin-top: .5rem;
    margin-bottom: .5rem;
}

Result:

Ribe_Dagandara_0-1690821041045.png
Ribe_Dagandara_0-1690821041045.png537Ă—409 9.65 KB

If its not enough the space you can change it to 0px;

I hope it help.

1 Like