White Screen When Pressing Back

Technical Q&A

Topic summary

A Shopify store owner encountered a white screen issue when pressing the browser back button, but only on their live theme—not on preview or backup versions. The problem persisted across different browsers, devices, and locations.

Root Cause:
Using Chrome’s inspect tool, the issue was traced to a preloader element (page_preloader__bg) that remained visible after navigation, blocking the page content.

Proposed Solutions:

  • Add CSS to the style.scss.css file to set the preloader background to unset !important
  • Use custom CSS to apply display: none to the problematic element
  • Remove the preloader code section entirely

Resolution:
The original poster successfully resolved the issue by identifying and removing the preloader code using Chrome’s developer tools. The site now functions normally with back button navigation working as expected.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

Hi all,

I was wondering if anyone why anyone could explain why this happens? This only happens on live themes…i’ve tried to replicate it on themes that aren’t live and it works perfectly. I’ve made a backup of the current theme and click preview and the back button white screen thing isn’t an issue but on the live theme it is.

I’ve gone through all the recommendation like changing browser, clearing cache etc, tried mobile and laptop as well as desktop. I’ve even got someone else somewhere in the country to try it and it is the same for him too.

I’ve tried adding the lines of code i’ve seen knocking around in the theme.liquid file and that doesn’t seem to do anything.

I am using a theme I purchased off TemplateMonster and have configured it to how i want it but it won’t allow us to go back in any way.

A lot of people were talking about animations but I couldn’t find anything there to remove that side, i’ve tried the 3 lines of code above the and that didn’t work.

It’s the only thing stopping the site going live.

URL is: evwholesale.co.uk

2

Hi @ExceptionalVape ,

You can follow these steps

Step 1: Go to Online store > Themes > Edit code and find style.scss.css file

Step 2: Insert below code at the end file and Save them

#page_preloader__bg {
   background: unset !important;
}
3

You have this element here:

Kyle_PoieoDev_0-1720629339639.png
Kyle_PoieoDev_0-1720629339639.png346×115 11.3 KB

“page_preloader__bg” is what’s covering the site when you go forward and back. This elements style appears to be being updated by a tag close to the top of your site. Looks to be an animation from the theme you purchased?

Screenshot 2024-07-10 at 9.37.08 AM.png
Screenshot 2024-07-10 at 9.37.08 AM.png628×379 24.5 KB

You can disable this entirely by using custom CSS to “display: none” this element. Without knowing more, this is what I would suggest.

4

I resolved this issue myself but opening the page in chrome and using the inspect tool. I noticed that it pointed toward a section of code which called on a preload. I removed that and it seemed to work just fine now.

1 Like