Shopify themes, liquid, logos, and UX
Hi!
I am trying to reduce the space between the texts on my homepage. I have no idea what to do. Can someone please help me? Is there a code I can put somewhere? I'm using theme "Pipeline"
I attached a photo of my text with red lines showing the space I want to reduce, and I also added a photo from a website with the text spacing I am trying to go for.
Thank you!
Solved! Go to the solution
This is an accepted solution.
Please add this code above </body> in theme.liquid
layout >> theme.liquid
<style>
a.standard__cta.hero__btn.btn--soft {
margin-top: 5px!important;
}
.hero__description.h5--body {
margin-bottom: 0!important;
}
</style>
after add the code looks,
Please give me the store URL
Thanks i will check
This is an accepted solution.
Please add this code above </body> in theme.liquid
layout >> theme.liquid
<style>
a.standard__cta.hero__btn.btn--soft {
margin-top: 5px!important;
}
.hero__description.h5--body {
margin-bottom: 0!important;
}
</style>
after add the code looks,
second image where on store please give me the page URL
There are a few ways to reduce the space between text in Shopify, depending on where the text is located and how it is being displayed. Here are a few options:
Use CSS to adjust the margin and padding of the text: By targeting the specific elements that contain the text, you can use CSS to adjust the margins and padding to reduce the space between the text.
Adjust the line-height: Using CSS, you can adjust the line-height property of the text to reduce the space between lines.
Use a font with smaller line spacing: Some fonts have built-in line spacing that can be adjusted to reduce the space between lines of text.
Adjust the font size: By decreasing the font size, the space between lines of text will also be reduced.
Use a code editor to edit the theme's liquid file: This is an advanced method which would require to know the structure of the website and the HTML/CSS and Liquid languages.
It is important to note that, you should always test your changes in different browsers and devices to ensure that the text is still readable and the design looks good.
@BellamyDustin wrote:There are a few ways to reduce the space between text in Shopify, depending on where the text is located and how it is being displayed. Here are a few options:
Use CSS to adjust the margin and padding of the text: By targeting the specific elements that contain the text, you can use CSS to adjust the margins and padding to reduce the space between the text.
Adjust the line-height: Using CSS, you can adjust the line-height property of the text to reduce the space between lines.
Use a font with smaller line spacing: Some fonts have built-in line spacing that can be adjusted to reduce the space between lines of text.
Adjust the font size: By decreasing the font size, the space between lines of text will also be reduced.
Use a code editor to edit the theme's liquid file: This is an advanced method which would require to know the structure of the website and the HTML/CSS and Liquid languages.
It is important to note that, you should always test your changes in different browsers and devices to ensure that the text is still readable and the design looks good.
Have you find this information useful? I also applied same on one of my websites and get success.
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025