How can I remove the preview bar from my themes?

[vapeclub]

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?

[Tira]

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!

[alvinkonda]

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;
}

[Tira]

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!

[euklid]

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

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]

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!

[mnearents]

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]

@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

[mnearents]

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]

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]

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

{% if settings.hide_preview_bar %}

#preview-bar-iframe { display: none!important; }

{% endif %}

[Jossue_Galdamez]

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

[mitxelmo]

---