How can I make the header icon line thinner?

Store Design
,
1

Hi there,

I want to make the icon line in the header thinner. How can I do that?

9C1B1F92-8906-4E74-9C27-B19F86F1FB69.jpeg
9C1B1F92-8906-4E74-9C27-B19F86F1FB69.jpeg2388×478 93.2 KB

2

Hello @admintb ,

You can try to follow these steps:

  • Go to Online Store → Theme → Customize
  • Select the header include the icon you want to change
  • Look for the option to set the border thickness or outline thickness for the icon
  • Adjust the border thickness or outline thickness value to make it thinner. For example, you can set it to 1px or 2px.
  • Save and preview

Hope this can help you out.

Ali Reviews team.

3

@irene-vintage I can’t change the thickness in settings. I need to use css

4

Hello @admintb ,

You can try to:

Go to Online Store → Theme → Actions → Edit code

Go to Assets → base.css → add the following code:

.header__cart-icon {
  border: 1px solid black; /* Change the border width and color to your liking */
}

Save and preview

Hope this can help you out.

Ali Reviews team.

5

Hi @irene-vintage

Unfortunately nothing change…

6

Can you check your css please? :slightly_smiling_face:

7

Hello @admintb ,

Sorry for the late reply. You may replace the previous code with this:

.site-header__icons {
  line-height: 1mm;
  font-size: 16px;
}
8

@irene-vintage Nothing change again…