Change look of the footer - Stiletto Theme

[stinem123]

Hi, I am making a new upgrade to my store, and just bought Stiletto Theme

Anyone who can help with some coding, so the bottom of the footer will have same look as my previous webshop? I want it to look more like the second picture, where card icons are placed in the left side, link to social medias (only facebook & Instagram) in the right side and small copyright text below that. And then the thin line that divides the footer in two sections. 

I have made pictures for you. First picture is my webshop now: 

https://l5xe7beo5c7cqxqo-57068945600.shopifypreview.com

(Preview only available in two days)

Second picture is my original webshop that I want the same look from:

https://www.melchiorjewelry.com/

Thank you very much! I really hope someone can help!

.

.

.

.

.

.

.

.

@GemPages_Agents 

@KetanKumar 

@hammadCodes 

@PaulNewton 

@Ninthony 

@dmwwebartisan 

@ExpertRookie 

@MandasaTech 

@GemPages 

@Mike-Omega 

@PageFly-Richard 

[stearis]

Hi @stinem123 

if your theme does not give you the option to display it like this, you will have to code it with CSS.

I can try to write the CSS code, however, you will have to add the social media icons.

Oh and nice relaunch you did there!

Kind regards, 
Najam

[stinem123]

Hi @stearis thanks for your reply!

Yes, it will be very helpful if you could try write the CSS code, I really appreciate. Also I just tried to add the social media icons, but I can´t find how to show them anymore.. You can see the theme editor here, but I can´t find the option to show the icons in the footer. Do you know where or how this can be done?

And thank you so much, glad you like the new relaunch design. So happy about that!

[stearis]

It should be in the global theme settings, usually if you don't add the links it is not shown.

You have to click on the brush on the upper left (2nd icon)

[stinem123]

Hi @stearis

I tried that too, but nothing happens.. both links for facebook an Instagram are added, but there are no social media icons. Any other suggestions?

https://nf2d0v1w8yzwjkof-57068945600.shopifypreview.com

[Moeed]

Hey @stinem123 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

<style>
.apicons.apicons-desktop {
    display: flex;
    border-top: 2px solid #a79828;
    border-style: solid;
    border-image-slice: 1;
    border-bottom: 0;
    border-left: 0;
    border-right: 0 !important;
}
@media screen and (min-width: 1024px) {
.footer__bottom {
    justify-content: flex-end;
    margin-bottom: -70px;
}
}
</style>

For further changes, Feel free to contact me and I will do them for you.

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[stinem123]

Hi @Moeed, thank you  very much! Is it possible to make the line thinner, so it is just slightly visible? And then if it is possible to make some spacing between the line and payment icons?

And can the placement of the payment icons be parallel with the text above?

Just like in this picture: 

Thank you so much for your help!

[Moeed · Accepted solution]

Hey @stinem123 
Remove the previous code and add this updated code by following the same steps.

<style>
@media screen and (min-width: 1024px) {
.apicons.apicons-desktop {
    display: flex;
    border-top: 1px solid #a79828;
    border-style: solid;
    border-image-slice: 1;
    border-bottom: 0;
    border-left: 0;
    border-right: 0 !important;
    padding-top: 30px;
}
.footer__bottom {
    justify-content: flex-end;
    margin-bottom: -70px;
}
}
</style>

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[stinem123]

@Moeed Thank you so so much works perfect, looks great!

[Ujjaval]

@stinem123 add below css into theme.css file 

.footer__bottom {
 border-top: solid 1px;

}
.apicons-desktop {
    text-align: left !important;
}

.fs-body-50 {
   position: absolute;
    right: 0;
    bottom: 0;
}