Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
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.
Hi @peterg32
Could you share your store URL and image that you want to add it as background of your footer?
- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
here is the preview link https://ij5ct6jk2g7npoyb-61496099021.shopifypreview.com it is not yet live..... and the footer image is attached below
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
- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
I actually do not have a base.css file, is there another equivalent? thank you so much for the help
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 & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
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 you
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 & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
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!