Help needed with icons and text

Store Design
,

Topic summary

A user seeks help repositioning icons and text on their Shopify store homepage to match a reference design. The goal is to move text beside icons (rather than below) to reduce section height and align margins with other page elements.

Solutions Provided:

Two contributors offered CSS code snippets to:

  • Use flexbox to display icons and text horizontally
  • Center-align items and adjust spacing/gaps
  • Apply responsive styling for desktop views (min-width: 1024px)
  • Modify margins and font sizes for better visual balance

Code targets specific template classes in the theme’s base.css file.

Follow-up Issue:

The user successfully implemented the initial solution but noticed inconsistent spacing between icons and text (e.g., larger gap for “Secure Payment”). A contributor suggested additional CSS for middle alignment, but the user ultimately resolved it by adjusting an “Item Heading Margin Top” setting to 12px.

Status: Resolved through combination of custom CSS and theme settings adjustment, though desktop-only solution noted.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I would like to customise some icons and text so that it has a similar look and function to the website in the screenshot. These icons are at the top of my home page. I’d like the text to be moved to the right of the icons to reduce the height of this section. I am not sure if it possible as the section is downloaded from an app I have.

I have provided the URL for this website below as well. I would like the text/icons to line up with the sections below so the margin on the left and right is the same.

My URL: www.atmos.art

Reference URL: https://www.andertons.co.uk/

Screenshot 2025-06-04 at 12.57.13.png
Screenshot 2025-06-04 at 12.57.13.png2558×132 31.1 KB

2

Hello @atmos-art ,

Go to online store > edit code > search base.css file and add this code in the end.

.feature-item-template--25002931257667__ss_feature_7_UP86b9.swiper-slide {
    display: flex;
    justify-items: center;
    justify-content: center;
    align-items: center;
}
.feature-title-template--25002931257667__ss_feature_7_UP86b9 {
    margin: auto;
}

Result:

Screenshot 2025-06-04 171007.jpg
Screenshot 2025-06-04 171007.jpg1355×527 61.9 KB

Thanks!

1 Like
3

Hi @atmos-art ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media (min-width: 1024px) {
   .feature-item-template--25002931257667__ss_feature_7_UP86b9.swiper-slide {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
}

    .feature-image-template--25002931257667__ss_feature_7_UP86b9 {
    margin: 0px px !important;
}
    .section-template--25002931257667__ss_feature_7_UP86b9 {
        padding: 0px 10px !important;
    }
  .feature-items-template--25002931257667__ss_feature_7_UP86b9 {
        gap: 10px !important;
    }
  .feature-title-template--25002931257667__ss_feature_7_UP86b9 {
        margin-top: 0px !important;
    }
}

Result:

websensepro_0-1749039493744.png
websensepro_0-1749039493744.png1366×488 284 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!
Use our Big Bulk Discount app to boost your sales! :rocket: (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

4

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

5

Please also add this code for better design

.feature-title-template--25002931257667__ss_feature_7_UP86b9 {
        margin-top: auto;
        margin-left: 5px;
    }
}
    .feature-title-template--25002931257667__ss_feature_7_UP86b9 > * {
        font-size: 19px;
    }

screenshoteasy (30).png
screenshoteasy (30).png1365×407 136 KB

6

Hi this worked great, thank you! Do you know how I could also make the spacing between the icon and the accompanying text the same for each part?

I would also like to align both lines of text with the middle of the icon if possible.

Some of them have larger gaps (such as the card icon and “Secure Payment”).

Screenshot 2025-06-04 at 13.54.55.png
Screenshot 2025-06-04 at 13.54.55.png3210×354 78.1 KB

7

Try this code for middle alignment.

.feature-item-template--25002931257667__ss_feature_7_UP86b9.swiper-slide {
   align-items: end;
}
8

Hi, that doesn’t appear to work for me. I have adjusted a setting called Item Heading Margin Top to 12px which seems to have done the trick (on desktop at least).