Make svg icons in header smaller

flammagreg
Explorer
86 0 12

Hi guys, how can I make all of the svg icons in the header smaller? Any help would be greatly appreciated!

 

website: fhuzeo.com

Replies 4 (4)

sanico-software
Shopify Partner
56 0 10

Hi Flammagreg, 

 

I assume you are talking about the magnifying glass and other symbols next to it (correct me if I am wrong). 

 

sanicosoftware_0-1715120677250.png

 

If you look at the attached image, you will see that there are class names on the svgs that dictate its width and height. You will need to go into the code and change or remove these current classes and update it with what you really want. This will involve using the code editor Shopify provides or your own code editor if you have the skills. 

 

Hope this helps! 

Dom Tripodi | Sanico Software
I am a Software Engineer and Shopify Expert based in Adelaide, Australia. I build ecommerce websites with Shopify for local and international businesses. If you want to take your Shopify store to the next level, send me a message. Check out Sanico Software here.

PageFly-Richard
Shopify Partner
4272 969 1620

 

Hi @flammagreg 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> 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 </head>

<style>
header .header__icon svg.icon {
    width: 20px;
    height: 20px;
}
header .header__icon--cart .icon {
    width: 36px;
    height: 36px;
}
</style>

PageFlyRichard_0-1715129648374.png


Your store looks very nice, warm and elegant, but in my opinion, you should consider to add a heading banner + CTA button on your main banner

PageFlyRichard_1-1715129720334.png

The banner is very significant in hero material. It is the first thing customers see when they visit your website. Let's get consumers to know exactly what you're having in 5 seconds first.

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

BSS-TechFusion
Shopify Expert
139 26 15

Hi @flammagreg 

Is this a title you want to change?

 

BSSTechFusion_4-1715142388193.png

 

 

To change the title, please follow these steps.

Step 1: Go to Admin -> Online Store -> Themes -> Edit Code

 

 

BSSTechFusion_3-1715142381623.png

 

 

Step 2: Find the base.css file and paste the following code at the bottom of the file. Then save the file

 

.header__heading-logo-wrapper img {
    width: 50px;
}

 

You can change the width to fit the website

This is the result after the change

 

BSSTechFusion_6-1715142422051.png

 

I hope these instructions will help you. If they are helpful, don't forget to like and mark as the solution. Have a nice day sir!

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

SAN_MSWEB
Shopify Expert
1082 130 136

Hello,

 

I am San from MS Web Designer.

 

Go to Themes > Edit code > Theme.liquid > at the bottom place this code before </body>

 

<style>
.header__icon .icon{vertical-align: unset !important;}
.header__icon--cart .icon{width: 25px !important; height: 25px !important;}
.header__icon .icon.icon-account,
.header__icon .icon-search,
.header__icon .icon.icon-hamburger{width: 14px !important; height: 14px !important;}
</style>

 

Do let me know in case of any concerns.

 

Regards,

San

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin