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.
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.
Hey there ! 🙂 I have the same problem and I tried every solution you have given on this thread but nothing worked.
Do you have any solution for the Icon theme? I have stylesheet.css.
The url to my website is www.wrinklesschminkles.is
yes please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/stylesheet.css ->paste below code at the bottom of the file.
.share-icons--icon { width: 50px ; height: 50px ; }
Thanks it works 🙂
Hi
I have a problem with the code, the Instagram icon does not respond to the code.
Thank you for reaching out and posting this question!
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Thanks for url but i can't see any issue currently looking good
@Rox1 yes please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/stylesheet.css->paste below code at the bottom of the file.
svg.icon--instagram.social-icons--icon {
width: 50px;
height: 50px;
}
Please ketankumar, I also have the same problem, I want to make the social media icon at the bottom of the footer bigger,
here is the website link sir https://trendyvendyla.com/
Thank you God bless you for the support
Please ketankumar, I also have the same problem, I want to make the social media icon at the bottom of the footer bigger,
here is the website link sir https://trendyvendyla.com/
Thank you God bless you for the support
Hi,
I am trying to make the social medias bigger for the footer on Capital theme.
could you please help me to do it?
Thank you
sorry for that issue please share store url
thanks for url, can you please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme-index.min.css ->paste below code at the bottom of the file.
.main-footer-inner .social svg {
height: 35px ; width: 35px;
}
it works perfectly!
thanks a lot for your help
its my pleasure to help us
Hi,
I still have a small problem with the add to cart button. I can make it the same size as the buy with PayPal button on desktop, but the size will be different on mobile devices.
Is there a way to fix this?
Thank you
yes please add this code
1. Go to Online Store->Theme->Edit code
2. Asset->/custom.css ->paste below code at the bottom of the file.
.product-details .product-form .form-actions .button {
min-width: 100% !important;
}
it works fine.
thank you so much
Hi there
I could not find file called typography.scss.css in Shella Theme. Could you please assist me
I'm trying to increase social media font both in header and footer.
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
thanks for ulr but sorry your store password protect
I forgot the pass sorry for that pass: bahshe
oh sorry for late can you try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme-d.css ->paste below code at the bottom of the file.
.footer__social-media .social-media .icon {
width: 30px;
min-width: 30px;
}
.footer__social-media .social-media .icon-social-facebook {
width: 15px !important;
min-width: 15px !important;
}
sorry for that issue can you send store url
thanks but your store password protect
yes, please
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024