URL Param to Hide Preview Bar?

Solved
Chris-Hayes
New Member
5 0 0

I'm doing site testing and use the ?preview_theme_id=####### to test specific themes. Does anyone know if there's a URL option to automatically hide the preview bar? For example, ?preview_theme_id=######&hide_preview_bar. I'm having trouble finding documentation on what params are available for use. Just wondering if anyone knew of a param for this.

Right now I have to run

document.querySelector('#preview-bar-iframe').style.display = 'none';

before tests to hide the bar. Something like a URL param would simplify testing.

 

Thanks,

Chris

 

0 Likes
Visely-Team
Shopify Partner
1837 210 420

Not sure why would you need this, but to answer your question - there is no query param to instruct the preview bar to disappear. What you can do is add this little snippet to the css file:

#preview-bar-iframe {
    display: none !important;
}
Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Chris-Hayes
New Member
5 0 0

Thanks. Like I said, I was interested in this for testing. The bar gets in the way of content when doing functional testing and shouldn't be shown for visual regression testing. The CSS works fine, it just adds an extra step to testing that requires injecting code on page load which I would like to avoid if possible.

0 Likes
Visely-Team
Shopify Partner
1837 210 420

OK, so these are automated tests. If you run them using a headless Chrome browser you can create a separate profile and override the styling leveraging Chrome's local overrides.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Chris-Hayes
New Member
5 0 0

Ah that's good know, thanks. I'll be sure to check that out.

0 Likes
Chris-Hayes
New Member
5 0 0

After some research it seems the User Profile userChrome.css file has been unfortunately deprecated. With Firefox you have to set an option to re-enable it and it seems completely gone on Chrome. It looks like at this point, running a script to change styling on page load is the only option.

0 Likes
gina-gregory
Shopify Expert
644 37 140

This is an accepted solution.

You can add "?pb=0" to suppress the Preview Bar.

Chris-Hayes
New Member
5 0 0

Really?! Exactly what I was looking for, thanks!

0 Likes