We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Re: How can I adjust padding or margin between my product title and my custom liquid code?

Solved

How can I adjust padding or margin between my product title and my custom liquid code?

PathoStudio
Excursionist
29 0 5

I'm trying desperately to adjust the space highlighted below:

 

Screenshot 2025-04-03 at 19.25.17.png

 

The closest I've got to achieving this, is adjusting the space below 'John William Waterhouse' instead of above it.

 

'Lady Of Shalott' is the product title, and 'John William Waterhouse' is the custom liquid that links to all products by the artist.

Accepted Solution (1)

Moeed
Shopify Partner
7764 2082 2568

This is an accepted solution.

Hey @PathoStudio 

 

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 </body> tag

<style>
.product__title {
    margin-bottom: 20px !important;
}
</style>

RESULT:

Moeed_0-1743711060834.png

 

If I managed to solve out your problem then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Replies 6 (6)

StevenT_A7
Trailblazer
183 15 20

Hi,

You'll need to modify the CSS styling to adjust the space above the John William Waterhouse vendor link in your Liquid code. Try adjusting the paragraph's padding/margin with 10px and 5px. 

Steven Taylor

Phone:- +1 (302) 260-8345
Email :- steven.taylor.a7@gmail.com

CafeDelMar
Shopify Partner
164 36 46

Hi @PathoStudio

 

Can you please share the website URL? If it's password-protected, a password would be needed, too. It would be much easier to debug. 

➡➡   Easy Embed Code   ⬅⬅ add CSS/JS/Liquid codes to any page of your store



Speed Booster App - Improve your store speed in 3 clicks
- Was your question answered? Mark it as an Accepted Solution

Moeed
Shopify Partner
7764 2082 2568

This is an accepted solution.

Hey @PathoStudio 

 

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 </body> tag

<style>
.product__title {
    margin-bottom: 20px !important;
}
</style>

RESULT:

Moeed_0-1743711060834.png

 

If I managed to solve out your problem then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


PathoStudio
Excursionist
29 0 5

That worked! Thank you 🙂

Moeed
Shopify Partner
7764 2082 2568

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.

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


PathoStudio
Excursionist
29 0 5

I do actually have another issue, but I'm not sure it's as straightforward.

 

For seemingly no reason, there's a line break between my product title and vendor, but only for my Hasui Kawase products. I'm desperately trying to remove this space, but can't manage it without affecting the space of my other products. The screenshot shows how it affects the Kawase products but not the Caravaggio products.

 

Screenshot 2025-04-03 at 19.56.11.png

 

Here is a link to the page:

https://pathosstudio.uk/

 

And here you can see the custom css I've created for this section:

 

Screenshot 2025-04-03 at 21.47.07.png

 

The 'margin-block-start' positions the vendor at a perfect distance under the title for all my products except for this Kawase products. Do you have any ideas?