Adjust space between blocks on product page

Store Design
, ,
1

How do I adjust the space between either side of the text block on my product page template?

The colour options below are part of the Buy buttons block, added to it by the easify options app.

I found a very similar message on here, but the accepted answer was a specific css code insert that I don’t think applies to the ‘text’ block. I know nothing about css, so the relevant code insert for my product page and text block would be great!

Screenshot 2025-07-04 210856.png
Screenshot 2025-07-04 210856.png947×1059 149 KB

1 Like
2

@bradleymatthews , hey, thanks for posting here.
Can you please share the link so we can inspect it? thanks

3

You will need to add custom css in customizer in your section for that text

margin-top: 1em;
margin-bottom: 1em;

4

Hello @bradleymatthews ,

Could you please provide the URL/ password to your store so that I can check it and provide you with the exact solution?

5

Hey @bradleymatthews

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-1751628909468.png
Moeed_0-1751628909468.png1351×651 301 KB

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

Best Regards,
Moeed

1 Like
6

https://bmprintshop.com/products/zinc-50-blaster-diy-kit-up-to-250fps

7

Hey! @bradleymatthews ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

.tpo_option-set-wrapper {
    padding: 0px 0 !important;
    margin-top: -10px !important;
}

variant-selects {
    padding: 0px 0px 11px 0px !important;
}
8

That was quick, thank you! Very much appreciated.

9

Hello @bradleymatthews ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
.product-form__input {
    margin-bottom: 25px !important;
}
.tpo_option-set-wrapper.tpo_has-option-set {
    padding-top: 0 !important;
}
product-form.product-form {
    margin-top: 0 !important;
}

ZestardTech_0-1751629446049.png
ZestardTech_0-1751629446049.png1297×648 286 KB

Let me know if you need further assistance!

Thank you

1 Like
10

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

1 Like
11

Hi again Moeed, sorry to bother. I have introduced different product page templates and have discovered that the margin values for .product-form__input apply to all inputs including the product quantity selector, so on my new product page template that has the variant selector and the quantity selector, the spacing is off a bit as it is added to both elements. But if I change the values it will put the spacing off for the original template.

What can I add to have margin spacing values I can play with that only apply to the variant picker, and also separately for the quantity selector, on all templates?