add social media n logo in footer ?

ABISSTOR
Explorer
60 1 18

i am stuck how do i  add this

anyone please help 

Capture.PNG

0 Likes
twinkleppc
Excursionist
30 3 6

Go to Online Store > Themes > Edit Code > Assets > Add New Asset. 

Name it custom.css

Add the following code in this asset:

 

.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}



.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

.fa-pinterest {
  background: #cb2027;
  color: white;
}

.fa-snapchat-ghost {
  background: #fffc00;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.fa-skype {
  background: #00aff0;
  color: white;
}

.fa-android {
  background: #a4c639;
  color: white;
}

.fa-dribbble {
  background: #ea4c89;
  color: white;
}

.fa-vimeo {
  background: #45bbff;
  color: white;
}

.fa-tumblr {
  background: #2c4762;
  color: white;
}

.fa-vine {
  background: #00b489;
  color: white;
}

.fa-foursquare {
  background: #45bbff;
  color: white;
}

.fa-stumbleupon {
  background: #eb4924;
  color: white;
}

.fa-flickr {
  background: #f40083;
  color: white;
}

.fa-yahoo {
  background: #430297;
  color: white;
}

.fa-soundcloud {
  background: #ff5500;
  color: white;
}

.fa-reddit {
  background: #ff5700;
  color: white;
}

.fa-rss {
  background: #ff6600;
  color: white;
}

 

 

Go to footer.liquid

Find code something like <div class="grid">

Under this add the following: 

 

<!-- Add font awesome icons -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-pinterest"></a>
<a href="#" class="fa fa-snapchat-ghost"></a>

Should work.

 

Ravi Thakor
Digital Marketing Specialist | twinkleppc.co
email: ravi@twinkleppc.co
0 Likes
ABISSTOR
Explorer
60 1 18

@twinkleppc no not working, i tried didn't work so removed it

0 Likes
twinkleppc
Excursionist
30 3 6

can you please add your store link here? 

 

Is it abbistor.com? 

Ravi Thakor
Digital Marketing Specialist | twinkleppc.co
email: ravi@twinkleppc.co
0 Likes
twinkleppc
Excursionist
30 3 6

Re adding logo to the footer, this video will help. 

 

Make sure to add the link of code with angled brackets when you copy from the description. Or 

here's the code: 

<img src="https://1000logos.net/wp-content/uploads/2021/04/Facebook-logo.png" alt="LOGO" width="50" height="33">

 Hope this helps. 

Re adding social icons, I'll need your store URL. But yes, you can use almost the same method. 

Ravi Thakor
Digital Marketing Specialist | twinkleppc.co
email: ravi@twinkleppc.co
Boardhaven
Tourist
8 0 2

Hey Twinkle PPC,

I was able to add the logo on the right-hand side watching you video using the following code:

<img class="logo_footer" src="//cdn.shopify.com/s/files/1/0587/5970/8870/files/Boardhaven_Logo_300x300.jpg?v=1628183492" width="500px">

Screenshot 2021-08-13 175047.jpg

The logo is where I want, however, I would like to move the logo slightly up and to the left, so it looks aligned.

Can you help with shifting the logo a little bit.

Thank you.

0 Likes
Boardhaven
Tourist
8 0 2

Hey Twinkleppc,

I don't know why shopify keeps deleting my reply, but I was able to add logo to the footer watching your video.Screenshot 2021-08-13 183450.jpg

This is just a mock up image, but the logo is placed in the highlighted area (it is were I want it to be), with the paragraph below the logo. However, I would like to shift the logo slightly upward and to the left, i.e, just below "Talk about your business", so it looks aligned.

Could you help with that?

Thank you.

0 Likes
twinkleppc
Excursionist
30 3 6

Apologies for replying late. I was on a vacation away from my laptop. 

Were you able to fix this? Let me know if you still need my help on this and I'll check. 

Best

Ravi Thakor
Digital Marketing Specialist | twinkleppc.co
email: ravi@twinkleppc.co
Boardhaven
Tourist
8 0 2

Hey,

No worries. I was able to solve the problem by adding the following code to the theme.css file and changing the px value :

.logo_footer {
margin-top: 10px;
margin-left: 0px;
}

Anyway, thanks again and cheers.