Shop Now: On-Store Troubleshooting

OVERVIEW

This Shop Now: On-Store troubleshooting guide will help you triage common issues that occur when a) setting up On-Store for the first time or b) monitoring active On-Store during a release.

In this article:

• The checkout button still takes customers to Shopify checkout
  • 1. Check your attach value
  • 2. Double-check the code placement
  • 3. Check your partnered apps and third parties
• I need to hide irrelevant elements
• The credit banner covers the checkout button
  • Option 1: Raise the cart
  • Option 2: Shorten the On-Store banner
• On-Store redirects customers back to the review screen

The checkout button still takes customers to Shopify checkout

There are three common scenarios that can lead customers to their typical Shopify checkout instead of the Loop On-Store checkout. Review the scenarios below to troubleshoot any issues you have. 

Play the video below, or review the written instructions underneath it, to double-check your attach value(s) and code placement.

1. Check your attach value

The most common issue is that the “attach” value in your store’s On-Store snippet does not match the ID or Class of your store’s checkout button. To inspect this:

1. Go to Shopify admin > Sales channels > Online Store.

2. Find your unpublished theme under the "Theme library" section. Click the ellipsis button > Preview.

   

3. In the store preview, go to where your checkout button lives. (For some themes, this is a Cart page. If you use a mini or fly-out cart, this can be any page.)

   

4. Right-click the checkout button and click Inspect.

   

5. Check that the ID or Class highlighted in the Inspector Tool exactly matches the attach value in your store’s code.

   

Below is an example of an attach value matching the checkout button ID:

Tip: If your store has multiple checkout buttons that do not share the same Class or ID, you can put multiple values in the attach field by separating them with a comma (,). For example, if one button has an ID of “ #checkout ” and another has a Class of “ .checkout-btn ”, it should look like: 

2. Double-check the code placement

The On-Store checkout code must appear before the closing body tag (“ </body> ”) in your store’s Shopify theme. Any other placement may cause functional issues such as the checkout button directing customers improperly.

To double-check the On-Store code location:

1. On your theme in Shopify, click the ellipsis button > Edit Code.

   

2. Under the Layout folder on the left, click the file called “theme.liquid”.

   

3. Scroll to the bottom of the code or use your finder to locate the closing body tag. Your On-Store checkout code should be directly above it.

3. Check your partnered apps and third parties

Certain third-party apps can conflict with Loop's event listener, preventing the checkout button from taking customers to their appropriate location. Some apps that have known issues include:

• SpurIT Pre-Order
• Preorder Manager

If you believe an app may be causing your issue, reach out to your Onboarding Manager or support@loopreturns.com to discuss possible solutions.

I need to hide irrelevant elements

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

• Third-party checkout methods (for example: PayPal). On-Store exchanges must be completed through Loop checkout.
• Alternative payment methods (for example: AfterPay, Klarna). Stripe must capture On-Store upsell value through Loop's checkout.
• Product customizations recorded as line item properties. Loop cannot record line item properties and apply them to exchange orders at this time.

You can add “.loop-returns-activated” in your code to hide elements. Hide a specific element by way of the element’s ID, or a whole group of elements by way of the elements’ Class. Below are examples of hidden IDs and Classes (ID and Class are bold for emphasis).

Element ID:

// hide AfterPay button.loop-returns-activated #afterpay
 {
 display: none !important;
 }

Element Class:

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

For more information, please refer to this setup article.

The credit banner covers the checkout button

If the credit banner is covering your checkout button, we recommend two potential solutions.

Option 1: Raise the cart

To raise the cart higher on the web page, you can change the max height of the cart in your code:

1. Review the instructions above to find the “theme.liquid” file in Shopify admin.
2. Find the On-Store snippet for your cart and alter the height. This will look something like this:

.cart { width: 396px; max-height: 95%; min-height: 95%; bottom: 0; }

3. Click Save in the upper right corner of your theme editor window to keep your changes.

   

Option 2: Shorten the On-Store banner

To shorten the On-Store banner:

1. Add the “.loop-onstore” Class (the Class for the On-Store banner) to your code in the “theme.liquid” file. You will add it right after the ".loop-returns-activated" Class, between the style tags.
2. Edit the Class so that the banner does not go all the way across the screen. For example:

.loop-onstore { width: 67%; }

3. Click Save in the upper right corner of your theme editor window.

On-Store redirects customers back to the review screen

If the On-Store checkout button redirects you back to the Shop Now credit page instead of the summary page, typically it's because the API key needs updating. Play the video below, or review the written instructions underneath it, to troubleshoot this issue.

To update your API key:

1. Go to Loop admin > Settings > Developers.

   
   

   

2. Scroll down to the “API keys” section.

3. Ensure that the “Scopes” column shows your chosen API key as “Cart” only. (Including more scopes could expose returns data. If you don’t have a Cart-only API key yet, you can create one.)

   

4. Copy your API key from the “Key” column.
5. Go to your Shopify theme’s “theme.liquid” file.
6. Find the “LoopOnstore.init” call or snippet.

<script src="https://cdn.jsdelivr.net/npm/@loophq/onstore-sdk@latest/dist/loop-onstore-sdk.min.js"></script>
<script> 
   LoopOnstore.init({ 
   key: "example api key", 
   attach: "example attach value", 
   });
</script>

7. Paste your API key between the quotes next to the key field (where "example api key" is above).

8. Click Save in the upper right corner to make your changes stick.

   

If there's anything else you or your developer are running into while setting up Shop Now: On-Store, please reach out to your Onboarding Manager or support@loopreturns.com.