How can I reorganize and customize my website footer?

Cherry_Moon
Excursionist
16 0 3

Hi Hello! I am trying to customize my footer and get both colums to the center, make socials icon appear in the second column instead of text, and make a thrid column with payment icons saying "we accept". Ive made a quick paint picture showing the results. Could someone please help 

https://niedladyktatury.pl/

Cherry_Moon_2-1701610235829.png

Cherry_Moon_3-1701610425427.png

  

Replies 6 (6)

Ollie
Shopify Staff
2321 454 397

Hey @Cherry_Moon.
 
Thanks for reaching out. 
 
Just to gather some additional context, could you let us know what theme you are using for your online store? As this information will allow us to take a look and advise further. 
 
If you are unsure about which theme is live on your store, you can navigate to the Theme Editor and select the three dots that are appearing towards the top left of the page. I took a screenshot from my test store to show you the section I am referring to:
 
04-15-76060-21603
 
Looking forward to your response. 

Ollie | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Cherry_Moon
Excursionist
16 0 3

Theme: Refresh 😁

Ollie
Shopify Staff
2321 454 397

Hey @Cherry_Moon.
 
Thanks for the quick response. 
 
Looking into the Refresh theme, I noticed that using the Theme Editor - we are unable to change the format to have the footer section displayed as described. However, it is possible to make a change of coding to the theme to have it as you would like. While I was looking into making these changes, I did see that the Refresh theme is designed and supported by Shopify. Since we developed the theme, we may be able to use free design time for Shopify themes to allow our internal teams to make the changes on your behalf.
 
04-39-93787-84477
 
If you are interested in using the design time, you will need to reach out to our live support by navigating to the Help Center. This will allow us to verify you as the store owner before speaking directly with a Support Advisor about the changes you would like to see. 
 
Alternatively, if you are interested in hiring an individual to assist you with completing this task, you can reach out to a Shopify Expert
 
Let me know if you have any questions. 

Ollie | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

BSS-Commerce
Shopify Expert
3465 459 515

Hi @Cherry_Moon ,

The best way is to go directly into your theme and edit the footer liquid file to look like this:

view - 2023-12-05T093840.756.png

If you can share your access store, I will help you edit it in the above way. If not, you can do the following:

view - 2023-12-05T093910.534.png

Edit code -> Layout -> theme.liquid, copy this code to the end of the file;

<script>
const socialElement = $(".footer-block--newsletter.scroll-trigger.animate--slide-in");
const firstElement = $(".footer__content-top.page-width .footer__blocks-wrapper").children().eq(0)
const secondElement = $(".footer__content-top.page-width .footer__blocks-wrapper").children().eq(1)
socialElement.css({'--animation-order': '2','align-items': 'start'});
secondElement.css({'--animation-order': '3'});
$(".footer__blocks-wrapper").css({"text-align":"center"})
firstElement.after(socialElement)
</script>

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Cherry_Moon
Excursionist
16 0 3

How can i share my site with you ? 😀

Cherry_Moon
Excursionist
16 0 3

This is what happened after editind the code; 

Before;

Cherry_Moon_1-1701789774033.png

After;

Cherry_Moon_0-1701789718014.png