Footer copyright and payment icons text location

[thraine]

Hello everyone ;

Im trying to change my copyright text to center but couldnt manage to do it.I read articles but doesnt work.

My theme is SPLIT theme

Can anyone help me about this

[PageFly-Noah]

This is Noah from PageFly - Shopify Page Builder App

You can follow code here to align center copyright:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>

<style>
.footer__copyright{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

</style>

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

[Xipirons]

Hi @thraine 

Try this at the bottom of your ccs file :

.site-footer .footer-bottom {
  justify-content: center!important;
}

[BrainStation23]

hi @thraine ,
Here is how you can make the footer part in the center

1. Go to your theme editor.
2. Go to Footer part and add another section named Custom HTML/Liquid

3. Add the code from below in the custom liquid section.

<style>
.footer-container > .footer-bottom {
 justify-content: center;
}
</style>

4. Click save

It should keep the copyright part in the center like the example below

Let us know if you need more help with this issue.

[thraine]

Thank you guys it worked but another issue for payment method also centered.

can it be payment left copyright center seperately ? in same line

Best

[BrainStation23]

hi @thraine ,

Go to the custom liquid section that you created. and add this and replace the whole code with this 

<style>
.footer-container > .footer-bottom {
 justify-content: center;
}

.footer-container .site-payment {
display: flex;
justify-content: center;
gap: 0.3rem;
}

</style>

 
don't worry even if you haven't used a custom liquid section before this solution will work. Check my comment to this thread before to see how to add custom liquid section in you're theme.

[thraine]

Hello

it works but payment section also become centered.ı want payment left side with same line

[BrainStation23 · Accepted solution]

hi @thraine 
Sure thing just replace the contents of the custom liquid section with this

<style>
.footer-container > .footer-bottom {
 justify-content: center;
}

.footer-copyright {
 display:flex;
 justify-content: center;
align-items: center;
 position: relative;
width: 100%;
margin-top: 0;
}

.site-payment {
 position: absolute;
 left: 0;
}

</style>

[thraine]

that works great !

And last one how can i remove padding footer section.as you see there is more space

[BrainStation23]

hi @thraine 

Sure you can replace the contents of custom liquid section with this

<style>
.footer-container > .footer-bottom {
 justify-content: center;
 padding-top: 10px !important;
 padding-bottom: 10px !important;
}

.footer-copyright {
 display:flex;
 justify-content: center;
align-items: center;
 position: relative;
width: 100%;
}

.footer-copyright > .site-copyright {
 margin-top: 0;
}

.site-payment {
 position: absolute;
 left: 0;
 top: 0;
}
</style>