How can I update my theme footer's social media layout?

[Bogi2]

Hi,

I have two problems with my footer design:

1. I would like the email subscription to be positioned as a 6th column in the footer.

2. I would like the social media icons to be visible next to the text Facebook and Instagram under the "Kövess Minket" section

Could anyone help me out please?

[BSS-Commerce · Accepted solution]

Point 1:

- Find and open the theme.liquid file, add this code before the </body> tag like the image

<script>
    let footerEmail = document.querySelector(".footer-block__newsletter");
    let footerWrapper = document.querySelector(".footer__blocks-wrapper");
    
    if(footerEmail) {
        footerEmail.remove();
        footerEmail.classList.remove("footer-block__newsletter");
        footerEmail.classList.add("footer-block");
        footerEmail.classList.add("grid__item");
        footerWrapper.appendChild(footerEmail);
    }
</script>

- Save

[BSS-Commerce]

Hi @Bogi2 
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[Bogi2]

thank you so much in advance!

https://26a13e.myshopify.com/

mideer

[BSS-Commerce]

Hi @Bogi2 , you can follow these suggestion:

- At Shopify Admin, Select Online Store -> Themes -> Edit Code

- Find and open the file base.css, add this code at the end of the file

.footer-block__brand-info .rte h6{
    display: flex;
    align-items: center;
}

.footer-block__brand-info .rte h6 svg {
    height: 20px;
    margin-right: 6px;
    color: #fff;
}

.footer-block__brand-info .rte h6 .list-social__link.link {
    padding: 0 !important;
}

.footer .page-width {
    max-width: 125rem !important;
}
@media (min-width: 767px) {
    .footer .footer__blocks-wrapper.grid--4-col-tablet .grid__item.footer-block {
        width: calc(16.67% - 20px) !important;
    }
}

[BSS-Commerce · Accepted solution]

Point 1:

- Find and open the theme.liquid file, add this code before the </body> tag like the image

<script>
    let footerEmail = document.querySelector(".footer-block__newsletter");
    let footerWrapper = document.querySelector(".footer__blocks-wrapper");
    
    if(footerEmail) {
        footerEmail.remove();
        footerEmail.classList.remove("footer-block__newsletter");
        footerEmail.classList.add("footer-block");
        footerEmail.classList.add("grid__item");
        footerWrapper.appendChild(footerEmail);
    }
</script>

- Save

[BSS-Commerce · Accepted solution]

Point 2:

Find and open the file global.js, add this code at the end of the file global.js

let footerContainer = document.querySelector(".footer-block--newsletter");

let linkSocials = document.querySelectorAll(".link.list-social__link");

let textSocials = document.querySelectorAll(".footer-block__brand-info .rte h6");

if(footerContainer){
    footerContainer.remove();
}
if(linkSocials.length && textSocials.length) {
    textSocials.forEach((text, index) => {
        text.prepend(linkSocials[index]);
    })
}

- Save

Hope these suggestion can help you.