Shopify themes, liquid, logos, and UX
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 |
---|---|
209 | |
149 | |
69 | |
46 | |
39 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023