Padding

Store Design
1

Hi everyone,

Can someone help me with the code to showcase more padding between the product title and the price. I don’t know why it showcases is to close to eachother. The help is highly appreciated!

Screenshot 2025-12-07 at 08.30.09
Screenshot 2025-12-07 at 08.30.091220×1060 61.8 KB

1 Like
2

@JarnoBroekkamp can you please share this page link?

3

Hi @JarnoBroekkamp

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

4

Hi @JarnoBroekkamp

I do not see the same image. But I do see line after title, then reviews, widgert, and then price. I mean, this is on the product page, right?

But you can try to ad some CSS to your main product information section, in Custom CSS settings

.product-info__block-item:is([data-block-type="vendor"], [data-block-type="title"], [data-block-type="sku"], [data-block-type="price"]) {
    --product-info-gap: 1rem;
}

And adjust the value. It should work, but note this will make the same padding after title, vendor, sku, and price.

5

You can add spacing by targeting the product title or price in your CSS. For example, in your theme’s CSS file or the “Additional CSS” section, add:

.product-single__title {
    margin-bottom: 15px;
}

Adjust the 15px value to increase or decrease the spacing between the title and the price.

6

Hi, @JarnoBroekkamp
You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the </head> tag

<style>
.product-title.h3{
     padding-bottom: 15px;
}
</style>

Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution!
If you will unable to implement the same then I’m happy to do this for you, let me know.

7

Good day @JarnoBroekkamp , to add space between the product title and the price, please follow the steps below:

  1. Go to the Online Store in your Shopify admin.
  2. Click Edit Code, then open base.css (or your custom CSS file).
  3. Paste the CSS code provided below into the file.
@media screen and (min-width:750px) {
    .product .product-info .product-title {
        margin-bottom: 16px;
    }
}

@media screen and (max-width:749px) {
    .product .product-info .product-title {
        margin-bottom: 14px;
    }
}

I’ve also attached screenshots for your reference, so you can easily follow along.

image
image1065×656 58.5 KB

image
image420×723 28.1 KB

If you have any questions or need further assistance, please don’t hesitate to ask.

If this solution helps you, please don’t forget to like and accept it.

Best Regards,

(S.P)