How can I customize the footer menu on my website?

Store Design
1

Hey,

I am currently working on the Footer Menu. There are a few things i really want to change but i need some help.

1: I want to put the Social Media Icons above the quick Links. (Desktop/Mobile)

2: On mobile i want to center the quick links and put them more together. currently my Footer looks like this: and i put a Screenshot from an Example i like aswell:

Bildschirmfoto 2023-02-20 um 17.38.38.png
Bildschirmfoto 2023-02-20 um 17.38.38.png1022×1218 26.3 KB

I want to look my Footer on mobile like this. The Links should be centred and less space between them.

IMG_5409.jpg
IMG_5409.jpg1170×1306 85.3 KB

I would be so glad if anybody could help me.

Link to the shop: https://lgoony-shop.myshopify.com/

PW: merkelmachshopauf

Thank you in advance

Hendrik

2

Hello @Hendrik99 ,

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1676948576812.png
GemPages_0-1676948576812.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1676948597393.png
GemPages_1-1676948597393.png1901×893 73 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

3

Hey,
Thank you so much for your reply. Unfortunately the code doesnt work as expected. Only the quick links are flush left now on mobile, other than that, nothing changes. Do you have any idea why?

Kind & Best Regards

Hendrik

4

Hi @Hendrik99

Please follow these steps:

  • Import the following JS code into the global.js or theme.js file:
const footer = document.querySelector('.footer__content-top')
const footerChildren = footer.children
footerChildren[1].after(footerChildren[0])
  • Import the following CSS into the base.css file or one of the other files:
@media screen and (max-width: 749px){
   .footer-block__details-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }
  .list-menu__item{
    margin-right: 12px;
  }
}

I hope that it will work for you.

5

Thank you so much. it worked. :slightly_smiling_face: