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

Store Design
,
1

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?

footernow.PNG
footernow.PNG2434×1064 145 KB

footerwish.PNG
footerwish.PNG1879×489 20.4 KB

2

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.

3

thank you so much in advance!

https://26a13e.myshopify.com/

mideer

4

Hi @Bogi2 , you can follow these suggestion:

  • At Shopify Admin, Select Online Store → Themes → Edit Code

BSSCommerce_0-1684293413732.png
BSSCommerce_0-1684293413732.png1493×923 110 KB

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

BSSCommerce_1-1684293430307.png
BSSCommerce_1-1684293430307.png1185×874 47.3 KB

.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;
    }
}
5

Point 1:

  • Find and open the theme.liquid file, add this code before the tag like the image

BSSCommerce_2-1684293539232.png
BSSCommerce_2-1684293539232.png1124×868 57.2 KB
  • Save
6

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.