Change footer from single color to image

Solved
Highlighted

Go to  the setting then click on files.

89.PNG

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Highlighted

 

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

 

.shopify-section .site-footer {
    background-image: url(https://cdn.shopify.com/s/files/1/0469/7138/8057/files/velikost-footer.png?v=1600259425);
}
.site-footer p, .site-footer__linklist-item a, .site-footer__rte a, .site-footer h4, .site-footer small, .site-footer__copyright-content a, .site-footer__newsletter-error, .site-footer__social-icons .social-icons__link {
    color: #000 !important;
}

 

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
11 0 0

Thanks!

I managed this, but now the image size is super big (I would prefer for it to be smaller). The mobile version also duplicates the image instead of using only one. Can you advise on the best size for footer images? Thank you so much for your helpduplicated.PNG

0 Likes
Highlighted

This is an accepted solution.

add this css with previous one

.shopify-section .site-footer {
    background-image: url(https://cdn.shopify.com/s/files/1/0469/7138/8057/files/velikost-footer.png?v=1600259425);
    background-repeat: no-repeat;
    background-size: cover;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted

In Mobile version you can hide the image or use the color.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
11 0 0

OMG this is so awesome thanks so much! I really appreciate your help. All the codes work, I can't believe it

 

Now If I wanted the foot photo to go above the actual footer text, would that be possible as well?

0 Likes