Centering the shop button and social media icons

Solved

Centering the shop button and social media icons

Radu6
New Member
4 0 0

Radu6_0-1711295744633.png

How can I center both icons one under the other ?

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2139 616 520

This is an accepted solution.

Hey @Radu6,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.footer-block--newsletter.scroll-trigger.animate--slide-in {
    flex-direction: column !important;
    align-items: center !important;
}

.footer__follow-on-shop {
    margin: 0 !important;
}

@media only screen and (min-width: 990px) {
    .footer__follow-on-shop {
        transform: translateX(10px) !important;
    }    
}

</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1711296464722.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 5 (5)

niraj_patel
Shopify Partner
2391 516 513

Hello @Radu6 
Can you share store URL?

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Radu6
New Member
4 0 0

revolve-lifestyle.com

ThePrimeWeb
Shopify Partner
2139 616 520

This is an accepted solution.

Hey @Radu6,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.footer-block--newsletter.scroll-trigger.animate--slide-in {
    flex-direction: column !important;
    align-items: center !important;
}

.footer__follow-on-shop {
    margin: 0 !important;
}

@media only screen and (min-width: 990px) {
    .footer__follow-on-shop {
        transform: translateX(10px) !important;
    }    
}

</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1711296464722.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Radu6
New Member
4 0 0

It works, thank you !

themusicrescue
Visitor
1 0 0

Hey there,

 

I used the code you provided on my site and the social icons are perfectly centered, but the "Follow on shop" button above them is not quite centered. Leans a bit to the right. Screenshot below. URL = themusicrescue.com. Any ideas?

 

Thanks!

 

Screenshot 2025-01-30 110840.png