How to remove the Shopify preview bar ?

Highlighted
New Member
4 0 0

Hi,

I'm facing an issue on my website : on the checkout page, I get the Shopify preview bar at the bottom of my screen ("You're previewing : theme #..."). I can not remove it, and I think my customers could see it too (I tried to check with a different browser, through a proxy, and the bar was still visible).

I've searched in every file, I can not find where this bar is displayed in my code. So I tried to just hide it with the following code, but it didn't work either.

.shopify-preview-bar { display:none; }

Any idea how to hide this bar ?

Thanks

0 Likes
Highlighted
Shopify Staff
Shopify Staff
754 42 145

Hey, Aline!

Katy here from Shopify. Thanks for posting. ?

Not to worry, this bar is only visible to you internally, and is not visible to your customers.  We have a little more info on this here.

I suggest to clear your browser cache, and see if this does the trick for you. 

If not though, do send me a link to your store  and I can check it out from my side. Alternatively you can check with our support team, if you prefer to do so instead. 

I hope this helps!

Katy
 

Katy | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
New Member
4 0 0

Hi Katy,
Thank you for your reply !
My customers can actually see this bar... I had someone in a different country try this for me, and they were able to see the bar.
My website is http://alineisbad.com if you want to ckeck it out.

0 Likes
Highlighted
New Member
4 0 0

I forgot to specify, the bar is only visible on the french version of the website, at checkout.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
754 42 145

Hi, Aline!

Thanks so much for getting back to me on this- and for linking your store too.

I do see what you mean here- and this indeed is not expected behavior for any store. 

I have taken a closer look, and it seems to be caused by the app you are using to translate your store, and how this is interacting with your current theme. 

I've sent you an email so we can verify your details, and get this sent through to the app developer, to help fix this for you. Do please reply to me when you can.

Katy
 

Katy | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Shopify Expert
9925 103 1763

Even if there is an app creating that dropdown the result isn't something you'd want to rely on.

The links in the country selector are links to theme previews. So you're choosing to show an unpublished theme to customers.

This is an Admin feature relied on more for developing and testing themes - not for sharing with customers. As it's not the intended use for the preview feature unexpected results should be expected.

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
New Member
4 0 0

Thank you very much Katy, I will reply to your email shortly.

Jason, the translation app I'm using is actually fonctionning this way : my main theme (the published one) is the english version of the store. A copy of this main theme, translated to french (therefore unpublished) is used as the french version of the store.
I went through different multi language apps on the Shopify app store, and it looks like they were all working like this one.
If you do know about a multi language app that functions differently, I'd like to hear about it.
This is my first experience building a website on Shopify so I'm not familiar with everything yet.

0 Likes
Highlighted
New Member
1 0 0

Hi Jason,

 

We are having this problem as well and we can't figure out how to fix it or how it happened in the first place.

 

We go to our home page, everything looks fine, and then we click on a product in a collection, and it enters preview mode on our live theme for some reason.  How do we turn that off?  People aren't able to check out and we are losing tons of business.


Thank You!

Clayton

0 Likes
Highlighted
Tourist
31 0 1
Whilst developing a theme, I add this into my theme.scss.liquid file as the bar gets in the way.
 
#preview-bar-iframe {
  display: none !important;
}
0 Likes
Highlighted
New Member
2 0 1

This is happening to me and it’s super annoying being as though customers aren’t able to check out. Please help.

0 Likes