How can I support svg images in my footer?

Solved
dada78
Tourist
7 1 0

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!

0 Likes
neeravmakwana
Shopify Partner
164 29 32
dada78
Tourist
7 1 0

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

0 Likes
neeravmakwana
Shopify Partner
164 29 32

Typically footer related code is in footer.liquid file. 

0 Likes
dada78
Tourist
7 1 0

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 %}

 

0 Likes
neeravmakwana
Shopify Partner
164 29 32

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.

0 Likes
dada78
Tourist
7 1 0

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

0 Likes
neeravmakwana
Shopify Partner
164 29 32
Sorry. Maybe if you mention the name of the theme others may be able to
help you.

0 Likes
dada78
Tourist
7 1 0

This is an 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 }}" /> 

 

0 Likes
neeravmakwana
Shopify Partner
164 29 32

That's great. Good luck with your store!