Shop Now: On-Store Troubleshooting (Embedded)

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.

In this article:

• "On-Store feature not available"
  • Shop settings do not allow On-Store
  • Merchant plan does not include On-Store
  • Back-end bug
• Toggle or checkbox changes not showing
• Checkout button still takes shoppers to Shopify
  • Check the attach value(s)
  • Check for click listeners on the checkout button
• Hide irrelevant elements
• Credit banner covers the checkout button
• On-Store redirects shoppers back to review screen
• Testing the checkout button
• FAQ

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

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.

   
   

   

2. Find the policy or policies needing checked, then click Edit on the right.

   

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.

   

5. If the On-Store box is empty, click it, then click Save.

   
   

   

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.

   

2. Refresh the browser page.

   
   

   

3. Check that any toggle button or checkbox changes show as expected after refreshing.

   

Checkout button still takes shoppers to Shopify

1. Check the attach value(s)

To double-check the attach values, follow the instructions below for each checkout button (this could also include a Cart page or 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.

   

3. In the store preview, go to where the checkout button lives.

   

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

   

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

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:

2. Check for click listeners on the checkout button

Apps and third parties partnering with a merchant might respond to shoppers clicking the Shopify checkout button. The sub-sections below explain how this interferes with the On-Store flow and how to prevent this from happening.

Partnered apps and third parties

Some of a merchant's partnered apps or third parties might "listen" on the back end (non-maliciously) for shoppers to click the Shopify checkout button. Once the shopper clicks "Checkout," the app brings the shopper to them (or Shopify) instead of Loop, overriding the On-Store experience.

Some apps that have known issues include:

• SpurIT Pre-Order
• Preorder Manager

Additional apps, which merchants' developers can help identify, may conflict with the On-Store experience if they require access to the checkout button(s).

Replace the checkout button

Loop's solution for potential checkout button "hijacking" is the "Replace checkout button" checkbox, which replaces the Shopify checkout button with an identical, Loop-specific checkout button. The Loop-specific button ensures shoppers clicking it will be sent back to Loop to finish their On-Store experience.

To mark the "Replace checkout button" checkbox:

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

2. Find the On-Store theme needing edits and click the Customize button.

   

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

   
   

   

4. Click the carrot next to On-Store SDK Integration to expand the information underneath.

   

5. Scroll down to the checkbox labeled "Replace checkout button."

   

6. Check the "Replace checkout button" box.

   
   

   

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

   

Hide irrelevant elements

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

Element ID:

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

Element Class:

// hide alternative payment types (use whichever class matches the container for your alternative payment types)
.loop-returns-activated .alternative-payment-methods {
 display: none !important;
}

For more information, please refer to this setup article.

Credit banner covers checkout button

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

2. Find the On-Store theme needing edits and click the Customize button.

   

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

   
   
   

   

4. Click the carrot next to On-Store SDK Integration to expand the information underneath.

   

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.

   

   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

To update the API key:

1. Go to Loop admin > Settings > Developers.

   
   

   

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

   

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.

   

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

   
   

   

8. Click the carrot next to On-Store SDK Integration to expand the information underneath.

   

9. Paste the API key into the "Loop API Key (text input)" field in the Shopify theme customizer.

   

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

    

Testing the checkout button

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

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

  

  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.

  

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.

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.