Skip to main content
Solved

[Shopify] Checkout Pop-up not working

  • September 22, 2021
  • 3 replies
  • 1611 views

Forum|alt.badge.img+2

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?

Best answer by alex.hong

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

 

 

View original
Did this topic or the replies in the thread help you find an answer to your question?

3 replies

alex.hong
Forum|alt.badge.img+58
  • Klaviyo Alum
  • 1552 replies
  • September 22, 2021

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


Forum|alt.badge.img+2
  • Author
  • Problem Solver I
  • 4 replies
  • September 23, 2021

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?
 


alex.hong
Forum|alt.badge.img+58
  • Klaviyo Alum
  • 1552 replies
  • Answer
  • September 23, 2021

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