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

Solved

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

MMast
Trailblazer
182 1 25

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.

Screenshot 2024-06-29 000142.png

 

https://decemberschild.com/

password: dc

Accepted Solutions (2)

BSSCommerce-HDL
Shopify Partner
1024 345 412

This is an 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 😍

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
1024 345 412

This is an 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 😍

 

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 3 (3)

parth_ghelani
Shopify Partner
74 12 12

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.

Parth Ghelani

BSSCommerce-HDL
Shopify Partner
1024 345 412

This is an 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 😍

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
1024 345 412

This is an 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 😍

 

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