Reformation theme - How to Reduce Header icon (Search, login,cart)

Store Design
, , ,

Topic summary

A user seeks help reducing the size of header icons (search, login, cart) on their Shopify store using the Reformation theme.

Initial Solution Provided:

  • Navigate to Online Store > Themes > Assets folder
  • Add custom CSS to main.css, base.css, style.css, or theme.css
  • Specific CSS code targets icon width/height (15px) and font-size (12px)

Implementation Challenge:

  • User cannot locate the suggested CSS files in their Assets folder

Alternative Approach:

  • Paste the CSS code in app.css if available
  • If not, insert the code in theme.liquid file before the closing </body> tag

Outcome:
The alternative solution successfully resolved the issue. The user confirmed the fix worked after implementing the CSS adjustments.

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

Hello there

Can someone point me or explain how to code for adjusting the Reduce Header icon (Search, login,cart) smaller than now?

Link: https://noenddenim.com/

截屏2024-09-17 下午2.16.14.png
截屏2024-09-17 下午2.16.14.png3436×342 232 KB

截屏2024-09-17 下午2.09.26.png
截屏2024-09-17 下午2.09.26.png2718×594 112 KB

Thank You !

1 Like
2

Hi @noend

This won’t be user-friendly if the icons are barely visible to the users.

Check this one then.

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.

a.thb-secondary-area-item.thb-secondary-myaccount {
    font-size: 12px;
}
.thb-secondary-area.thb-header-right svg {
    width: 15px;
    height: 15px;
}

And Save.

Result:

Made4uoRibe_0-1726609617886.png
Made4uoRibe_0-1726609617886.png557×115 30 KB

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

3

Hi there!

Thank you so much for helping. I can’t find either of main.css(base.css, style.css or theme.css) in the asset folder is there other names?

截屏2024-09-17 下午2.50.57.png
截屏2024-09-17 下午2.50.57.png534×1278 52.3 KB

4

Can you try to paste on the app.css? If not paste on the theme.liquid.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “theme. Liquid” file. Find the tag and paste the code below before the tag.

And Save.

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

5

Thank you so much!!!