Have your say in Community Polls: What was/is your greatest motivation to start your own business?

How to change spacing between multiple icon with text sections on product page?

How to change spacing between multiple icon with text sections on product page?

tjieko
Excursionist
15 1 7

Hi,

I am trying to reduce the spacing between two sections of icon with texts on my product page. Since some of my products need more than 3 icons with texts, I need multiple sections. I managed to set the spacing between the lines in a single to 5px, but the distance between the two sections is larger. 

 

My URL is www.vouwfatbike.nl

A good example is https://vouwfatbike.nl/en/products/windgoo-e20 

 

Thanks already

Replies 6 (6)

niraj_patel
Shopify Partner
2378 514 507

Hello @tjieko 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
   .icon-with-text--horizontal {
      column-gap: 0 !important;
   }
</style>

niraj_patel_0-1724762740048.png

 

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
tjieko
Excursionist
15 1 7

Hi, thanks for your reply. I should have specified that I was talking about the text with the green check marks. They are icon with texts but I removed the icons. Whoops! Can you help me with that?

niraj_patel
Shopify Partner
2378 514 507

not understand what you exactly want😕

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
tjieko
Excursionist
15 1 7

Thank you for your time. If you go on the product page I sent the link of (https://vouwfatbike.nl/en/products/windgoo-e20) and look right underneath the price, you see a few sentences with a green check mark underneath ("Shipping time, shipping price, includes app, and street-legal). Those sentences use an 'icon with text' section, but I selected 'none' as the icon, so there is no icon. The spacing between the first three and last one is not the same. I would like them to have the same spacing so it looks like a proper row.

I hope this helps, thanks anyways!

ZestardTech
Shopify Partner
5909 1067 1412

HI @tjieko 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

 

.icon-with-text--horizontal {
column-gap: 0;
}

 

ZestardTech_0-1724763015131.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
tjieko
Excursionist
15 1 7

Thank you for your reply. However, I meant the text with the green check marks. They are icon with texts, but I removed the icons. Sorry for not specifying that properly. Could you help me out further?