How can I support svg images in my footer?

[dada78]

Hi guys,

I found the part of my theme code that I would need to modify, however I am not sure how? I would like to be able to upload svgs instead of bitmaps. Here it goes:

<div class="velaPayment pull-right hidden-xs hidden-sm">
<div class="vela-content">
{% if section.settings.contactinfo_payment != blank %}
<img class="img-responsive" alt="" src="{{ section.settings.contactinfo_payment | img_url: 'master' }}" />
{% else %}
<img class="img-responsive" alt="{{ shop.name }}" src="//placehold.it/115x80.jpg" />
{% endif %}

Please advise, thanks so much!

[neeravmakwana]

Welcome to Shopify Community!

Does this solve your problem?

https://community.shopify.com/c/Shopify-Discussion/Change-footer-background-image-to-SVG/m-p/566903#...

[dada78]

Yeah I saw this, but not sure where to insert this code or what needs to be replaced in the code I posted. Thanks!

[neeravmakwana]

Typically footer related code is in footer.liquid file. 

[dada78]

Right I know, I just mean where in the code? Thanks!

Basically instead of having the placehol.it/115x80.jpg as a src, I would like it to be svg.

<div class="velaPayment pull-right hidden-xs hidden-sm">
<div class="vela-content">
{% if section.settings.contactinfo_payment != blank %}
<img class="img-responsive" alt="" src="{{ section.settings.contactinfo_payment | img_url: 'master' }}" />
{% else %}
<img class="img-responsive" alt="{{ shop.name }}" src="//placehold.it/115x80.jpg" />
{% endif %}

[neeravmakwana]

I tried this on a couple of my test stores and it worked fine.

Step 1: Navigate to Assets (in theme code editor) > Add a new asset. Upload your image. Let's say you name it as 'ABC.svg' .

Step 2: Add this code at the end of your theme.scss.liquid file (please do not modify anything other than the text in red):

#shopify-section-footer {
background-image:url({{ 'ABC.svg' | asset_url }});
}

Please let me know if this worked.

[dada78]

No unfortunately it didn't work. Thank you though.

[neeravmakwana]

Sorry. Maybe if you mention the name of the theme others may be able to
help you.

[dada78 · Accepted solution]

Thanks again, I actually figured it out. I followed your instruction and uploaded my svg. Then I went and altered this line:

<img class="img-responsive" alt="{{ shop.name }}" src="//placehold.it/115x80.jpg" />

to this one (where 'your_logo.svg' is the asset uploaded)

<img class="img-responsive" alt="{{ shop.name }}" src="{{ 'your_logo.svg' | asset_url }}" /> 

[neeravmakwana]

That's great. Good luck with your store!