What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: HELP: Huge check mark before website loads

HELP: Huge check mark before website loads

boauae
Excursionist
12 0 4

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

Replies 17 (17)

Lounes
Excursionist
15 0 2

Hi @boauae 

 

Same is happening to my website I use DAWN 2.5.0bigcheckmark.jpg

alvizalyssa
Shopify Partner
1 0 2

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
Visitor
1 0 1

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
Excursionist
26 1 1

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
Shopify Partner
2 0 9

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

DavidR2D2
Excursionist
13 0 15

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. 

DavidR2D2_0-1649340638057.png

 

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
Shopify Partner
1 0 0

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
Excursionist
13 0 15

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
Excursionist
26 1 1

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
Visitor
1 0 0

Thank you so much!! Worked perfectly!

11rv11
Tourist
6 1 17

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 LocationWrong Location

Right Location

checkmark two.png

 

 

 

toubaby
Excursionist
31 0 7

that move works perfectly. thank you!!!

11rv11
Tourist
6 1 17

You're welcome. Have a good day!

100akres
Visitor
2 0 1

Thanks!! Finally a fix.

King-Kang
Trailblazer
148 8 78

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
Explorer
59 1 16

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
Tourist
5 0 0

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