Shopify Theme Name Bar Closed PLEASE

Technical Q&A
, , , ,
1

How to remove the red marked bar?

Urgent help.

I am using a licensed theme.

Without a Shopify account. It appears in another browser.

Action bar closed videos and solutions do not work.

HOW.png
HOW.png1905Ă—970 257 KB

2

To remove or hide this “Closed Bar” in Shopify, you have these options:

1. Buy the theme license- If you purchased Lumia officially, once you activate the licensed theme, this demo/footer bar will disappear automatically.

  • If it’s still there even after purchase, you might need to re-upload the licensed version or contact the theme developer.

2. Manually hide it with CSS (Quick Fix)

If you just want to visually hide it (not recommended for long-term production), you can add this to your Shopify theme’s CSS:

#preview-bar-iframe, 
.shopify-preview-bar {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
}

Steps:

  1. Go to Online Store > Themes > Actions > Edit code.

  2. Open your theme.liquid file or your main CSS file (could be theme.css, base.css, or similar).

  3. Add the above CSS at the bottom.

  4. Save.

:bell: Note: This will only hide it from customers visually — the code is still loaded in the background. For a clean site, licensing the theme is better.

3. Remove it from the code (If allowed)

If you want a more proper solution:

  • Find where the theme injects this bar. It’s usually inside the theme.liquid file, possibly referencing something like

    or
1 Like
3

It looks like a Preview Bar which is shown when previewing Draft themes. It does not seem to be about licensing.

Interestingly, there is a number of places in the HTML code like this


Or

```markup

See how addresses have a &preview_theme_id=XXXX parameter added – this is what makes shopify to load a preview bar.

Can’t say why these parameters are added without seeing the theme code – or maybe there is a setting for this in theme setting?

Obviously, it’s possible to hide Preview bar with code, say by adding this to the “Custom CSS” under Theme Settings as a first step.

body div#PBarNextFrameWrapper {
  display: none !important;
}

However, it would be proper to prevent it from being added…

1 Like
4

First of all, thanks for the support.

  • I added the code you gave at the end of the code. Not resolved.

  • I couldn’t find it. It’s probably hidden.

    or
5

Thank you very much.

Solution: I added it to “Custom CSS” from theme settings.
body div#PBarNextFrameWrapper {
display: none !important;
}

Problem solved.

I will send you an e-mail thanking you.