Add SVG file to section on homepage

[HeidiM20]

Hi Everyone,

I don’t know much about coding, but I made a moving document on Canva’s website builder and saved as a SVG, now I can’t get it onto Shopify? I can only get it on there as a video file, or as a photo that doesn’t move.

Please can someone help! 

[sahilsharma9515]

Hi @HeidiM20   Welcome to the Community!

Please follow the steps:

• Upload the SVG to Shopify:
• In Shopify admin, go to Settings > Files.
• Click Upload files and select the SVG file.
• Copy the URL of the uploaded SVG file.

• Add the SVG to the Section Using an "img" Tag:
• Go to Online Store > Themes > Actions > Edit code.
• Find and open the section file where you want to add the SVG, i.e. theme.liquid file.
• Use an "img" tag to link to the SVG file's URL. 

<!-- Example: Adding SVG using an <img> tag --> 
<div class="custom-svg"> 
<img src="{{ 'your-svg-file.svg' | asset_url }}" alt="Your SVG Image" /> 
</div>

• Replace "you-svg-file.svg" with the actual name of the SVG file you uploaded.

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[HeidiM20]

Hi! in our settings we dont have a files?

[sahilsharma9515]

Hi @HeidiM20 My bad, you can find the files in content in your sidebar.

See the screenshot for better understanding.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[HeidiM20]

Okay, we have got the svg in the code you sent we just don't know where to put it

 

[sahilsharma9515]

Hi @HeidiM20 as you have mentioned that you need to add that svg in your home page then you need to add the code in theme.liquid file, You need to look where you need the image then add the code exactly there in the theme.liquid file.

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil