How do I upload SVG files so I can use them in my Shopify store

Technical Q&A
,
1

I currently have PNG versions of my images uploaded to my store, but they appear pixelated and low-quality on mobile devices due to being scaled up. To ensure high-quality visuals, I need to use SVG files instead. Could you please guide me on how to implement SVG files to maintain image quality across all devices? Thank you!

2

Hi @CameronO
To use SVG images in-store you can upload them to files :backhand_index_pointing_down:

HuptechWeb_0-1725437270997.png
HuptechWeb_0-1725437270997.png1864×772 108 KB

Or if the file is not uploading then you can use the second method

Got to theme → edit code → goto snippet :backhand_index_pointing_down:

HuptechWeb_1-1725437419562.png
HuptechWeb_1-1725437419562.png1694×842 63.8 KB

Then you can render it using the below code

{% render 'icon-success' %}<-- add the file name you have added

HuptechWeb_2-1725437498443.png
HuptechWeb_2-1725437498443.png1607×290 22.3 KB

Thank you

D.P.

3

Will I be able to select the specific svg to upload to a section in my store once done? I have 4 svg files which i cannot directly upload. Do I have to make separate snippets for each? Thanks in advance

4

Hi @CameronO
If you cannot directly upload it, Then you can create 4 separate snippet for each SVG and render as I have suggested previously as per the section.

5

I have done that, but all it does it paste the svg at the top of my screen, I want it to be placed instead of an image, how do I do that?

6

Hi @CameronO
You have to add the code like below in the section where you need the image to show not on theme.liquid. I have taken theme.liquid file only for example purposes. ( change the name as per the snippet name ).

{% render 'icon-success' %}