Hi,
Does anyone have any idea why I might have differences between the theme editor website appearance and the website preview?
I edited the theme code because the client preferred the icons in a circle. This worked just fine in the site preview a few months back when I customized the theme. The website is on hold for now, but I wanted to check today to see if everything is fine and I noticed this. All good in the theme editor, but not in the site preview.
Thank you!
Hello,
you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!
Please Share your store live url where you want to do modification, so that I will solve your issue here
Hi,.
Thank you for your prompt reply.
The store is not live yet. I customized the Impulse theme for a client. I was hoping you could point me in the right direction so I can solve this issue myself, if possible?
Thanks again
Hi,
I’m not sure if my question got lost around here, so I’m giving it one more try. Did anyone face this issue/error before, or can anyone help me with an explanation, a solution, please?
Thank you
For temporary please give me the store url.
I can’t send the store url, I signed an NDA so I can’t share it. I can share any code extract that might help.
The icons I attached were initially set to be aligned to left, as all the footer text. But I managed to alter the code and add the pink circles around the icons and I also managed to center the icons in the circle. But now, I have no idea why the social icons are left aligned again, all was fine until now. As I said, in the theme editor, the icons are centered in the circle, but in the site preview not.
Please let me know if you need me to send any info or code extract.
Thank you
For reference, this example website uses Impulse theme as well. https://yukon-outfitters.com/
What I did for my website was to duplicate the footer newsletter snippet that you also see in the example website above and adjusted it to have only the social icons listed. I named the snippet footer-social.
Then I styled the icons in css. Here is the code I added.
@media only screen and (max-width:768px){
.footer__social{
border:none; !important;
}
}
@media only screen and (min-width:769px){
.footer__social{
padding-top:45px;
justify-content:left; !important;
margin-left:-20px; !important;
}
ul.footer__social {
width: 100%;
text-align: center; !important;
}
ul.footer__social > li {
display: inline-block;
}
ul.footer__social > li > a {
display: inline-block;
font-size: 18px;
line-height: 36px;
width: 36px;
height: 36px;
border-radius: 36px;
background-color: #e19abb;
color: #fff;
}
ul.footer__social > li > a:hover {
text-decoration: none;
background-color: #D17CA3;
}
@media only screen and (max-width:768px){
.footer__social{
text-align:center; !important;
padding-left:14px; !important;
}
}
.footer__social li{
text-align:center: !important;
}
What doesn’t make sense to me is why in the theme editor my icons look fine, icons centered inside the pink circle, and in the site preview not.
It seems I fixed it.
I added text-align:center; under **‘’**ul.footer__social > li > a { ‘’ as well.
ul.footer__social > li > a {
display: inline-block;
font-size: 18px;
line-height: 36px;
width: 36px;
height: 36px;
border-radius: 36px;
background-color: #e19abb;
color: #fff;
text-align:center;
}
Thanks a lot for offering to help. I hope I won’t have issues like this again.
Thai is very good question and I think the one reason that I know about it is pretty lengthy so you need to read it in details you can learn about it on the link here.
Theme editor website appearance is totally different as compare to website preview if you wanna learn about impulse theme then visit here and try to read all the points in details.
