A user wants to reduce the size of header icons (cart, account, menu) on both mobile and desktop, as they appear too large. The theme is Stiltetto on a Winner website.
Multiple solutions provided:
• CSS approach (most recommended): Add custom CSS to theme.css file:
.header__icon-touch {
scale: 70% !important;
}
The percentage can be adjusted to desired size. This affects both mobile and desktop.
• Alternative method: Add custom <style> code to theme.liquid file above the </head> tag (multiple responders suggested similar approaches).
Implementation steps:
theme.css or theme.liquid fileSome responders also offered additional conversion optimization suggestions (urgency timers, review stars) beyond the original question.
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
Okay please paste this code in your theme
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code in the bottom of the file above tag
Output :
Hi @martujv
You can do that by following this
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:
To add the review star for the product => To enhance trust for your product
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
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!
