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.

Tip: We highly recommend having a developer or engineer present for these customizations.

Important: If you partner with certain third-party apps such as SpurIT Pre-Order or Preorder Manager, you must create a new checkout button. Otherwise, your current checkout button will direct customers to the Shopify checkout instead of Loop's On-Store checkout. Check out our section about third parties.

In this article:


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. 

Note: These descriptions and instructions pertain to the Google Chrome browser. However, the steps should be similar in any browser you use.

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.

    "Preview" button on an unpublished Shopify theme.
  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.)

    Example of a mini or fly-out cart.
  4. Right-click the checkout button and click Inspect.

    Clicking "Inspect" on a checkout button.
  5. Check that the ID or Class highlighted in the Inspector Tool exactly matches the attach value in your store’s code.

    Finding the checkout button Class in the Inspector Tool.

Important: Even when using the appropriate attach value, you may not have placed the appropriate character before it. A hash (#) should always proceed an ID, and a period (.) should always proceed a Class.

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

Attach value in the store's "LoopOnstore" code matches the checkout button's ID in the Inspector Tool.

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: 

Multiple attach values separated by a comma.

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.

    "Edit code" button on an unpublished Shopify theme.
  2. Under the Layout folder on the left, click the file called “theme.liquid”.

    Locating the "theme.liquid" file.
  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; }

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

    Save button in the upper right-hand corner of the Shopify theme editor.

Note: The Class ".cart" above is just an example. Your cart's Class may be different.

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%; }

  1. 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.


    Developers option under Settings in Loop admin.
  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.)

    API key with Cart-only scope.
  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>

  1. Paste your API key between the quotes next to the key field (where "example api key" is above).
  2. Click Save in the upper right corner to make your changes stick.

    Save button in Shopify's theme.liquid file.

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.

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