Solved

Can someone assist me to move social icons in Shopify?

Deoxes
Navigator
361 2 85

Hello, community

 

Have a question, who can help me with the code, I will show in the picture:

Screenshot 2023-01-30 at 19.09.49.png

I wanna move social icons to follow us.

 

Web: homeda.co.uk

Psw: picture

Theme: dawn

 

Thanks for the help.

 

Accepted Solution (1)
PageFly-Victor
Shopify Partner
7865 1785 3050

This is an accepted solution.

Help me add this code to flie theme.liquid, In the code there is a script tag I use to move the icon below the text and the CSS code has a tag style that can style it to customize the position of the icon.

 

<script>
const interval=setInterval(()=>{
const social=document.querySelector('.footer__list-social')
if(social){
clearInterval(interval)
document.querySelector('.footer-block.grid__item:last-child').appendChild(social)
}
},1)
setTimeout(()=>{
clearInterval(interval)
},10000)
</script>

<style>
ul.footer__list-social.list-unstyled.list-social {
display: flex;
justify-content: start !important;
}
</style>

 

View solution in original post

Replies 23 (23)

PageFly-Kate
Shopify Partner
1044 315 308

Hi @Deoxes 

I'm Kate from PageFly - Landing Page Builder, I’d like to suggest this idea: 

Step 1: You find class class="footer__list-social list-unstyled list-social" in online store theme 

Step 2: You move the class you just found into the class class="footer-block grid__item"

Step3: Then you change the CSS property of the .footer__list-social class to justify-content: start !important;

This is the result that I tested on your store: https://imgur.com/a/fFFK0SN

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Deoxes
Navigator
361 2 85

@PageFly-Kate I will wait maybe someone gives me a better solution.

Screenshot 2023-01-30 at 19.50.58.png

It's not nice, thanks for trying to help me.

PageFly-Kate
Shopify Partner
1044 315 308

Hi @Deoxes 

I’m sorry to hear that. Please give it a try with this new solution:

Step 1: You find class class="footer__list-social list-unstyled list-social" in online store theme 

Step 2: You move the class you just found into the class class="footer-block grid__item"

Step3: Then you change the CSS property of the .footer__list-social class to justify-content: start !important; and margin: -1rem !important;

This is the result that I tested on your store: https://imgur.com/a/9Zw8q9c

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Deoxes
Navigator
361 2 85

@PageFly-Kate cant find this step: Step3: Then you change the CSS property of the .footer__list-social class to justify-content: start !important;

PageFly-Kate
Shopify Partner
1044 315 308

Hi @Deoxes 

.footer__list-social is in the file homeda.css : https://imgur.com/a/oyi7beS

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Deoxes
Navigator
361 2 85

@PageFly-Kate 

Added like you told me:

Screenshot 2023-01-30 at 21.22.39.pngScreenshot 2023-01-30 at 21.22.50.png

And looks like : 

Screenshot 2023-01-30 at 21.22.23.png

PageFly-Kate
Shopify Partner
1044 315 308

Hi @Deoxes 

You must expect all the list of social icons into the footer-block grid__item class

Can you let me login to your store edit code and i will fix it for you

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Deoxes
Navigator
361 2 85

@PageFly-Kate  better will be if I add myself because if I need remove it, I will do it, if I don't do myself, I need ask one more time to community it will be better if I do it myself, thanks

PageFly-Kate
Shopify Partner
1044 315 308

Hi @Deoxes 

I’m sorry to hear that. Please give it a try with this solution: 

You have found the correct class of it, but the position is not correct, so I have an updated image where the item list is located for your reference.

https://imgur.com/a/Th8nVHG

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Deoxes
Navigator
361 2 85

@PageFly-Kate  Because I'm working on a duplicate and now running the original theme. Ok maybe I will try tomorrow today need to go, thanks for the help.

PageFly-Kate
Shopify Partner
1044 315 308

Hi @Deoxes 

Sure, I’m happy to help you

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Deoxes
Navigator
361 2 85

@PageFly-Kate  You can go check now, I have made how you told me, and happens like that.

Screenshot 2023-01-31 at 08.57.46.png

Deoxes
Navigator
361 2 85

@PageFly-Kate Or maybe it's can be just I don't understand you, please explain everything step by step in simple language, because I don't understand what you write me, where and what I need to change because I changed what you tell me but it's nothing happening. to me.

Deoxes
Navigator
361 2 85

@PageFly-Kate I publish my normal theme because I broke last theme to trying fix it, I will wait maybe someone helps me because I don't understand how you telling me to fix it, thanks. for the help.

Deoxes
Navigator
361 2 85

@PageFly-Victor  

 

 

Maybe can you better explain how I can fix it?

 

PageFly-Victor
Shopify Partner
7865 1785 3050

Hi @Deoxes,

 

This is Victor from PageFly - Shopify page builder app, thank you for mentioning me.

 

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag </body>

 

PageFlyVictor_0-1675153259940.png

 

 

<style>
@media screen and (min-width: 980px){
ul.footer__list-social.list-unstyled.list-social {
    margin-left: 770px;
    position: relative;
    bottom: 300px;
}
}
</style>

 

 

PageFlyVictor_1-1675153395393.png

 

Hope this answer helps.

Best regards,

Victor | PageFly

Deoxes
Navigator
361 2 85

@PageFly-Victor 

Yes thanks it's works, but when you moving the window size it's not working:

Screenshot 2023-01-31 at 10.26.24.png

I think I need maybe to do like the top gives me the solution, but it's not explained clearly.

Maybe can you read the above solution and give me step by step what I need to do.

Thanks

 

PageFly-Victor
Shopify Partner
7865 1785 3050

This is an accepted solution.

Help me add this code to flie theme.liquid, In the code there is a script tag I use to move the icon below the text and the CSS code has a tag style that can style it to customize the position of the icon.

 

<script>
const interval=setInterval(()=>{
const social=document.querySelector('.footer__list-social')
if(social){
clearInterval(interval)
document.querySelector('.footer-block.grid__item:last-child').appendChild(social)
}
},1)
setTimeout(()=>{
clearInterval(interval)
},10000)
</script>

<style>
ul.footer__list-social.list-unstyled.list-social {
display: flex;
justify-content: start !important;
}
</style>

 

Deoxes
Navigator
361 2 85

@PageFly-Victor It's working, thank you very much!

Deoxes
Navigator
361 2 85

@PageFly-Victor 

It's possible on mobile when the tab is closed, don't show the social icons, just then open shows?

Screenshot 2023-01-31 at 14.19.11.png

Deoxes
Navigator
361 2 85

@PageFly-Kate cant find this step: Step3: Then you change the CSS property of the .footer__list-social class to justify-content: start !important;

Deoxes
Navigator
361 2 85

@PageFly-Victor 

This question I have sorted it, have one more simple question, if you can help me, I left you the link to my post:

https://community.shopify.com/c/shopify-design/dawn-theme-move-social-media-icons-into-the-footer-ta...

 

Thanks

PageFly-Victor
Shopify Partner
7865 1785 3050

About your problem i think you need to contact theme so they can give the best solution to fix their code inside.