Impulse theme - differences between theme editor website appearance and website preview

ddc
Tourist
8 0 0

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.

A.jpg

Thank you!

0 Likes

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

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
ddc
Tourist
8 0 0

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

0 Likes
ddc
Tourist
8 0 0

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

0 Likes

For temporary please give me the store url.

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
ddc
Tourist
8 0 0

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

0 Likes
ddc
Tourist
8 0 0

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.

0 Likes
ddc
Tourist
8 0 0

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.

0 Likes
jubiden78
New Member
1 0 0

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.

0 Likes
uair545
New Member
1 0 0

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.

0 Likes