Make Header Icons Smaller

[martujv]

Hello!

Basically I want to make the header icons smaller both on mobile and desktop. This includes all the icons (cart, account, menu on mobile…). They look too big in my opinion.

Is there any code to make them smaller?

My theme is Stiletto and my web is www.winnerofficial.com

[Rahul_dhiman]

Okay please paste this code in your theme

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

Output :

[Dan-From-Ryviu]

Hi @martujv

You can do that by following this

• Open Online store > Themes
• In current theme, click “…” > Edit code
• Open theme.liquid file, add this code after

[PageFly-Richard]

Hi @martujv

This is Richard from PageFly - Shopify Page Builder App

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

While checking on your page to fix the issue, i have some suggestions for your product page to optimize the conversion rate. You can consider to take it is:

1. To add the review star for the product => To enhance trust for your product

2. Urgent next day delivery => The idea is to show an element of urgency to motivate people to receive the product sooner. For example: having a countdown timer (or cut-off time of day) by when an order has to be placed so that the item is received by the next day.

Hope this can help you solve the issue

Best regards,

Richard | PageFly

[BSSCommerce-B2B]

Dear @martujv ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

Step 2: Search for the file theme.css. And add this code snippet to the end of the file.

.header__icon-touch {
   scale: 70% !important;
}

In this step, you can change percentage as you want to display smaller icon.

Step 3: Save your code and reload this page.

=>> The result will make the header icons smaller both on mobile and desktop.

#Mobile

#Desktop

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!