Solved

[Shopify] Checkout Pop-up not working

  • 22 September 2021
  • 3 replies
  • 623 views

Badge +1

Hi,

I’m struggling to get a pop-up sign-up form to appear on my Shopify checkout page.

When I publish the pop-up without URL restrictions, it appears fine. However, when I set it to appear on any URL with ‘checkout’ in (which the checkout page always has), it won’t appear.

Has anyone experienced this and can anyone help?

icon

Best answer by alex.hong 23 September 2021, 20:12

View original

3 replies

Userlevel 6
Badge +54

Hi @zachariah21,

 

Thanks for posting to the Community! Hope I can be of help to give you more info on what might be going on.

Could we please have you try this solution by going to your specific Form > Behaviors Tab > Targeting > By URL > "Only show to certain URLs" > Enter your checkout URL. Below is an example image of it : 

p9KWIvzCBYEYsdbnQ9HDM6ykGQExEc4I1X44-hKUEUcdXTK_Gu8F0Uqs_iHasPdjt6BQ_We8Gok50wdeeLv3JkKU_R_suFAKY6IpjIUqV07kh6quZaekTifLak-AhTAQWRad2jg6

Assuming the Shopify URL is dynamic, an example would be 'containing' /checkouts - that should appear on each of your unique checkout links, and therefore should appear for all users at checkout. Would you mind giving that a try and seeing if it works? 

2. Additionally, please make sure to install Klaviyo.js to the checkout page for the form to work. The reason the popup is not displaying sometimes on your checkout is due to the checkout page not having the signup form snippet within its HTML.  I'd recommend going to https://www.klaviyo.com/forms and clicking on the "Install Code Snippet" button to access the snippet. Then you'll need to add this snippet to your checkout.liquid file within your account.

Keep us updated on how these possible solutions work!

Alex

Badge +1

Hi @alex.hong 

 

Thanks for getting back to me!

Re the URL containing only ‘/checkout’ - that bit was already in place.

I haven’t installed a code snippet on the checkout page. The reason for this is there isn’t a checkout.liquid file! At least not that I can see in the code. Any idea why?
 

Userlevel 6
Badge +54

Hi @zachariah21,

 

Thanks for following up and no problem!

After digging into it through looking up Shopify support docs, I found that currently it’s not possible to put the klaviyo.js snippet on the checkout page in Shopify so no forms can load there. They have banned any outside scripts on the checkout pages unless you have Shopify Plus for security reasons. This is currently a Shopify limitation since they don't actively allow any outside JS on checkout pages.  This is not something that we would be able to implement unless Shopify is able to change that functionality.
 

If you do have Shopify Plus, I would suggest reaching out to a Shopify MSM that you work with or would you be able to contact Shopify support to see how we can add some javascript to your checkout page?  It sounds like it's something that's handled on a one off basis within the Shopify backend.

 

The Klaviyo js looks something like this:

<script type="application/javascript" async 
src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=??????"></script>

and you would put in your company ID of course. After that, I believe through contacting Shopify support to see what they can do, you should be able to work within the checkout.liquid folder!

 

Please keep us updated and report back with any findings or new discoveries!

Alex

 

 

Reply