Small details that are now commonplace, are the search/account/cart icons at the top corner of almost every e-commerce site. They’re almost all the same, and come pretty standard with any template that you may choose to use. It might not make much of a difference, but it sounded fun to create my own. A visitor to BuschKraft will ideally interact with them at some point, so why not try to give them a bit of style. Turns out it’s not as straightforward as adding a new picture, or logo to your template. I’m currently using a Shopify theme called Craft. It’s nice, clean, free, and works for what I need it to do. There are a lot of elements you can customize, but the icons are not one of them. To replace and edit these icons, you have to edit the code of the theme itself, something that I wasn’t excited about since I know nothing about code. Shopify does make editing very accessible, but knowing what you’re looking at, and what to change can be a bit tricky if you’re not familiar with it. Before even attempting that, I had to come up with the new icons, which didn’t take long given how simple they are. I was aiming for a style that matched that of the logo, but was still recognizable to the original shapes. Started with a few small sketches, then recreation in Illustrator, and some fine tuning. Exported as .SVG files they were ready to go.

Icon Drafting

Incorporating elements of the logo to all 3 icons

Into the Matrix

 

The first step to getting the icons to appear on the website was figuring out where the existing icons come from and switching them out. Within the Shopify theme editor, you can directly access and edit the code. There is a lot here, and to me it’s all unfamiliar. With some help from ChatGPT I was able to identify the section/block (area?) that I needed to edit. Again I have no idea how this works but essentially the website heading looks at ‘snippets’ and pulls the required assets and renders them on screen. Someone who knows what actually is going could explain it much better, but that’s my interpretation of it. I found the heading, then the snippet, and within that I could see it used specific assets like ‘search-icon.svg’. Now just to find that source and swap it out with my own. It sounds straightforward now but It took me a couple hours to poke around and actually figure out what to do.

Finding the source for the search icon. Adding a bit about size to control the icon later.

Paste the .svg code directly into the Shopify code area (replacing what is there). Can modify stroke size and color here.

Final Adjustments

 

The workflow shown in the pictures above is what I did for all 3 icons. Copy the .svg code, and paste it into the asset folder. Each time I was able to edit the stroke color and size within that (using 'currentcolor' for the stroke made it use my current theme's color style I picked for the heading). In between each edit I would save and return to the Shopify website page to check and see if my change took effect. It took many tries to finally figure out what did what, and adjusting the size/stroke width so it looked reasonable at the top of the page. The hardest part was trying to size the icon relative to the others. I ran into issues by trying to change the ‘viewbox’ within the .svg code, it didn’t do what I wanted at all, it was basically cropping the image instead of changing the size. After consulting ChatGPT quite a bit I pasted a little nugget of text within the ‘snippet’ that referenced the .svg asset. The text allowed me to directly edit the size of the icon, and that ended up working well to dial everything in. 

The last bit that I had to fix was the ever so subtle enlargement of the icon when you hover over it. I noticed it with the originals, and when I swapped mine out they no longer did it. The fix sounded too good to be true, but pasting a bit of code into the very bottom of the base.css for the theme did the trick. 

 

This is what ChatGPT spit out and said to paste into the bottom of the theme. It worked on the first try believe it or not. 

And there you have it, some customized icons at the top of the page. It took a whole afternoon but I think it was worth it. I’m more comfortable editing some code if I need to now, couldn’t have done it without ChatGPT, but at least next time I’ll have an idea what to look for on my own. It definitely makes me think about what other customization I can come up with, but for now this will do. 

Share & follow

For any inquiries, please contact:

Nicholai Busch

Email: info@buschkraftsolutions.com

Website: buschkraftsolutions.com