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 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
The store is live now but the issue still exists. Thanks in advance for a solution.
I tried this on the Supply theme and it didn't work. Any new suggestions?
Dear Brother, I also tried this but not working. screenshot also attached.
Hi,
I just tried to use this solution for the free Shopify theme: Studio.
I ended up accidentally getting rid of the icons altogether!!!
Is there any way you could help me re-add them!? 😞
Thanks,
Alexx Gray
I tried this in the Supply theme and it didn't work either. Suggestions?
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 */
}
My theme is Taste.
User | RANK |
---|---|
207 | |
166 | |
77 | |
56 | |
54 |
Make the shift from discounts to donations, and witness your business not only thrive fina...
By Holly Dec 4, 2023On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023