How to stop split second flicker on page load

Technical Q&A
, , ,
1

I have a plugin that allows you to pre order items on a site I’m working on. Here it is: https://apps.shopify.com/pre-order?surface_intra_position=1&surface_type=partners&surface_version=redesign

When I load the page, it has a hiccup that lets you order the actual product. Here is a video displaying what happens: https://www.loom.com/share/d6e199f583474301b437d752ab9b78ee This is causing a huge problem since people use bots on certain releases, which leads to the add to cart button getting clicked. If someone can show me how to even edit page loads in liquid to prevent this, that would be a huge help

2

I’m not sure if you resolved it, but I recently faced the similar issue with my menu. I couldn’t find a solution online, but through trial and error, I figured it out. Sharing the solution here in case it helps anyone else.

Step 1:

  • Open the custom.css.
  • Add the following CSS code at the end of the file:
@media only screen and (min-width: 1200px) {
  /* Hide the menu by default */
  .menu {
    display: none; /* Prevent flashing */
    visibility: hidden; /* Optional for added stability */
  }

  /* Show the menu when the page has loaded */
  .menu-loaded .menu {
    display: block;
    visibility: visible;
  }
}

Note:

  • Change the .menu to the class name which is flickering.
  • I have used @media because the flicker was only happing in my desktop version, you can remove it if needed.

Step 2:

  • In your Shopify theme, open the theme.liquid file.
  • Add the following script just before the closing tag:
<script>
  document.addEventListener('DOMContentLoaded', function () {
    document.body.classList.add('menu-loaded');
  });
</script>

And you’re done…