How To Move Footer Link To The Bottom Right On PC Version

[MMast]

Thanks in advance!

I am looking to move my footer links to the bottom right only for pc version. I would like it to align with the country/region selector. Example shown below.

https://decemberschild.com/

password: dc

[BSSCommerce-HDL · Accepted solution]

Hi @MMast, 

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 policies = document.querySelector('.footer-block__details-content.list-unstyled');
    let parentPolicies = policies.parentNode;
    let footer_bottom = document.querySelector('.footer__content-bottom-wrapper .footer__localization');
    if (footer_bottom && policies) {
     if (window.innerWidth >= 750) { // Desktop layout
        footer_bottom.insertAdjacentElement('beforeend', policies);
      } else { // Mobile layout (revert to original)
         parentPolicies.appendChild(policies);
      }
    }
      
    function updateFooterLayout() {
    if (footer_bottom && policies) {
     if (window.innerWidth >= 750) { // Desktop layout
        footer_bottom.insertAdjacentElement('beforeend', policies);
     } else { // Mobile layout (revert to original)
       parentPolicies.appendChild(policies);
     }
    }
  }
  updateFooterLayout();

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

Hope this can help you 😍

[parth_ghelani]

Hello @MMast 

To change the placement of footer links in your site, you need to make changes in code side so the links are placed align with the country selector.

Without changing code, its not possible.

if you want me to do this. then you need to give access of your site so i can make changes in your site. I will not charge anything for this.

[BSSCommerce-HDL · Accepted solution]

Hi @MMast, 

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 policies = document.querySelector('.footer-block__details-content.list-unstyled');
    let parentPolicies = policies.parentNode;
    let footer_bottom = document.querySelector('.footer__content-bottom-wrapper .footer__localization');
    if (footer_bottom && policies) {
     if (window.innerWidth >= 750) { // Desktop layout
        footer_bottom.insertAdjacentElement('beforeend', policies);
      } else { // Mobile layout (revert to original)
         parentPolicies.appendChild(policies);
      }
    }
      
    function updateFooterLayout() {
    if (footer_bottom && policies) {
     if (window.innerWidth >= 750) { // Desktop layout
        footer_bottom.insertAdjacentElement('beforeend', policies);
     } else { // Mobile layout (revert to original)
       parentPolicies.appendChild(policies);
     }
    }
  }
  updateFooterLayout();

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

Hope this can help you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @@MMast, i modify a bit css: 

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

Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file -> Save

@media screen and (min-width: 750px) {
    .footer-block__details-content {
        display: flex;
        align-items: center;
    }
    localization-form {
       margin-right: auto;
    }
    .footer__column.footer__localization {
      align-items: center !important;
    }
}

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 😍