Can I eliminate the preview bar in Shopify themes?

vapeclub
Visitor
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

Replies 11 (11)

Tira
Shopify Staff (Retired)
1260 90 223

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!

To learn more visit the Shopify Help Center or the Community Blog.

alvinkonda
Shopify Partner
48 6 14

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;
}
KondaSoft.com - Premium Shopify themes that are simple to use, easy to customize, and awesome to your visitors.
Tira
Shopify Staff (Retired)
1260 90 223

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!

 

To learn more visit the Shopify Help Center or the Community Blog.

euklid
Tourist
7 0 15

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!

 


 

Tira
Shopify Staff (Retired)
1260 90 223

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! 

To learn more visit the Shopify Help Center or the Community Blog.

mnearents
Shopify Partner
78 4 48

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?

diego_ezfy
Shopify Partner
2934 562 883

@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

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

mnearents
Shopify Partner
78 4 48

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. 

gina-gregory
Shopify Expert
742 51 211

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.

honeybadgermse
Excursionist
19 0 6

{
"type":"checkbox",
"id":"hide_preview_bar",
"label":"Hide the Shopify preview bar while working in development mode."
}

{% if settings.hide_preview_bar %}

<style>
#preview-bar-iframe {
display: none!important;
}
</style>

{% endif %}

 

 

 

Jossue_Galdamez
Shopify Partner
1 0 0

If you use Theme Kit, you can hide the bar using:

theme open --hidepb

 

https://shopify.dev/docs/themes/tools/theme-kit/command-reference#open