Re: Add SVG file to section on homepage

Add SVG file to section on homepage

HeidiM20
Visitor
3 0 0

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! 

Replies 5 (5)

sahilsharma9515
Shopify Partner
1257 163 241

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

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


HeidiM20
Visitor
3 0 0

Hi! in our settings we dont have a files?

sahilsharma9515
Shopify Partner
1257 163 241

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

See the screenshot for better understanding.

 

sahilsharma9515_0-1726743081484.png

 

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

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


HeidiM20
Visitor
3 0 0

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

Screenshot 2024-09-19 at 19.22.49 2.png

sahilsharma9515
Shopify Partner
1257 163 241

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

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️