how to remove preview bar

vapeclub
New Member
1 0 0

hello need some help in removing preview bar. i have 2 main themes one is live the other is not but i still want to use these for customer that i am sharing link with them.any way to remove the bar?Capture.JPG

0 Likes
Tira
Shopify Staff
Shopify Staff
1001 61 164

Hi, @vapeclub.

 

Tira here, from Shopify.

 

Thanks for reaching out. I can see the reason why you're looking to remove the preview bar from your theme preview. This banner is placed on the theme to help the user become aware that the theme is only a preview and is not the published look of the store. Check out our help doc that explains how previewing themes work, here: Share a preview link with customers.

 

You can click on the blue link that says "Hide bar" to hide the preview bar on the theme. Please note that this preview bar will reappear each time you navigate to a brand new page. 

 

Let me know if that helps!

Tira | 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
alvinkonda
Shopify Partner
44 5 9

Hello, maybe Shopify team will delete my answer as im not sure if you are allowed to remove the preview bottom bar, but anyway here is the CSS code to do it.

 

html {
  padding-bottom: 0!important;
}

#preview-bar-iframe {
  display: none!important;
}
FireTheme.com - The Best Free Shopify Theme To Increase Conversion Rates (CVR)
Increase your store conversion rates (CVR) and average order value (AOV) with FireTheme, the world's most-loved Free Shopify Theme. Developed for maximum performance, flexibility in mind, and simplicity at core, you can be 100% sure that...
Tira
Shopify Staff
Shopify Staff
1001 61 164

Thank you for the suggestion, @alvinkonda.

 

Please note that the preview bar only displays to the account owner and staff who are logged in, and viewing a theme that isn't published, so adding this code would not be necessary.

 

If you do plan on adding this code to your theme I recommend creating a backup of your theme, so that you can refer to a copy of your theme if the customizations made on your theme don't go as planned. Check out our help doc, here: Duplicating a theme to learn about making a copy of your theme and discarding changes if needed.

 

Cheers!

 

Tira | 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

euklid
Tourist
7 0 6

Hello, thanks for the css code. 

 

Can I just say that I can see the bar in a published theme and wondering if there is something wrong with my site.


@Tira wrote:

Thank you for the suggestion, @alvinkonda.

 

Please note that the preview bar only displays to the account owner and staff who are logged in, and viewing a theme that isn't published, so adding this code would not be necessary.

 

If you do plan on adding this code to your theme I recommend creating a backup of your theme, so that you can refer to a copy of your theme if the customizations made on your theme don't go as planned. Check out our help doc, here: Duplicating a theme to learn about making a copy of your theme and discarding changes if needed.

 

Cheers!

 


 

0 Likes
Tira
Shopify Staff
Shopify Staff
1001 61 164

Hi, @euklid.

 

Tira here, from Shopify. 

 

Can you please provide a screenshot of what you are seeing so that the community and I can take a look?

 

The preview bar will only show on a theme if you are using the preview link to access the theme. You can navigate to this page by following these steps:

 

- Login to your Shopify Admin 

- Click on "Online Store > Themes"

- Click on "Actions > Preview" 

- This will open up a preview of your theme and the preview bar will show on the bottom of your theme. You can click the "Close Preview" button to close the preview bar. 

 

Once I have more information from you I can help! 

Tira | 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
mnearents
Excursionist
33 3 9

I am seeing the preview bar on the published version of my theme using my main shopify theme url: sitename.myshopify.com. Is that supposed to happen?

0 Likes

@mnearents 

Yes, that is supposed to happen since you're the admin/staff member of the website. Only those can see the preview bar, your clients won't be able to see it, so don't worry. 

Make sure you click on the button close preview so you're not accidentally seeing an old version of your theme and you're indeed looking at the published theme. 

In addition, always view your website through an incognito page to avoid any cache issues. Each browser has a different way to access the incognito mode, so please do a quick google search to understand how to achieve that for your specific browser if you're unfamiliar with it.

You can also learn more about unpublished & published themes on this blog post.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Add a slider to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Contact: ezfycode@gmail.com.
mnearents
Excursionist
33 3 9

It's really confusing. What is the point of calling your live website a "preview"? It makes me second guess that I am looking at the right thing. But I figured out the pressing Close versus Hide gets rid of it. However it does come back. 

0 Likes
gina-gregory
Shopify Expert
710 48 170

You can also remove the preview bar by appending '?pb=0' to your preview link, such as

https://yourdomain.com/?preview_theme_id=1234567890&pb=0  

or 

https://abcdefghijk1234567890.shopifypreview.com/?pb=0  

Using this method will keep the preview bar from popping up on subsequent pages.