How to add image to footer - narrative theme

Store Design
1

Hi everyone,

I am trying to add an image to my store footer menu, and I’ll be needing a bit of assistance.

I have already added the asset(image) in my theme, but I can’t really find what do I need to change in the footer.liquid

2

@Oliver_Blake

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

1 Like
3

@dmwwebartisan my sotre link is https://muave.co.uk/

1 Like
4

@Oliver_Blake

Please add the following code at the bottom of your assets/theme.css or assets/theme.scss.liquid file.

.site-footer {
width: 100%;
height:100%
background-image: url(assets image url here);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}

Let me know if this works.

Thanks!

1 Like
5

Hey @dmwwebartisan

I’ve tried a few times with different asset URL but sadly didn’t work.

1 Like
6

@Oliver_Blake

You mean you didn’t get theme.scss.liquid file in assets folder?

Please provide a screenshot of the assets folder.

1 Like
7

Hey @dmwwebartisan

I mean I have tried multiple times with the provided code, but It didn’t work. The End result is as shown below on the screenshot.

Screenshot 2021-03-14 at 17.14.43.png
Screenshot 2021-03-14 at 17.14.43.png2880×1585 245 KB

Screenshot 2021-03-14 at 17.15.30.png
Screenshot 2021-03-14 at 17.15.30.png2401×1243 378 KB

1 Like
8

@Oliver_Blake

Remove old given code and add this code at the bottom of your assets/theme.scss.liquid file.

.site-footer {
text-align: center;
background-color: unset !important;
color: white;
padding: 40px 0;
background: url(https://cdn.shopify.com/s/files/1/0465/0434/5749/files/Untitled_design_2_1.jpg?v=1613399584);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}

Hope this works.

Thanks!

2 Likes
9

This one worked, need to do some modification on the background. But works code works perfectly!

Thank you!

1 Like