Spark Theme : Change Icon Thickness, Style and Size in Header

Hello,

I’m currently working on the spark theme in Shopify. My site is not live, so it wouldn’t be helpful to share. But, I’m looking to reduce the size of the header icons (the hamburger, profile, search and cart) as well as their line thickness. I would also like to change the cart icon. I’ve searched in vain for this code (I’m sure it’s right in front of me), but have yet to find. I’ve screenshot the header and attached below, but the theme is SPARK.

Thank you!

@kdhyatt ,

Please share the copy theme preview URL.

https://www.saintsignora.com/?_ab=0&_fd=0&_sc=1

Hi @kdhyatt ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/custom.css->paste below code at the bottom of the file:

.site-control .site-control__inner svg {
    width: 25px;
    height: 25px;
}
.site-control .menu .icon-menu .icon-menu__bar {
    width: 15px;
}

I hope it would help you
Best regards,

Richard | PageFly

Hi,

Thank you, but that doesn’t do anything. The image you have pictured in your solution is my current “LIVE” site. The theme I’m working on is SPARK and is NOT LIVE. It’s the header image attached in my initial query.

Hi @kdhyatt ,

You can share us your spark theme preview link so we can check and give you the best solution.

Best regards,

Richard | PageFly

it was shared above…thanks. reposted here : https://www.saintsignora.com/?_ab=0&_fd=0&_sc=1

Hi @kdhyatt ,

I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->paste below code at the bottom of the file:

.header__icon-touch svg {
    width: 30px !important;
}
.header__right .header__icon-touch svg {
    width: 21px !important;
}

I hope it would help you
Best regards,

Richard | PageFly