Shopify themes, liquid, logos, and UX
Hello, community
Have a question, who can help me with the code, I will show in the picture:
I wanna move social icons to follow us.
Web: homeda.co.uk
Psw: picture
Theme: dawn
Thanks for the help.
Solved! Go to the solution
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>
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.
@PageFly-Kate I will wait maybe someone gives me a better solution.
It's not nice, thanks for trying to help me.
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.
@PageFly-Kate cant find this step: Step3: Then you change the CSS property of the .footer__list-social class to justify-content: start !important;
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.
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.
@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
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.
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.
@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.
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.
@PageFly-Kate You can go check now, I have made how you told me, and happens like that.
@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.
@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.
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>
<style>
@media screen and (min-width: 980px){
ul.footer__list-social.list-unstyled.list-social {
margin-left: 770px;
position: relative;
bottom: 300px;
}
}
</style>
Hope this answer helps.
Best regards,
Victor | PageFly
Yes thanks it's works, but when you moving the window size it's not working:
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
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>
It's possible on mobile when the tab is closed, don't show the social icons, just then open shows?
@PageFly-Kate cant find this step: Step3: Then you change the CSS property of the .footer__list-social class to justify-content: start !important;
This question I have sorted it, have one more simple question, if you can help me, I left you the link to my post:
Thanks
About your problem i think you need to contact theme so they can give the best solution to fix their code inside.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024