Bold the Add to Cart, Search, and Three Horizontal Lines in the Header

Shopify Discussion

Topic summary

A user seeks help making header elements (Add to Cart button, Search icon, and hamburger menu) appear bold in their Shopify store.

Solutions Proposed:

  • SVG outline method: Add CSS targeting header svg path with a 2px solid outline (#000) to create a thicker appearance for the icons
  • Stroke width method: Apply CSS to header svg with stroke: black and stroke-width: 1px properties

Implementation:

Both solutions require adding custom CSS code to the theme.liquid file, specifically placing it in a <style> tag above the closing </head> tag.

Access path: Online Stores > Themes > Actions > Edit code > theme.liquid

The discussion remains open as the original poster hasn’t confirmed which solution worked or if the issue was resolved.

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

How can I bold everything in the header? Any help is greatly appreciated!

Screenshot 2024-01-22 at 2.48.08 PM.png
Screenshot 2024-01-22 at 2.48.08 PM.png2794×286 28 KB

1 Like
2

Hi @flammagreg welcome to the Shopify Community,

You just need to update the svg icons or make the outline thick by using the code below

svg path{

outline:2px solid #000;

}

Thanks

3

What file should I copy that into?

4

Hi @flammagreg

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the 

<style>
header svg {
stroke: black
stroke-width: 1px
}
</style>

Hope this can help you solve the issue

Best regards,

Richard | PageFly