"Trust Badge" line image right above the footer?

Solved
New Member
7 0 0

Hey! Last time you guys helped me to solve the design issue of mine in absolutely no time.

 

This time, I would like to know how to add this trust badge type of photo in between the Instagram section and footer? It's on both of the following websites:

 

 

I tried creating an image of the same size as theirs in Photoshop and add it to my theme's footer section. I'm using Pipeline theme and it allows you to add a photo at that very same area - between the Instagram section and footer. But as I add it, it's super tiny. Like, I tried all types of photos and images - they all eventually get resized and it looks nothing like on these two websites above.

 

Please, help me to solve this issue.

0 Likes
Shopify Partner
1866 311 399

Hi @sargonluciano 

Add bellow line on starting of section->footer.liquid file:

<img class="footer_img" src="//cdn.shopify.com/s/files/1/1004/8438/t/32/assets/benefits_banner.png?6416" width="100%">
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes
New Member
7 0 0

Can not express how thankful I am, I'm finally able to add my own .png trust badge in that section. It might of not been an issue for those who know some basic coding but for me - god damn it. Thank you, dear.

0 Likes
New Member
7 0 0

I ran ahead of time when checked this as the solution.

 

It definitely looks great on the desktop version but not on the mobile.

 

If you can, please check that banner of those two websites I linked on desktop and then on mobile version. On desktop, it's great. On mobile version, they have these blocks that each go below the previous one. By adding the code you provided, on the mobile version it looks just like on the desktop version which causes the .png to look real tiny and in a straight line.

 

I tried increasing the size and give up on getting those blocks but then it looks too big on the desktop version.

 

Please, I need those blocks on the mobile version while the desktop version has a straight line!

0 Likes

Success.

Shopify Partner
1866 311 399

Add this code and remove old one:

 

<img class="footer_img_desk" src="//cdn.shopify.com/s/files/1/1004/8438/t/32/assets/benefits_banner.png?6416" width="100%">
<img class="footer_img_mob" src="//cdn.shopify.com/s/files/1/1004/8438/t/32/assets/benefits_banner_Mobile.png" width="100%">

Add this css to Asset->theme.scss file at bottom of file

@media only screen and (max-width: 767px) {
.footer_img_desk{ display: none;}
}
@media only screen and (min-width: 767px) {
.footer_img_mob{ display: none;}
}

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes
New Member
7 0 0

Jasoliya, you know you are the best.

 

Tried the code (didn't have theme.scss so I added the code to style-something which as far as I know is the same thing) and now - everything looks exactly how I imagined.

 

Much love to you!

0 Likes