New Shopify Certification now available: Liquid Storefronts for Theme Developers

Adding a background image to the footer PAIDED THEME

peterg32
Tourist
8 0 0

I'm having an incredibily hard time adding a background image to the footer of my website. I have followed a few tutorials I've came across but I am using a paided (uncommon) theme and it seems like the tutorials are not applicable to all themes. I was hoping I could put the footer.liquid and footer.css code into a google drive doc and someone could help me that way? Any help is greatly appreciated. The theme is "Reformation" if that makes a difference. Thanks.

Replies 8 (8)
Dan-From-Ryviu
Shopify Partner
5679 1047 1073

Hi @peterg32 

Could you share your store URL and image that you want to add it as background of your footer?

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

peterg32
Tourist
8 0 0

here is the preview link https://ij5ct6jk2g7npoyb-61496099021.shopifypreview.com it is not yet live..... and the footer image is attached belowfooter_bg_pattern.png

Dan-From-Ryviu
Shopify Partner
5679 1047 1073

Go to your Online store > Themes > Edit code > open base.css file, add this code at the bottom, and save the file 

#footer { background-img: url('https://community.shopify.com/c/image/serverpage/image-id/379358i382A72C804F79777/image-size/large?v=v2&px=999'); }

Recommend you upload this image to your store admin > Contents > Files copy link and replace it with the current link in my code

Screenshot_4.jpg

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

peterg32
Tourist
8 0 0

I actually do not have a base.css file, is there another equivalent? thank you so much for the help

Dan-From-Ryviu
Shopify Partner
5679 1047 1073

You can add this code to your theme.liquid file in Online store > Themes > Edit code before </head> tag 

<style>
#footer { background-img: url('https://community.shopify.com/c/image/serverpage/image-id/379358i382A72C804F79777/image-size/large?v=v2&px=999'); }
</style>

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

peterg32
Tourist
8 0 0

hey sorry to get back to you so late, but again that didn't work the only difference I can see is that there is now "{}" within the footer but no changed background, see very bottom let corner... also attaching an image of my code (added what u said in line 102). thank youScreenshot (226).pngScreenshot (225).png

Dan-From-Ryviu
Shopify Partner
5679 1047 1073

Please update code to this 

<style>
#footer { background-image: url('https://community.shopify.com/c/image/serverpage/image-id/379358i382A72C804F79777/image-size/large?v...'); }
</style>

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

peterg32
Tourist
8 0 0

You're the man! That did it, but now there is some odd repeating going on, is there anyway to change that? I rather have it expanded to fit the width... here's an image thank you!Screenshot (227).png