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!

Replies 9 (9)

oscprofessional
Shopify Partner
15830 2369 3071

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
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

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

oscprofessional
Shopify Partner
15830 2369 3071

For temporary please give me the store url.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
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

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.

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.

jubiden78
Visitor
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.

uair545
Visitor
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.