how to remove preview bar

Highlighted
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
Highlighted
Shopify Staff
Shopify Staff
655 35 105

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
Highlighted
Tourist
4 0 3

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;
}
1 Like
Highlighted
Shopify Staff
Shopify Staff
655 35 105

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

1 Like
Highlighted
Tourist
7 0 3

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
Highlighted
Shopify Staff
Shopify Staff
655 35 105

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