Hello!
I would like assistance making the shopping bag and menu the same “boldness” as the magnifying glass. The shopping bag seems a little lighter and the menu is in bold.
Topic summary
Goal: make the header’s shopping bag and menu icons match the search icon’s outline thickness (search looks right; bag appears lighter, menu bolder).
Key steps and proposals:
- Store URL was shared for context.
- Initial CSS suggestion applied a stroke color (#b8260d) and stroke-width: 1px to the cart/menu SVG paths and resized the search icon (19x18). This made icons larger and bolder than desired.
- Final fix: edit the theme’s SVG icon code directly and add per-path attributes: stroke=“#b8260d” and stroke-width=“0.3” to the menu and cart icons. In SVG, stroke controls outline color; stroke-width controls outline thickness.
Outcome:
- The inline SVG change matched the search icon’s normal outline without altering icon size. The requester confirmed it works.
- Thread status: resolved. The helper asked for the reply to be marked as Accepted.
Notes:
- CSS approach adjusted both weight and size; inline SVG attributes provided precise control over thickness only.
Hi @ErhatRO
Please share your website url.
1 Like
right5785*
Hi @ErhatRO
You can try to add this code to Custom CSS in Online Store > Themes > Customize > Theme settings
.header__icon--menu svg path,
.header__icon--cart svg path {
stroke-width: 1px;
stroke: #b8260d;
}
html .header__icon .icon-search {
width: 19px !important;
height: 18px !important;
}
hello @Dan-From-Ryviu
This seems to have made them larger and bolder. I like the normal outline of the search icon so I would want the menu and shopping bag to match that while keeping the same size that they currently are.
You can edit your theme code and add the following code for each path：
stroke="#b8260d" stroke-width="0.3"
This is working, thank you!
Hi @ErhatRO
Is it possible to mark my reply as Accepted, 