making social buttons bigger

Store Design
, , , ,
1

How do i add 2 big* Facebook and Instagram buttons to my header ?
Also how do i make the Facebook and Instagram’s buttons in my footer much bigger then they are now ?

maybe you know ?
here is my website:
https://vidaswatches.com/

I’m using dawn.

1 Like
2

Hi @shayvidas

To add social icons to the header, custom coding is required.

However, if you want to make them larger across your entire store, try this solution.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.list-social__item .icon, .utility-bar__grid .list-social__item .icon {
    scale: 1.5;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
3

Hello there @shayvidas follow these steps and it should work for you

  1. Go to Online Store->Theme->Edit code
  2. Asset->/component-list-social.css->paste below code at the bottom of the file:
.list-social__item .icon {
    width: 25px !important;
    height: 25px !important;
}
4

Hi @shayvidas , thank you for posting here!

1. Go to your Shopify admin and navigate to Online Store > Themes.
2. Access Theme Editor. Then find your active theme and click Actions > Edit code.
3. Locate the CSS File
In the left-hand menu, locate your CSS file. This might be named something like:

  • component-list-social.cs
    4. Add Custom CSS

WizzCommerce_Co_0-1733800460286.png
WizzCommerce_Co_0-1733800460286.png925×487 61.7 KB

Replace 120px with the size you prefer. The values for width and height can be adjusted proportionally.

5. Save and Preview
Click Save and then preview your store to check the changes.

Please press 'Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

5

Hello @shayvidas Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

.svg-wrapper {
  width: 40px !important;
}

Thanks

6

hi my very good friend,

so so much thanks for your help on this,
but no i still see this the same i dont see any change

7

thank you my very good friend, for even taking the time with screenshots and all

but not they dont change the size even after saving,

i’m not sure why

8

friend thank you it’s not working (so it seems at least. i dont see any change)

9

Welcome! Would you mind hitting ‘like’ as well? Thanks!

1 Like