HELP: Huge check mark before website loads

[boauae]

Hello, I hope someone can help me with this as I haven't found a thread talking about this issue!

When I open my website, I see a huge black check mark on the screen and it lasts for about a second before content loads, the store is set on DAWN 2.0 and the website is fast enough, but I do not understand why I see this check mark.

Please check the link here: https://burstofarabia.com/

Let me know please! Many thanks

[Lounes]

Hi @boauae 

Same is happening to my website I use DAWN 2.5.0

[alvizalyssa]

I have been experiencing this too. I thought it was just an error but now 2 of my stores have that big check mark. I even tried to open it on different browsers and devices. Still the same.

[shui365]

Yes its the similar issue which I am also facing in mywebsite store its taking more time to load and a huge check mark kindly guide about it.

[halflifecrysis]

Did you resolve your issue with the OP's suggestion, I didn't notice a checkmark when I clicked your link. I am actually dealing with Shopify support on the issue now, so any more data on the matter I can collect is good. - Thanks! 

[mellimol]

Has anyone found a solution to this? I'm having this problem too and can't determine where it's coming from.

[DavidR2D2]

Same problem here. When I load the page (even if logged out or anyone else loads it) a giant black check mark shows briefly on the screen. It's huge and extremely bad looking. This is with the Dawn theme by Shopify. 

Edit: I was able to stop loading the page just in time and grab the HTML

<div class="cart-notification-wrapper page-width color-background-1">
    <div id="cart-notification" class="cart-notification focus-inset" aria-modal="true" aria-label="Item added to your cart" role="dialog" tabindex="-1">
      <div class="cart-notification__header">
        <h2 class="cart-notification__heading caption-large"><svg class="icon icon-checkmark color-foreground-text" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 9" fill="none">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.35.643a.5.5 0 01.006.707l-6.77 6.886a.5.5 0 01-.719-.006L.638 4.845a.5.5 0 11.724-.69l2.872 3.011 6.41-6.517a.5.5 0 01.707-.006h-.001z" fill="currentColor"></path>
</svg>
Item added to your cart</h2>
        <button type="button" class="cart-notification__close modal__close-button link link--text focus-inset" aria-label="Close">
          <svg class="icon icon-close" aria-hidden="true" focusable="false"><use href="#icon-close"></use></svg>
        </button>
      </div>
      </div></div>

Updated Edit: OK I was able to kill this by going to Themes >> Edit Code. Then at the top just use the search field to search for "checkmark" and it should bring up the "icon-checkmark.liquid" file. If it doesn't, try going to Snippets >> icon-checkmark.liquid. Then open the file, and I didn't delete it as I don't know what other files might depend on it. I would suggest not deleting it. I simply turned off the code by wrapping it in HTML comment code, like this:

<!-- turning off to get rid of giant check mark
<svg class="icon icon-checkmark color-foreground-{{ settings.accent_icons }}" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 9" fill="none">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.35.643a.5.5 0 01.006.707l-6.77 6.886a.5.5 0 01-.719-.006L.638 4.845a.5.5 0 11.724-.69l2.872 3.011 6.41-6.517a.5.5 0 01.707-.006h-.001z" fill="currentColor"/>
</svg>
-->

Notice the <!-- and --> at the first and last lines. Those are the wrappers to turn "off" the code. It seems to have solved the problem. Save the code changes and you're done. Good luck!

[asmarrashad]

Thanks! This worked to remove the check mark. Although I'm still seeing some lag in load speed. I'll check out some other apps

[DavidR2D2]

In theory, the page should load faster as now it's one less item/image to load to the page. Although, again not sure if there are some dependencies that check and are delayed. Honestly I don't think the page load should change +/- in any way with this as it's such a minor change. 

[halflifecrysis]

Are you still using your "fix"? I am actually dealing with Shopify support on the issue now, so any more data on the matter I can collect is good. I had the checkmark last week, this week, it is just a gray flicker, the flicker did not go away when I implemented your suggestion, but I did have it, I got a screen grab from a recording in slow motion because mine was super fast flash then gone - Thanks! 

[CelebratingLife]

Thank you so much!! Worked perfectly!

[11rv11]

Go to edit code and find this ----> cart-notification.liquid 

You have to relocate/move the style tag shown below in the pictures:

Move it right above <cart-notification>

I read on github from user ComicDansMS that The style tag sits after the liquid block instead of before it, which causes the element to be rendered before the style is loaded.

see pictures for before and after for proper placing of code.

Wrong location:

Wrong Location

Right Location

[toubaby]

that move works perfectly. thank you!!!

[11rv11]

You're welcome. Have a good day!

[100akres]

Thanks!! Finally a fix.

[King-Kang]

Hello @11rv11 ,

Does this fix the check mark issue?

Also, is it possible to have a negative impact in other parts of the store, after implement this change? I think not, but just to make sure...

Note: I see this bug since the release of the dawn theme...

[lisahiggins]

I've been experiencing this on studio theme and it's been driving me insane and I had no idea how to fix it. THIS WORKED! THANK YOU!!

Now.. does anyone know why this happens?? I didn't mess with my code, how could it be in the wrong spot?? Thank you!

[Badgerswork]

Fantastic, thank you so much! That black tick was an annoyance we could all do without.