How can I successfully swap a JPG image for an SVG in a custom theme?

[Cristero]

Hi guys,

this must be something really easy for some of you, but I can't figure it out. I'm trying to swap the background image of collapsible tab from jpg to svg.

I found where the image is located in the theme codes (product.json), but I didn't succeed in making the theme load it correctly. The svg is already loaded in shopify files and I copied the link of the file and replaced "Supplement_Facts_Limitless_68d97a95-bee2-4ed9-9570-49d77efdb2a1.jpg" with "Supplement_Facts_Limitless.svg" but the image is not loading. What am I doing wrong?

I'm using a custom theme called Split.

Screenshot: https://prnt.sc/w5KnTAr0D8fP

[agentfitz1]

Are you able to load the SVG based on the path Shopify provides (in the files area)?

For example, if you create a new tab in your browser and paste in the URL provided in the Shopify files area for your SVG, does the image load as expected?

i.e., open new tab and paste in your files' url

https://cdn.shopify.com/s/files/my/path/my-svg.svg

Does it load? If it loads in an independent browser tab, the next step would be to look at your network pane in Chrome Dev Tools and determine exactly which path your theme is attempting to load when it tries to load your .svg ...... does it match the path that you pasted in your browser tab? If not, why not? See if you can tweak the path to make sure it matches, or look at the theme code and see if it's doing anything funky.

Also, from a troubleshooting standpoint, why not try it with a .png as well?

Also, I have started a Slack community for Shopify Devs. Join to ask questions provide support to other Shopify developers in a real time: https://open-shopify-dev.slack.com/

[Cristero]

Hi Agentfitz1 and thanks for your response.

If I copy paste the link of the file uploaded on Shopify, it asks me where I want to download the svg: https://prnt.sc/GkBR1YayHh9J. Then if I save the svg on my PC and open it, it loads correctly.

Did I load it incorrectly on Shopify?