Adding an image to the footer - blockshop theme

[peter550]

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.

[dmwwebartisan]

@peter550

Please share your store URL.

Thanks!

[Zworthkey]

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

[peter550]

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

[dmwwebartisan]

@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!

[peter550]

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]

@peter550

Please following URL for help

https://help.shopify.com/en/manual/shopify-admin/productivity-tools/file-uploads#upload-a-file-on-the-files-page

[peter550]

hi everyone

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

[dmwwebartisan]

@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!

[peter550]

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

[dmwwebartisan]

@peter550

This is code customization work .

Thanks!

[peter550]

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

[dmwwebartisan]

@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!

[peter550]

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

[dmwwebartisan]

@peter550

Please try following css class

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

Thanks!

[peter550]

Amazing! You legend. That worked.

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

[dmwwebartisan]

@peter550

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

This is code customization work .

[peter550]

Do you have the code for it?

[peter550]

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

[husia735]

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.