Shop Now: On-Store Troubleshooting (Embedded)

This article pertains to merchants with the embedded, more automated version of On-Store. If troubleshooting for the original On-Store setup that requires manual code entry to activate, please review the original troubleshooting article.

For guidance on switching from original On-Store to embedded On-Store, please review Loop's On-Store switching instructions.


OVERVIEW

This Shop Now: On-Store troubleshooting guide will help merchants 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: Loop highly recommends having a developer or engineer present for these customizations.

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

In this article:


"On-Store feature not available"

When activating On-Store for the first time (Sales > Online Store > Customize on the Shopify theme), the pop-up below will always show for merchants .

"On-Store Feature Not Available: This feature is not available on your current Loop plan. Please reach out to your Merchant Success Manager or support@loopreturns.com for information on obtaining this feature."

Note: The pop-up should disappear once the merchant enters the API key. If the API key is present and the pop-up still shows, the reason(s) may include the sub-heading topics below.

Shop settings do not allow On-Store

Ensure the store's Loop admin account has the Shop Now and On-Store settings turned on:

  1. Go to Loop admin > Settings > Return policies.


    "Return policies" option under Settings in Loop admin.
  2. Find the policy or policies needing checked, then click Edit on the right.

    Return policies page with domestic policy and Edit button.
  3. Look under the Return Outcomes section, or use the finder tool (Control F for Windows, Command F for Mac), to find the Shop Now outcome.
  4. Ensure the "On-Store enabled" checkbox is ticked, as pictured below.

    Shop Now outcome in Loop admin with On-Store option checked.
  5. If the On-Store box is empty, click it, then click Save.


    Save button on "Return policies" page in Loop admin.

Tip: If either the Shop Now or the On-Store option from Step 4 do not show, please reach out to support@loopreturns.com.

Merchant plan does not include On-Store

If updating the API key and Loop admin settings does not get rid of the pop-up, check the shop's Loop plan to ensure it includes On-Store functionality. If it does not and you believe it should, please contact your Merchant Success Manager (MSM).

Back-end bug

If a) the API key is present, b) On-Store settings are turned on, and c) the Loop plan should include On-Store, but the "On-Store feature not available" pop-up still shows, please contact support@loopreturns.com to have Loop check the store's back-end settings.


Toggle or checkbox changes not showing

Merchants may need to refresh the On-Store customizer to see recently-made changes to toggle buttons or checkboxes if they click out of the customizer. The edits would still be active in the app and the On-Store builder, but may not show visually in the user interface (UI).


For example: A merchant clicks the “Show Onstore bar” checkbox in the customizer, goes to a different page, and then returns to the customizer. But the “Show Onstore bar” box is no longer checked, even though the On-Store bar shows on the theme. 


In cases like these, merchants should do the following:

  1. Click Save in the upper right corner to keep progress.

    Save button in Shopify theme customizer.
  2. Refresh the browser page.


    Google Chrome browser refresh button, for example.
  3. Check that any toggle button or checkbox changes show as expected after refreshing.

    "Show On-Store bar" checkbox (checked) after saving progress and refreshing the Shopify customizer page.

Checkout button still takes shoppers to Shopify

There are a few common scenarios that can lead shoppers to their typical Shopify checkout instead of the Loop On-Store checkout. Review the scenarios below to troubleshoot any issues. 
Note: These descriptions and instructions pertain to the Google Chrome browser. However, the steps should be similar in any browser in use.
Review the written instructions below to double-check the attach value(s) and code placement.

1. Check attach value(s)

The most common issue is that the checkout button selector(s), or "attach value(s)," entered into the On-Store app embed in Shopify does or do not match the ID or Class of the store’s checkout button.

To double-check this, follow the instructions below for each checkout button; this could include a Cart page as well as a side cart.

  1. Go to Shopify admin > Sales channels > Online Store.
  2. Find the 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 the checkout button lives.

    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 the store’s code.

    Finding the checkout button Class in the Inspector Tool.

Important: Along with using the appropriate attach value, it is necessary to put the correct character before it. A hash (#) must always proceed an ID, and a period (.) must always proceed a Class.

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

Attach value in the checkout button selector matches the checkout button's ID in the Inspector Tool.

Important: If the store has multiple checkout buttons that do not share the same Class or ID, a value must exist for every checkout button, separating each one with a comma. For example, if one button has an ID of “ #checkout ” and another has a Class of “ .checkout-btn ”, it should show:

Multiple attach values separated by a comma.

2. "Replace checkout button" box not marked

In the Shopify theme customizer, there is a checkbox merchants can click to replace the destination of the existing checkout button with a redirect back to Loop while the shopper is in the On-Store flow. To use this feature:

  1. Go to Shopify admin > Sales channels > Online Store.
  2. Find the On-Store theme needing edits and click the Customize button.

    Example On-Store theme with Customize button on the right.
  3. On the left, click the App Embeds button.


    App embeds button on the left of the Customize view of store theme.
  4. Click the carrot next to On-Store SDK Integration to expand the information underneath.

    Expansion carrot to the left of the store name on the theme customization page.
  5. Scroll down to the checkbox labeled "Replace checkout button."

    "Replace checkout button" box, unchecked.
  6. Check the "Replace checkout button" box.


    "Replace checkout button" box, checked.
  7. Click Save in the upper right corner of the theme editor window.

    Save button in the upper right corner of the Shopify theme customizer window.

Note: If a merchant briefly clicks out of the customizer window in their browser, then returns, the checkbox may not show as checked anymore. This minor bug does NOT delete saved progress and does not threaten the store's On-Store functionality. Please refer to the "toggle or checkbox" section above to troubleshoot this bug.

3. Check partnered apps and third parties

Certain third-party apps can conflict with Loop's back-end event listener. They do this by "listening" for shoppers to click the checkout button. Once the shopper clicks "Checkout," the app overrides the On-Store experience and brings the shopper to them instead of Loop.

Some apps that have known issues include:

  • SpurIT Pre-Order
  • Preorder Manager

Additional apps may conflict with the On-Store experience if they require access to the checkout button(s) (developers can likely help identify those apps). If a non-Loop app may be interfering, please follow the instructions for the "Replace checkout button" feature. Doing this allows Loop to customize the checkout button(s) and thus avoid third-party event listeners.

Tip: Developers can take advantage of a "yes or no" flag, " LoopOnstore.isActive() ", to turn On (show) or Off (hide) features that merchants don't want running while Loop On-Store is active.

They can add this flag to any JavaScript code running in their Shopify theme (Shopify > Sales Channels > Online Store > ellipsis button for desired theme > Edit Code > theme.liquid).

For further help, please reach out to your Onboarding Manager or support@loopreturns.com.


Hide irrelevant elements

Loop recommends 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.
Merchants can add “.loop-returns-activated” in the 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.

Tip: To hide an element by way of JavaScript, developers can add the " LoopOnstore.isActive() " flag to any JavaScript code running in their Shopify theme (Shopify > Sales Channels > Online Store > ellipsis button for desired theme > Edit Code > theme.liquid).


Credit banner covers checkout button

If the credit banner is covering the checkout button, Loop recommends the following:
  1. Go to Shopify admin > Sales channels > Online Store.
  2. Find the On-Store theme needing edits and click the Customize button.

    Example On-Store theme with Customize button on the right.
  3. On the left, click the App Embeds button.



    App embeds button on the left of the Customize view of store theme.
  4. Click the carrot next to On-Store SDK Integration to expand the information underneath.

    Expansion carrot to the left of the store name on the theme customization page.
  5. In the sidebar on the left, scroll down to the options for adjusting credit banner alignment and the "Modify side cart height (optional)" checkbox.

    "Credit banner alignment" dropdown field, credit banner background and font color options, and "Modify side cart height" checkbox in the On-Store customizer sidebar.

    Note: If clicking between browser windows, and the checkbox has trouble showing (even after saving), please refer to the "toggle or checkbox" section above.

  6. Experiment with these fields until the credit banner no longer covers the checkout button.

    Important: If clicking the "Modify side cart height (optional)" checkbox, add the side cart Class or ID in the "Side cart identifier (text input)" field so that the backend code completes this function. Follow these steps, adding just one value for this specific cart.


On-Store redirects shoppers back to review screen

If the On-Store checkout button redirects 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 the 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 the chosen API key as “Cart” only. (Including more scopes could expose returns data. Create a Cart-only API key if there isn't one yet.)

    API key with Cart-only scope.
  4. Copy the API key from the “Key” column.
  5. In a separate tab, go to Shopify admin > Sales channels > Online Store.
  6. Find the On-Store theme needing edits and click the Customize button.

    Example On-Store theme with Customize button on the right.

  1. On the left, click the App Embeds button.


    App embeds button on the left of the Customize view of store theme.
  2. Click the carrot next to On-Store SDK Integration to expand the information underneath.

    Expansion carrot to the left of the store name on the theme customization page.
  3. Paste the API key into the "Loop API Key (text input)" field in the Shopify theme customizer.

    "Loop API Key (text input)" field with example API key pasted into it.
  4. Click Save in the upper right corner of the theme editor window.

    Save button in Shopify's theme customizer.

Tip: If the steps above don't help, please check that the key is correct for the portal being used. For example, if the store has portals for both the United States and Australia, and the focus is currently on the Australian portal, ensure that the key being used is for the Australian portal.


Testing the checkout button

Tip: Loop strongly suggests having a developer present for this part of the testing process.

While testing the setup of Loop's On-Store feature, a pop-up should appear confirming success:

"Loop On-Store Installed: Test Mode Successful" pop-up.

If this message does not appear, please double-check the following:

  • A call to “api.loopreturns.com/api/v1/cart/” should appear under Inspector Tool > Network > Names. (To access the Inspector Tool, right-click anywhere in the store view and select Inspect).

    Network tab and Name sub-tab in the Inspector Tool.

    Note: If double-checking these bullets does not make testing successful, there may be additional API calls to look for in the Network tab. Please contact support@loopreturns.com.

  • When clicking on the API call above, a few sub-tab options will appear. Clicking the Payload sub-tab should show the array of variant IDs.
  • When clicking on the Response sub-tab, a token should appear.

    Payload and Response tabs under Network tabs > Names column.

FAQ

Why can't I see or use the embedded On-Store version? Embedded On-Store is only available to merchants on Shopify 2.0, a Shopify update adding more feature and tooling options, as well as architecture upgrades. You may be on 2.0 already if you see an "add section" theme within the Shopify theme customizer.

Theme customizer in Shopify with
Theme customizer in Shopify with "Add section" option highlighted.

If not using this version of Shopify, you can either a) look into migrating your themes and apps to 2.0 or b) use Loop's original On-Store feature.


For more Shop Now: On-Store setup assistance, 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.