Hello,
I have added images in the icon banner element but it’s showing up very small on our store. How can I adjust the size?
Topic summary
Icon banner images in the Wokiee theme appear very small; enlarging via CSS makes them blurry because the source files are limited to 60×60 px. CSS (styling code) can increase display size, but stretching low‑resolution assets degrades quality.
Key guidance:
- Prefer uploading larger source images or removing the hard 60×60 constraint in the theme’s code. Changing only CSS width (e.g., 200px) will likely blur.
- The size limit is defined in Liquid (Shopify’s templating language). It may exist in multiple files: not just index-section-iconbanner.liquid but also footer-section-iconbanner.liquid, which controlled the live output in one case.
- Practical step: download the theme, search for “60x” across files, and update the relevant icon banner templates, then upload higher-resolution icons.
Additional requests were raised: rearranging the four icons like a reference layout, and centering icons on mobile. No specific layout or mobile-centering solution was provided.
Status: No confirmed final fix in-thread. Action items are to increase source icon dimensions, update the Liquid templates that enforce 60×60, and then fine-tune CSS for layout/centering.
Note: Multiple screenshots are central to identifying the exact section and confirming where the size restriction is applied.
Need you to provide me with your shop address so I can help you better!
https://stephues.myshopify.com/ this is the store
Which piece of the icon size do you want to change? Is it easy to take a screenshot?
hey @SoleArt
which section are edit icon please shear screenshort
I want to change the size of all 4 of these icons ^
I see！
See if you can set the width of these icons when you upload them, because even though I’ve enlarged them for you with css, they’re blurry!
If you can’t set the width, you’ll need to look in the code to see if the icons are restricted in width.
is it possible to arrange the icons like the above reference instead? ^
Hello @SoleArt !
The image can show bigger in size but the image will look blurred as it’s size is too small. Please have a look at the below screenshot:
Add the below code to your theme.css file at the bottom to show the image big in size:
.tt-services-block .tt-col-icon {
width: 200px !important;
}
Hope this helps.
where in the code should I add this? The size looks the same 
If you go through the css to change the size of the image, you will get a blurred image.
Can you find the code for this piece? I can teach you to configure it.
This is because you are now limited to uploading images of 6060 size. When I changed your image through css, the 6060 image was stretched to 280*280, so it’s blurry!
in the mobile view, the icons are not in the centre, how can I make it so? Thank you so much for your help? Much appreciated
We found that index-section-iconbanner.liquid is not the only place this appears. The other place is in footer-section-iconbanner.liquid which was the real problem for us. We had made the changes in index-section-iconbanner.liquid and for the longest time couldn’t figure out why it was not changing on the live site. As a last resort, client downloaded the theme file and in Sublime Text, used find in folder to search for “60x” and it turned out to be footer-section-iconbanner.liquid that needed to be changed!