Storefront footer contents without Plugins

What kind of content are you wanting to display? The footer has areas for widgets which with the Custom HTML widget you could setup almost anything in there.

Hi Jarret,

Thx for your replay,

I want to put a miniature logo, Newsletter subscription, about us, privacy policy, Terms, payments, etc…

I see there are 2 parts of footers in storefront:

The first: contain the copyright

The second: where the widgets put elements or contents because I did some tries there.

I want also and it’s important:
1/ to REDUCE the heights of both footers.
2/ to center the copyright in the one’s footer

Have you some codes to do so?

Many Thanks

For the miniature logo/newsletter you should be able to use the Custom HTML widget and add in your HTML code to that. May need to style the elements after accordingly though to get the exact look.

Reducing the height of the footer is hard to say without seeing a live site to determine how thin you want it. It would also depend on the widgets/content you have placed in there as that will determine the minimum height.

If you want to center the copyright stuff in the footer you can add the following into Appearance->Customize->Additional CSS

.site-footer .site-info {
  text-align: center;
}

The code for centering copyright works well.

For reducing paddings footer I tried several codes but they don’t work on storefront.

If you have a code and then I can adjust it to fit my case.

Thx in advance.

I think this may get you closer to what you’re looking for

.footer-widgets {
  padding-top: 0;
}

If not, are you able to grab a screenshot and illustrate the areas you’re wanting to reduce?

Hi,

I apply your recent code but not working, unfortunately.

Here are 2 screenshots of the footers: widget footer & copyright footer. If you can see the line which separates them.

The first screenshot is the native storefront footers without modifications at all.

The second screenshot I used the following code to reduce the copyright footer and works well:

.site-footer {
padding: 0.5em 0 0.7em !important;
}
.site-info {
padding: 0.5em 0 !important;
}

You see the result on screeshot2 UNLESS the copyright is not FULLY centered in the footer box. It’s centered in the width but not in the Height. I used your code given above for centering.

For the widget footer, I think a reduce by -40% up to 45% will fit the contents.

Then the issues now are:

1/ to reduce the footer widget by -40% up to 45%
2/ to center the copyright in the Height of the footer copyright box.

Many thanks for the help.

https://i.postimg.cc/8Pr3yKmR/footers-1.jpg
https://i.postimg.cc/6QBmp9Jc/footers-2.jpg

Hi,
Any help please..

Hey @ayyourcasa – are you still having this problem? The images you shared are no longer available.

Further, can you please share a live URL of where this is happening? That would make the troubleshooting a lot easier. Thanks!

We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.