Changing social media icon location and color: How?

Shopify Discussion
1

Hi

How to move social media in here?

2022-12-05 12 39 15.jpg
2022-12-05 12 39 15.jpg1214×466 46.7 KB

Second question. Can I change icons color?

Thank you so much

1 Like
2

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

1 Like
3

Hello .@ZestardTech

Sure no problem.

My website url https://hanklee182online.myshopify.com/

Password:teadri

Thank you very much

1 Like
4

Hello there,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >global.js and paste this at the bottom of the file:
$(".section-footer-padding .footer__content-top").each(function(){
var html = $(this).find(".footer-block--newsletter").html();
$(this).find(".footer-block--newsletter").remove();
$(this).find(".footer-block.grid__item:last-child .footer-block__details-content").append(""+html+"
");
});
  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
.footer-block.grid__item:last-child ul.footer__list-social.list-unstyled.list-social {
justify-content: flex-start;
padding-left: 0;
}
.footer-block.grid__item:last-child ul.footer__list-social.list-unstyled.list-social li.list-social__item:first-child a {
padding-left: 0;
}

ZestardTech_0-1670221962463.png
ZestardTech_0-1670221962463.png1817×567 31.1 KB

1 Like
5

Hi .@ZestardTech

Paste code in global.js and base.css file still no work.

I will try again

thank you so much

1 Like
6

Hi ZestardTech

Sorry I tried again still no work.

Thank you

7

Hello there,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Layout >theme.liquid and paste this at the bottom of the file:
  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >section-footer.css and paste this at the bottom of the file:
footer-block.grid__item:last-child ul.footer__list-social.list-unstyled.list-social {
justify-content: flex-start;
padding-left: 0;
}
.footer-block.grid__item:last-child ul.footer__list-social.list-unstyled.list-social li.list-social__item:first-child a {
padding-left: 0;
}
1 Like
8

Hi ZestardTech

Sorry I tried paste code again still not working.

Thank you

9

Hi @HankLee182 ,

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Add this CSS at the bottom
Online Store ->Theme ->Edit code
Assets → section-footer.css

.footer__content-top {
position: relative !important;
}
@media screen and (min-width: 750px) {
.footer-block--newsletter {
display: inline-block !important;
position: absolute !important;
top: 0 !important;
left: 72% !important;
}
}
@media (max-width: 749px) {
.footer-block--newsletter {
display: inline-block !important;
position: absolute !important;
top: 80% !important;
left: 4% !important;
}
}

Hope you find my answer helpful!

Best regards,
Victor | PageFly

1 Like
10

Hi PageFly-Victor

It’s working now.

Can I adjust icon more closer?

Thank you

1 Like
11

Hello there,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >section-footer.css and paste this at the bottom of the file:
a.link.list-social__link {
padding: 1rem!important;
}
1 Like
12

Hi ZestardTech and PageFly-Victor

It’s working now.

Appreciate :+1:

2 Likes
13

Hi @HankLee182 ,

Great! I’m glad it works perfectly on your end :blush:

1 Like
14

Hi .@PageFly-Victor

Thanks to PageFly-Victor.

If you no support I can make it.

Appreciate :+1:

1 Like
15

Hi @HankLee182 ,

You’re most welcome! :wink: