Shop Now: On-Store Troubleshooting


This On Store Troubleshooting guide will help you triage common issues that occur when setting up On-Store for the first time, or when quality assuring active On-Store during a release. Please note the Shop Now On Store experience is available on Loop's Plus plan or with the Integrations add-on.

In this article:

My Checkout Button Still Takes Customers to Shopify Checkout

There are three common scenarios that can occur that will lead customers to Shopify Checkout instead of the Loop Checkout experience

1. Check your Attach Value

The most common issue is that the Attach value set on your snippet does not match the appropriate ID or Class associated with Checkout Button. To double-check this in Google Chrome:

  1. In your Preview, access the page where your checkout button lives, this can be a Cart page on some themes or any page if you're using a mini or fly-out cart
  2. View the Source code for the page. 
  3. Use your finder to check for "looponstore" to find your Snippet code. 
    1. If you cannot find this code, double-check that you added the Snippet to the correct theme & file. 
  4. In a separate tab, Right Click your Checkout button and Inspect the Element. The ID or Class listed here should match the Attach value exactly

Example Source

Example Inspected Checkout Button

Important notes:

  • Even if you're using the appropriate value, it's possible you have not set the appropriate character before it when setting the Attach value. A hash ( #) should always proceed a ID, and a period ( .) should always proceed a class. The element you see in the above example is an ID
  • If your store has multiple checkout buttons that do not share the same class or ID, you can set multiple attach values by seperating them with a comma (,). 
    • Example: if one button has the ID of checkout and the other a class of checkout-btn the format should be: attach="#checkout, .checkout-btn"

2. Double-check the Placement of the Code

It is critical that the On-Store Checkout code appears before the closing body tag. Any other placement may cause functional issues, such as the checkout button not properly directing customers to Loop's checkout.

3. Check what Apps + 3rd Parties You're Working With

Some third party apps can cause issues with Loop's Event Listener, causing the Checkout Button not to take customers to their appropriate location. Apps that have known issues are:

  • SpurIT Pre-Order
  • Preorder Manager

If you believe an app may be causing this issue, please reach out to your Onboarding Manager or to discuss possible solutions.

I Need to Hide Irrelevant Elements

We recommend hiding references to the following types of elements during the On Store Experience:

  • 3rd party Checkout methods (PayPal)
    • On Store Exchanges must be completed through Loop Checkout
  • Alternative payment methods (AfterPay, Klarna)
    • On Store upsell value must be captured through Loop's Checkout via Stripe
  • Product Customizations recorded as Line Item Properties
    • Loop cannot record Line Item Properties and apply them to Exchange orders at this time
Use  .loop-returns-activated in your CSS stylesheet to hide a specific element via ID, or a whole class of elements via class.
ID Example
// hide AfterPay button
.loop-returns-activated #afterpay { display: none !important; }

Class example

// hide Alternative Payment buttons
.loop-returns-activated .alternative-payment-methods { display: none !important; }

My Credit Banner Covers My Checkout

If the Credit Banner is covering your Checkout button, there are two recommended potential solutions:

Option 1: Raise the cart

To raise the cart your developer could change the max-height of the cart in the CSS. This will look something like the following:
.cart { width: 396px; max-height: 95%; min-height: 95%; bottom: 0; }
.cart is an example cart class, you'll want to update this to the appropriate class.

Option 2: Shorten the On Store Banner

Add and edit the class of loop-onstore to your CSS so the bar does not go all the way across the screen.
.loop-onstore { width: 67%; }<br>

On Store is Redirecting Customers back to the Review Screen

If you find that the On-Store checkout button is redirecting you back to Shop Now credit page instead of the Summary page, it's usually because the API key needs to be updated in your theme's snippet code. Here's what you need to do:
  1. Copy or create a Cart API key from Loop Admin > Settings > Developers.
  2. Set the API Key in the key init call in the Loop snippet


Any Questions?

If there's anything else you or your developer is running into in setting up Shop Now: On Store, don't hesitate to reach out to your Onboarding Manager or for additional support.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.