How To Move Instagram Icon Beside Country/Region Selector In Footer

Solved

How To Move Instagram Icon Beside Country/Region Selector In Footer

MMast
Trailblazer
182 1 25

Thanks in advance!

I am looking to move the instagram logo beside my country/region selector in the footer section and for pc only.

Example shown below.

Screenshot 2024-07-05 211641.png

https://decemberschild.com/

password: dc

Accepted Solutions (2)

BSSCommerce-HDL
Shopify Partner
1062 364 434

This is an accepted solution.

Hi @MMast, For css: 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media screen and (min-width: 750px) {
    localization-form {
      display: flex;
    }
    localization-form .list-social__item:has(.list-social__link>.icon-instagram) {
      list-style: none;
      transform: translateY(7px);
    }
    .footer__content-top .list-social__item:has(.list-social__link>.icon-instagram) {
      display: none;
    }
   
}
</style>

 Hope this can help you 😍

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSSCommerce-HDL
Shopify Partner
1062 364 434

This is an accepted solution.

And this for script to move icon ig: 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </body> tag:

 

 <script>
    let icon_ig = document.querySelector('.list-social__item:has(.list-social__link>.icon-instagram)');
    let parentInstagramIcon = icon_ig.parentNode;
    let footer_localization = document.querySelector('.footer__content-bottom-wrapper .footer__localization localization-form');
      
    function updateFooterLocalization() {
    if (footer_localization && icon_ig) {
     if (window.innerWidth >= 750) { 
        footer_localization.insertAdjacentElement('beforeend', icon_ig);
     } else {
       parentInstagramIcon.appendChild(icon_ig);
     }
    }
  }
  updateFooterLocalization();

  // Run on window resize
  window.addEventListener('resize', updateFooterLocalization);
    </script>

 

Hope this can help you,

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

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 2 (2)

BSSCommerce-HDL
Shopify Partner
1062 364 434

This is an accepted solution.

Hi @MMast, For css: 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media screen and (min-width: 750px) {
    localization-form {
      display: flex;
    }
    localization-form .list-social__item:has(.list-social__link>.icon-instagram) {
      list-style: none;
      transform: translateY(7px);
    }
    .footer__content-top .list-social__item:has(.list-social__link>.icon-instagram) {
      display: none;
    }
   
}
</style>

 Hope this can help you 😍

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

BSSCommerce-HDL
Shopify Partner
1062 364 434

This is an accepted solution.

And this for script to move icon ig: 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </body> tag:

 

 <script>
    let icon_ig = document.querySelector('.list-social__item:has(.list-social__link>.icon-instagram)');
    let parentInstagramIcon = icon_ig.parentNode;
    let footer_localization = document.querySelector('.footer__content-bottom-wrapper .footer__localization localization-form');
      
    function updateFooterLocalization() {
    if (footer_localization && icon_ig) {
     if (window.innerWidth >= 750) { 
        footer_localization.insertAdjacentElement('beforeend', icon_ig);
     } else {
       parentInstagramIcon.appendChild(icon_ig);
     }
    }
  }
  updateFooterLocalization();

  // Run on window resize
  window.addEventListener('resize', updateFooterLocalization);
    </script>

 

Hope this can help you,

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

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency