Shopify themes, liquid, logos, and UX
To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more
Hi there
I am using the Supply theme and the social media icons/links appear right at the very bottom of the page, underneath the footer, and they are really tiny so will easily be missed.
How do I make these maybe twice the size? I assume I'll have to change some code?
Thank so much
Solved! Go to the solution
This is an accepted solution.
Thanks for update
yes can you please add this code also
ul.social-icons {
margin-top: 15px;
}
Hello,
Thank you for your question.
Please share your store URL, page URL and also password (if your store has one) so we can help you.
Kind regards,
Diego
Hi there
https://katenewingtoninteriors.co.uk/
or
https://kate-newington-interiors.myshopify.com/
I'd be delighted if you can help.
Hey Kate,
Kindly try the following:
1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:
.social-icons li .icon{
font-size: 28px !9mportant;
margin-top: 10px;
}
You can play around with those values.
28px = size of the icons. If you want it bigger, you can try something like 35px or any other value.
10px = spacing on top of the icons.
Let me know whether it helps you.
Hello, @KatesShop
Thanks for the store URL.
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.social-icons li .icon {
font-size: 30px; /* change font size as you like */
}
dantepw - This doesn't seem to be working, even if I alter the size?
KetanKumar - This works perfectly to change the icon size but the icons then crash in to the line above. How would I rectify that?
This is an accepted solution.
Thanks for update
yes can you please add this code also
ul.social-icons {
margin-top: 15px;
}
Perfect! That works brilliantly! And so easy for me to do. Thank you. :0)
Thanks for update and your support.
Hey @KetanKumar,
I have the same request but with another theme: Shella.
I would like to make the social media icons bigger on mobile and desktop.
Here's my store: https:/fineforeal.myshopify.com
password: onbuild.77
Any way you can help me with that?
Thanks or post
yes, please add this code
1. Go to Online Store->Theme->Edit code
2. Asset->/typography.scss.css->paste below code at the bottom of the file.
.social-media .icon {
width: 20px;
min-width: 20px;
}
.social-media .icon-social-facebook {
width: 10px;
min-width: 10px;
}
@KetanKumar Thank you very much Sir, this worked like a charm.
Is there a way to put some space between the Facebook and the twitter Icon so that spacing stays even?
Thanks for it
can you please add code and let me know after i will give spacing code
Sure, the code has been put back now.
Thanks
Thanks
can you please add this code also,
.social-media a {
margin-right: 30px !important;
}
Thanks for your feedback and support.
Hi There.
Do you have the equivalent to work on the Flow theme please? Many thanks in advance.
Ben
Sorry for facing this issue, it's my pleasure to help us.
Welcome to the Shopify community!
and Thanks for your Good question. 😊
Please share your site URL,
So I will check and provide a solution here.
User | RANK |
---|---|
127 | |
95 | |
78 | |
54 | |
46 |
Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022Shipping can be one of the most vital parts to set up and manage your business. Understand...
By Ollie Dec 16, 2022