Preview theme preview bar removed "hide" option

Online Store and Theme Development
1

Has the preview bar for preview themes changed for everyone to no longer offer the “hide preview bar” option?

This has been a super annoying change for us the last 2 weeks because the preview bar is often blocking elements on the page that we need to interact with or see…

2

yup. it’s an annoyance.

So, if you’re interested in a workaround… I noticed that some of our themes have a bit that adds space at the bottom, to pad the bottom of the screen a little bit.

This is a super simple version of it.

{% if content_for_header contains "previewBarInjector.init();" %}
<div style="height: 50px;">
 &nbsp;
</div>
{% endif %}

You want this right before the closing </body> tag, but it can be in a snippet, section, or even in theme.liquid. And, the old preview bar was 50px tall, I haven’t looked at the new one.

p.s. a bonus: to check if you’re in the customizer in the page code, you can use {% if content_for_header contains "Shopify.designMode" %}

3

Yes, it looks like Shopify has made a change to the theme preview bar recently**, and the “Hide Preview Bar” option has been removed or is no longer visible for many users. This has been frustrating, especially for developers and store owners who rely on full-page visibility when testing new themes or customizations.

Workarounds You Can Try:

  1. Add &pb=0 to the URL
    This sometimes disables the preview bar manually. For example:
    https://your-store.myshopify.com/?preview_theme_id=123456789&pb=0
  2. Use Incognito Mode or Resize the Window
    In some cases, using incognito or minimizing the window size forces a simpler view with less overlay interference.
  3. Inspect and Remove via Dev Tools
    If you’re comfortable with code:
    Right-click the preview bar > Inspect.
    Find the <iframe> or the preview <div> and delete it temporarily to view your theme clearly.
  4. Duplicate and Publish Temporarily
    For final checks before going live, some devs now just duplicate the theme and publish it briefly during off-hours to check UI properly.

Pro Tip:
Consider installing STheme Inspector for Chrome — it’s great for performance profiling and sometimes avoids these overlay issues entirely during dev work.

4

Thanks for the suggestions! Looks like luckily Shopify added the “Hide Bar” option back :tada:

1 Like