Add SVG file to section on homepage

Shopify Discussion

Topic summary

Adding an animated SVG from Canva to the Shopify homepage section. The poster can only add it as a video or a non-moving image and needs it to display as an SVG.

Key steps suggested:

  • Upload the SVG via Content > Files (not Settings). Copy the file URL.
  • Go to Online Store > Themes > Edit code. Open the relevant file (e.g., theme.liquid or the specific homepage section) and insert an img tag that references the SVG file URL.

Clarifications and updates:

  • Initial direction to use Settings > Files was corrected to Content > Files. A screenshot was provided to show the new location.
  • The user has the SVG and a code snippet but doesn’t know where to place it within the theme.

Current guidance:

  • Insert the code in theme.liquid exactly where the SVG should appear on the homepage. The helper offered to implement the changes if needed.

Notes:

  • Screenshots are central for locating Files and showing the code editor context.
  • SVG (Scalable Vector Graphics) is a vector image format that can include animation.

Status: No confirmed resolution yet; next step is placing the snippet in the desired homepage location or accepting implementation help.

Summarized with AI on December 19. AI used: gpt-5.
1

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!

2

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.
  • 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

3

Hi! in our settings we dont have a files?

4

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

See the screenshot for better understanding.

sahilsharma9515_0-1726743081484.png
sahilsharma9515_0-1726743081484.png259×856 24.4 KB

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

Best Regards

Sahil

5

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
Screenshot 2024-09-19 at 19.22.49 2.png1572×952 115 KB

6

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