How can I change the color of my footer background?

Store Design
,
1

Hello everyone , I want change the Background color of my Footer , Can you please help me in out here is my URL

2

Hi @alexahex12 ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea for solution:

Step 1. Go to Online Store → Theme → Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before :

Note: You can adjust color to fit your store

Hope my answer will help you.

Best regards,

Victor | PageFly

3

Hello @alexahex12

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.site-middle-footer-wrap .site-footer-row-container-inner {
    background: #808080 !important;
}
4

Hi @alexahex12

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the css file:

.site-middle-footer-wrap .site-footer-row-container-inner {background: #f1eeee !important;}

Note: If you want to change the color then you can just replace the color code.

Regards,

San

5

Hi @alexahex12

1.Go to the online store

  1. Edit the code base.css and paste the code:

.site-middle-footer-wrap .site-footer-row-container-inner {
background: #000000;
}

6

To change the color of the footer background, locate the CSS code responsible for styling the footer. Within the CSS, find the property that controls the background color, usually labeled as “background-color.” Modify the color value to your desired shade, such as “shoeofpickle ,” which will give your footer background the specified color. Finally, save the changes to see the updated footer color on your website.

8

To give your footer a fresh coat of color, sprinkle this snippet in your style ingredients:

footer

{background-color: #YourChosenColor; /* Stir in your favorite color code /
color: #fff; / Add a dash of text color for contrast /
padding: 10px; / Adjust the padding to taste /
text-align: center; / Align the text at the center for a neat presentation */
}

Replace #YourChosenColor with the color of your choice yt5s and let your website’s footer shine with its newfound vibrancy!

11

You can easily change your footer background color using a bit of CSS.
If you’re using WordPress, go to:
Appearance → Customize → Additional CSS and add this line:

footer {
  background-color: #000000; /* replace with your preferred color code */
}

If you’re editing through HTML or a custom theme file, just locate the <footer> tag in your code and add an inline style like this:

<footer style="background-color:#222;">

This method works across most platforms.

By the way, if you’re working on site customization or want to learn more about user-friendly design tweaks, you can check out Spotify Premium — they share practical guides and tools for better app and web experiences.

12 
.site-middle-footer-wrap .site-footer-row-container-inner {
    background: #000000 !important;
}

try rhis code.

13

it’s a 2 years old Question that asked by @alexahex12 But I am replying in hope that it might helpful to other Merchants who has the confusion about how to change the background color of the footer. haha :blush:

For this you need to follow these steps.

Go to Shopify admin >> Online Store >> Edit Code >> global.min.css

In the end of global.min.css paste the code that shared below.

.site-middle-footer-wrap .site-footer-row-container-inner {
 background: #f5f5f5;
}

You can change any value from #f5f5f5 to any color background that you want.

If this was helpful Mark as Solution and Like it.

Cheers :slight_smile:

14

Hi @alexahex12
Please try below code:
Online store > Themes > Edit theme > Click on the Theme settings icon on the left > Scroll down to the bottom and paste it to the custom CSS tab.
.site-middle-footer-wrap .site-footer-row-container-inner {
background: #000 !important;
}

15

Hello @alexahex12

To change the color of the background in footer

 → Go to Online Store → Theme → Edit code 

 → Open your base.css file 

 → Paste the below code before on base.css

.site-middle-footer-wrap .site-footer-row-container-inner
{
	background: #ddd;
}

Please hit Like and Mark it as a Solution if you find our reply helpful.