Dawn Make Icon Account And Shopping Cart Larger

Store Design
,
1

In Dawn Theme, how can I make Account and Shopping Cart Icons bigger? I don’t have issue making them smaller, but bigger/larger seems to be more difficult.

2 Likes
2

@JohnAllen439

Thanks for reaching out to the community.

To increase the size follow these steps:

  1. In the theme setting click on custom CSS and add the below CSS.

.header__icon {
font-size: 2rem; /* Adjust size as needed /
width: 32px; / Adjust width /
height: 32px; / Adjust height */
}

  1. Adjust the Icon Size in the theme.

In the theme click on edit the code and add the CSS below-

.header__icon svg {
width: 32px; /* Adjust to desired size */
height: 32px;
}

Please let me know if these work for you.

3

Hi, this does not work, it only increases the AccountPerson Icon, but not the shopping icon.

JohnAllen439_0-1743660054740.png

For some reason the shopping bag never takes the whole size of the container, unlike user profile, spent hours trying to figure this out yesterday

JohnAllen439_0-1743660760411.png
JohnAllen439_0-1743660760411.png873×742 87.8 KB

4

Hi @JohnAllen439

Could you share the link to your store?

5

Hi @JohnAllen439 ,

Could you please share the store URL? Let me test this in a test environment.

Regards,

6

Hey John!

Can you try this CSS - I tested this on a development store with Dawn active and it worked.

.header__icon .icon {
    height: 2.8rem;
    width: 2.8rem;
}
.header__icon, .header__icon--cart .icon {
    height: 6rem;
    width: 6rem;
}
.header__icon .svg-wrapper {
    width: 84px;
    height: 84px;
}

Go to Shopify Admin > Online Store > Themes > Customize > Theme settings. Add the CSS in the Custom CSS section and click Save.

Cheers!

Simon

2 Likes
7

That is awesome, it works ? Are you a software developer?

Any way you can optimize the CSS if possible?

Thanks, if not, no prob

8

Hi, the solution from Simontomkins works , any way to optimize the css by any chance?