How do I replace a logo with an SVG in the Boundless Theme?

Store Design
1

Hey guys,

I’m looking to replace my current logo with a svg version. I’m struggling with which section of code needs to be replaced and what code needs to replace it. I’ve uploaded my svg file to the files section of my account but looking for the next steps.

Any help would be much appreciated. Thankyou!! :))

2

  1. Go to “Themes” > “Actions” > “Edit Code”

  2. Go to the “Assets” folder in the sidebar and upload your logo as an SVG file.

  3. Go to the “Sections” folder and open the “header.liquid” file.

Search for “img src” within that file and replace the source with the path to your svg file, actual code may vary based on theme but you would need to set something like

this

src=“{{ ‘your_logo.svg’ | asset_url }}”

3

Thanks for the reply. Still not having much luck ://

Here’s the theme file if that helps
4

Hi @user17439 ,
Provide me your store url i will send you the access request to your store i will add the SVG to your website its easy.
i wont cost anything

5

Hello, here is what worked for me, although this method isn’t flawless, as the logo now looks a bit too sharp on pc, when the website isn’t zoomed in. But honestly I prefer it this way, beause it looked bad before as well but at least now it looks good when you zoom in.

Anyways, upload your svg file from the files section and copy the link.

Then remove the logo in the header section (from the “customize” section, without editing any code).

Finally, replace {{ shop.name }} in {{ shop.name }} with , where imagelink is the link of your file.

I edited the code that runs when the logo section is blank because it looked simpler to me.

Maybe uploading the svg file as an asset and then linking that asset would solve the problem of the logo being too sharp on a large screen, but I can’t link the asset and at this point I don’t really care anymore.

Hope this helps

6

By the way if the problem was that you wanted your logo to look sharper, you can always follow my previous instrutions but use the link of a png image or whatever instead of an svg. This way the image doesn’t look blurry when you zoom in