Re: Adjusting size of social icons, Flow theme

PCBCW · ‎04-08-2024

Hello, I am trying to adjust the size of the social media icons on my site, yearsbeer.com. I would like to make them bigger. Please see attached for photo of current size. Thank you!

ThePrimeWeb · ‎04-08-2024

Hey @PCBCW,

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.

Change 30px to any value you want. Make sure to match both width and height to the same number.

<style>
body footer ul#sm-icons li svg {
    height: 30px !important;
    width: 30px !important;
}
</style>

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

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

PageFly-Noah · ‎04-08-2024

This is Noah from PageFly - Shopify Page Builder App

Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>

<style>
#sm-icons li a svg{
    width: 40px !important; //you can change 40 to params you want
    height: 40px !important;
}

</style>

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

PageFly - #1 Page Builder for Shopify merchants.

All features are available from Free plan. Live Chat Support is available 24/7.

PCBCW · ‎04-08-2024

Hey Noah,

Tried this, it did not work.

PageFly-Noah · ‎04-08-2024

Hi @PCBCW please add code here again.

<style>
  .footer-main #sm-icons li svg{
     width: 40px !important; //you can change param you want
     height: 40px !important;
}
</style>

Please let me know if it works by giving it a Like or marking it as a solution!

PageFly - #1 Page Builder for Shopify merchants.

All features are available from Free plan. Live Chat Support is available 24/7.

ThePrimeWeb · ‎04-08-2024

Hey @PCBCW,

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.

Change 30px to any value you want. Make sure to match both width and height to the same number.

<style>
body footer ul#sm-icons li svg {
    height: 30px !important;
    width: 30px !important;
}
</style>

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

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!

PCBCW · ‎04-08-2024

That worked, thank you so much!

Re: Adjusting size of social icons, Flow theme

Adjusting size of social icons, Flow theme

☕Buy me a coffee☕

☕Buy me a coffee☕

Community Blog Articles