Adding an image to the footer - blockshop theme

peter550
Explorer
76 1 36

HI hive mind,I would like to add an image as a background for the footer, similar to a previous squarespace site image below. I am using the blockshop theme and am quite rusty on adding custom code, so some clear instructions would be very helpful! 🙂  Thank you very much in advance. 

 

Screenshot 2021-10-08 at 14.15.07.png

LPS_Klaviyo_footer_2.png

Replies 19 (19)

dmwwebartisan
Shopify Partner
12282 2546 3694

@peter550 

Please share your store URL.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

Zworthkey
Shopify Partner
5581 642 1565

Hii, @peter550 
Kindly share your store URL so,
I can solve it perfectly.
Thank You.

peter550
Explorer
76 1 36
dmwwebartisan
Shopify Partner
12282 2546 3694

@peter550 

 Please Go to Online Store->Theme->Edit code then go to assets/theme--critical.css ->paste below code at the bottom of the file. 

#shopify-section-framework--footer{
 background-image: url("your image url");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
peter550
Explorer
76 1 36

Thank you I will give that a go! Where do I upload the image to then have the URL to put in the code? 

 

Pete

 

dmwwebartisan
Shopify Partner
12282 2546 3694
peter550
Explorer
76 1 36

hi everyone


i tried the code but it doesnt seem to work 😞 not sure if i'm doing it wrong

Screenshot 2021-10-08 at 16.27.26.pngScreenshot 2021-10-08 at 16.30.57.png

dmwwebartisan
Shopify Partner
12282 2546 3694

@peter550 

Your code is correct Please add following css class

Please Go to Online Store->Theme->Edit code then go to assets/theme--critical.css ->paste below code at the bottom of the file.

.footer--root { background: transparent !important;}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
peter550
Explorer
76 1 36

Wonderfull thank you. That worked! Theres a slight issue now where the text overlaps. Is there a way to pull the footer text into the centre? like in the image, but with more info like in the first image

 

Screenshot 2021-10-08 at 16.45.08.pngScreenshot 2021-10-08 at 16.45.22.png

dmwwebartisan
Shopify Partner
12282 2546 3694

@peter550 

This is code customization work .

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
peter550
Explorer
76 1 36

hi everyone, 

 

is there a way to get the footer text to be pulled into the centre, so thats it's visible in the middle of the plants? I would like to have the email subscribe box and the name of the site + instagram logo in the middle. You can see it overlaps here

 

Screenshot 2021-10-14 at 18.46.23.png

dmwwebartisan
Shopify Partner
12282 2546 3694

@peter550 

Please Go to Online Store->Theme->Edit code then go to assets/theme--critical.css ->paste below code at the bottom of the file. 

.footer--blocks { width: 50%; margin: 0 auto;}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
peter550
Explorer
76 1 36

hiya 

 

thanks for this. Unfortunately its moved everything to the left. I would like both parts to be in the middle of the plants, with an even margin on the either side

 

Screenshot 2021-10-20 at 11.27.05.png

dmwwebartisan
Shopify Partner
12282 2546 3694

@peter550 

Please try following css class

.footer--blocks { width: 50%; margin: 0 auto !important;}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
peter550
Explorer
76 1 36

Amazing! You legend. That worked. 

 

Do you have an idea of how to add an instagram link to the header bar? 

dmwwebartisan
Shopify Partner
12282 2546 3694

@peter550 

Do you have an idea of how to add an instagram link to the header bar? 

This is code customization work .

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
peter550
Explorer
76 1 36

Do you have the code for it? 

peter550
Explorer
76 1 36

Hi everyone

I would like my footer image to be aligned to the bottom of the page when on mobile view. I would also like the image to be smaller, compared to a laptop, so its more of a frame like on a laptop views (see pic) 

I used this code to have the image in the footer: 

#shopify-section-framework--footer{
 background-image: url("your image url");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

 

I would also like to centre the email sign up form when in mobile view. Its currently off centre

 

https://laz-the-plant-scientist.myshopify.com/ pword test

 

WhatsApp Image 2021-11-01 at 19.01.07.jpegScreenshot 2021-11-01 at 19.19.45.png

husia735
Visitor
1 0 0

Is there additionally a way to alter the logo size from the cellular view as nicely? Your solution worked well for the desktop linkbut I can see my brand remains tiny at the cell layout.