How to change the spacing between two 'icon with text's on product page?

Store Design
, , , ,

Topic summary

A user is experiencing inconsistent spacing between icon-with-text elements on their product page. Specifically, four sentences with green checkmarks appear below the product price, but the spacing between the first three items differs from the spacing before the last item. The user wants uniform 5px spacing to make them appear as a proper row.

Three solutions were provided:

  • Solution 1 (BSSCommerce-HDL): Add CSS code to the theme.liquid file above the </head> tag
  • Solution 2 (BSSCommerce-B2B): Similar approach, inserting code above </body> in theme.liquid
  • Solution 3 (Made4uo-Ribe): Add CSS targeting ul.icon-with-text classes to the main.css file with margin-top: 5px and margin-bottom: 5px

All three solutions include CSS snippets and visual examples showing the corrected spacing. The discussion remains open with no confirmation from the original poster about which solution worked.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

I have been having a bit of an issue with two icon with text’s on my product page.

If you go on the product page example below and look right underneath the price, you see a four 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 (5px) so it looks like a proper row, and not two different sections.

My URL: https://vouwfatbike.nl

Example: https://vouwfatbike.nl/en/products/windgoo-e20

Thanks already!

2 Likes
2

Hi @tjieko ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1724848956189.png
BSSCommerceHDL_0-1724848956189.png1561×774 128 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

1 Like
3

@tjieko ,

Step 1. Go to Admin → Online store → Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code above

Result

BSSCommerceB2B_0-1724849116788.png
BSSCommerceB2B_0-1724849116788.png1245×765 110 KB

1 Like
4

Hi @tjieko

check thiso ne.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

ul.icon-with-text.icon-with-text--vertical.list-unstyled.icon-with-text--text-only {
    margin-bottom: 5px;
}
ul.icon-with-text.icon-with-text--vertical.list-unstyled.icon-with-text--text-only {
    margin-top: 5px;
}

And Save.

Result:

Made4uoRibe_0-1724849099800.png
Made4uoRibe_0-1724849099800.png431×269 7.54 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!