Shop Now: On-Store Setup (Embedded)

OVERVIEW

Loop's Shop Now: On-Store feature uses a store’s product collections in Shopify to encourage customers to make exchanges instead of returns. The resulting exchanges help merchants retain and increase revenue.

Important:

  • Only merchants using Shopify 2.0 (a Shopify update adding more feature and tooling options, as well as architecture upgrades) have access to embedded On-Store. Merchants that do not use Shopify 2.0 can still set up and use Loop's original On-Store feature.
  • These setup instructions are for merchants using Shopify's theme builder. If a merchant does not use Shopify themes or creates their own, they probably have a "headless" Shopify store. Headless means that the store is built with the front end separate from the back end so that customer-facing updates don’t affect back-end performance. For headless setup, go to Loop's On-Store headless setup article instead.

In this article:

How it works

The Shop Now: On-Store experience has two parts:

  • The Shop Now feature lets the customer exchange an item they bought with any other item from the store's catalog while they're still in the Loop portal.
  • The On-Store version of Shop Now brings the customer directly to the store's website to make this new purchase before returning to Loop.

Shop Now: the On-Store customer experience

Check out the video below to understand what this customer experience looks like!


Set up Shop Now: On-Store

Follow the instructions below to set up the On-Store feature. After doing these steps, more details can be added based on the store’s specific needs.

Note:

  • Loop recommends saving a backup of the previous theme before publishing the new one. Please contact a developer on the merchant's team, the merchant's Merchant Onboarding Manager, or support@loopreturns.com if help is needed saving a backup.
  • These instructions are for the Chrome browser, but the steps will look generally similar in any browser. 

Get On-Store into Shopify's theme editor

Because the current theme is likely not set up for On-Store, merchants must create a new theme to connect to the On-Store feature. Play the video below or review the written instructions beneath it to learn how to set up a new theme. The video covers all the steps up to the "Fill in the blanks" header.

Set up a development theme in Shopify

First, set up a space in the store's Shopify account to enable the On-Store experience:
  1. Open the merchant's Shopify home page in a separate browser tab or window.

  2. On the left sidebar, click Sales channels.

    This images shows the Shopify navigation menu on the left, highlighting the Sales Channels section toward the bottom of the menu.

  3. When the pop-up window appears, click Online Store.

    After clicking Sales Channels in Shopify, a pop-up window appears with the Online Store channel option at the top. It has a store icon next to it.

  4. After the page loads, the store's current live theme should appear in the middle of the screen. Click the ellipsis button (a set of three periods) on the right side of the current live theme.

    This image shows the Themes page with the current theme, its name, Last Saved date, version number, ellipsis button with additional edit options, and a Customize button.

  5. From the ellipsis menu, click Duplicate. A copy of the current theme will appear in the "Theme library" section of the page with a “Just Added” tag next to the “Copy of [theme]” title.

    This image shows a new theme under the Theme Library section, highlighting the Just Added tag. Additional edit options include the ellipsis button, a Publish button, and a Customize button.
    Newly-added theme in Shopify with "Just added" tag next to title.

    Important: Do NOT click Publish on the new theme yet, as doing this will activate the new theme before setup is done.

  6. Rename the new theme as needed.

    1. On the new theme, click the ellipsis button > Rename. A pop-up window will appear.

      This image shows the editing options under the ellipsis button on the new Shopify theme. The options include Preview, Rename, Duplicate, Download theme file, Edit code, Edit default theme content, and Remove. The Rename option has been highlighted for this example.

    2. Enter the new name in the text field. Loop recommends naming the theme in a memorable way, such as "Theme + Loop On-Store Integration."

    3. Click Save in the pop-up window.

      This image shows the pop-up window where merchants can edit the Theme Name and click Save.
      "Save" button on new theme.

Tip: As edits continue, merchants may not always need to duplicate the theme before making changes. Loop recommends duplicating at first so that, if making changes to the theme code, merchants can test them before publishing.

Toggle on On-Store

To toggle on On-Store for the theme, follow the steps below:

  1. On the Themes page, click Customize next to the new theme.

    This image highlights the Customize button on the right side of the new theme in Shopify's Theme Library section.
    Example theme with Customize button on the right.

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

    This image highlights the App Embeds icon, which has three squares and a plus sign. After clicking Customize on the new Shopify theme, it shows at the bottom of the left-side navigation menu.
    App embeds button on the left of the Customize view of store theme.

  3. Click on the On-Store SDK Integration switch. The toggle will move to the right, and the bar will highlight dark blue, as shown below.

    This image shows the On-Store SDK Integration app embed. It has a toggle switch on the right of the embed option.
    On-Store switch, toggled on to show a highlighted blue switch.

  4. Click Save in the upper right corner of the screen.

    This image shows the Save button in the upper right corner of the theme customization screen in Shopify. It appears after making changes such as toggling on the On-Store SDK Integration app embed.
    Save button in Shopify's theme customizer.

Note: If clicking between browser windows, and the checkbox has trouble showing (even after saving), please refer to the "toggle or checkbox" section of the On-Store Troubleshooting article.

Important pop-ups

After toggling the On-Store button on, a few pop-ups may appear. Below are explanations of each.

"On-Store Feature Not Available"

The following pop-up appears for every merchant setting up On-Store for the first time:

The

This pop-up appears because the feature must have an API key from the shop to activate. It should disappear after following the steps below to enter an API key. If the pop-up stays, refer to Loop's On-Store troubleshooting article to figure out why.


"Loop Manual On-Store is Already Running"

This pop-up shows when the older, more manual version of On-Store is already active for this store:

The

Note: Merchants may (and should) continue embedded On-Store setup; however, the new setup will not work until the merchant disables the old setup.

Fill in the blanks

Next, enter the remaining values for the On-Store snippet. Review the video below or the written steps in the sub-sections beneath it to learn how to do this.

Add the API key

  1. Click the carrot next to the store to expand the information underneath.

    This image highlights the arrow on the left of the On-Store SDK Integration app embed.
    Expansion carrot to the left of the store name on the theme customization page.

  2. Click on the checkbox that says "Show On-Store bar." Doing this will show how the On-Store bar looks on the theme for visibility during setup and testing.

    This image shows a selected

    Tip:

    • When editing the theme for purposes outside of On-Store, merchants can un-check this box to hide the bar without turning off On-Store.
    • If clicking between browser windows, and the checkbox has trouble showing (even after saving), please refer to the On-Store Troubleshooting article.

  3. Click on the Developers Portal highlight to get an API key. (Or, open a separate tab and go to Loop admin > Tools & integrations > Developer tools.)

    This image shows the Loop API Key field within the On-Store SDK Integration app embed. Within the explanation text is a link to the Developers Portal, where merchants can go to the Loop admin to retrieve an API key to plug into the integration.
    Developers Portal link in On-Store API Key instructions.

  4. Under the API Keys section of the Developers page, copy an API key that is scoped to Cart only.

    This image shows the Developer Tools page in the Loop admin, specifically the API Keys section. From right to left, it shows the

    Tip: If there is no API key with a scope of "Cart" only, click the "Generate API key" button to make one.

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

    This image shows the

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

    This image shows the Save button in Shopify's theme customizer.

Important: If, after entering the API key, the "On-Store Feature Not Available" pop-up still shows, please refer to Loop's On-Store troubleshooting article to figure out why.

Add the checkout button selector(s)

Next, add the Class or ID for the checkout button(s). Loop uses these identifiers (sometimes called attach values) to send customers back to the returns experience after they choose new items to buy.

Important: Follow the steps below for each checkout button that customers could come across through the store. For example, customers could add items and check out through a side cart that shows on the same page as the inventory, or they could open their cart and check out from the main cart page.

To find these values:

  1. Open the Shopify store in a new tab.

  2. Right-click the checkout button and select Inspect to open the Inspector Tool.

    This image shows the menu that pops up when right-clicking the checkout button in the example Shopify store. At the bottom is the Inspect option.
    Opening the Inspector Tool.

  3. In the highlighted part of the Inspector Tool, find the ID or Class, which are unique identifiers for the checkout button. This will look like “id=‘[id]’” or “class=‘[class]’”.

    This image shows the HTML code that the Inspector Tool shows. It highlights the code for the checkout button, which includes a class.
    Locating the checkout button Class in the Inspector Tool.

Note:

  • The checkout button may have both a Class and an ID, or more than one of each.
  • If a unique ID does not exist for the checkout button, one may be present in the theme's Themes section by way of clicking Edit Code in the ellipsis menu, then opening “cart-template.liquid”. However, the placement of the identifier(s) depends on the particular theme. For help finding or creating a unique ID, please reach out to support@loopreturns.com.

To add the Class or ID values:

  1. Copy the part in quotes for the ID or Class within the Inspector Tool.

  2. Add the value to the Shopify theme customizer's "Checkout Button Selector (text input)" field.

    This image shows an example ID in the

    Important: When adding identifiers, a hash (#) should always proceed an ID, and a period (.) should always proceed a Class.

  3. If the shop provides checkout buttons in both a side cart and a cart page, add the Class or ID for each button so that the backend code connects both buttons to the On-Store flow.
    1. To add multiple Classes or IDs, separate each value in the Checkout Button Selector field with a comma.
    2. If wanting to create one Class or ID that represents more than one checkout button, go to the theme page > the ellipsis button for the theme > Edit Code. Then add a common value manually within the "theme.liquid" file, as well as in the "Checkout Button Selector (text input)" field. For help with this, please contact support@loopreturns.com.

  4. Click Save in the upper right corner to make sure all the changes keep!

    This image shows the Save button in Shopify's theme customizer.


Great job! Later, when publishing the new theme, this code will activate the Shop Now: On-Store experience automatically for customers coming from Loop. Adding the API key also lets the store's code talk to Loop’s API.


Test your work

Next comes testing all this work to make sure On-Store is functioning as expected. For any troubleshooting needed during testing, please refer to Loop's On-Store Troubleshooting article.

Tip: Loop highly suggests using a developer’s or engineer’s help here.

Test the setup

To test the work:

  1. Click Save in the theme customizer to make sure all of the changes stick.

    This image shows the Save button in Shopify's theme customizer.

  2. Click the back arrow on the theme editor page to return to the Shopify themes.

    This image shows the upper left corner of the App Embeds screen within the Shopify theme customizer. The very upper-left icon shows a back arrow.
    Back button in the Shopify theme customizer window.

  3. On the recently edited new theme, click the ellipsis button > Preview.

    This image shows the Themes page within Shopify. In the Theme Library section, the ellipsis button is selected for the new theme, with the Preview option highlighted at the top.
    "Preview" button on new theme.
  4. Right-click anywhere on the new Preview tab and select Inspect.

  5. Click the Console tab at the top of the Inspector Tool. If struggling to find the Console tab, try clicking the carrot symbol to show more options.

    This image shows the top menu in the Inspector Tool. It contains options for Elements, Console, Sources, Network, Performance, and an arrow button to reveal additional options.
    Console and arrow tabs in the Inspector Tool.
  6. Scroll to the bottom of the code in the Console tab.
  7. Type “LoopOnstore.testMode()” at the very end of the code. (Or, copy and paste it from here.)

  8. Press Enter on the keyboard. A credit banner should appear at the bottom of the Preview page:

    This image shows a credit banner example with a money amount in available credit. It appears at the bottom of the Shopify theme.
    Example credit banner.

    If a credit banner doesn't appear, reach out to support@loopreturns.com.

Test the checkout button(s)

Merchants must also test the checkout button to confirm that the Loop.submit function works. Below the GIF (graphics interchange format) visual are written instructions to follow.

Important: If the shop provides multiple checkout buttons (for example, in both a side cart and a cart page), Loop suggests testing all checkout buttons separately using the instructions below.

This GIF shows the process of testing the checkout button. Written instructions continue below within the article.
GIF walk-through of checkout button test.

To test the checkout button(s):

  1. In the Preview (see Test the setup for help previewing the theme), add any product to the cart.
  2. Right-click anywhere to open the Inspector Tool again and click the Network tab.

  3. Underneath the tab names, make sure the "Preserve log" checkbox is selected. If it isn’t, click the “Preserve log” square to select it.

    This image shows the Network tab within the Inspector Tool. The

  4. Click the checkout button within Shopify. Again, click each separate checkout button on the shop's website. Doing so should display a pop-up on the screen saying “Test Mode Successful”:

    This image shows the pop-up that appears when testing is successful for the checkout button. It reads:

  5. Developers can also check that no unexpected responses or errors appear under the Network tab.

Tip: If the "Test Mode Successful" pop-up does not appear when clicking the checkout button(s), please review Loop's On-Store troubleshooting article to double-check the setup. For more testing help, please contact support@loopreturns.com.


Optional setup details

Once the tests are successful, visualizing this integration on the store website is possible. However, Loop recommends also reviewing the optional setup steps before publishing the new theme, in case the store has additional needs Loop can help resolve. Please consider the article above with a developer before continuing. After setting up anything else needed, continue below.

Publish the Shop Now: On-Store theme

After setup and testing, the theme is ready to launch! Below the GIF are written instructions to follow.
This GIF shows the process of publishing a new theme from the Shopify Themes page. Written instructions follow below.
GIF walk-through of publishing a theme in Shopify.

To publish the On-Store theme in Shopify:

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

  2. Click the Publish button next to the theme being published. This will display the new theme on the storefront immediately.

    "Publish" button on new theme in Shopify admin.

    Tip: A developer can also make a call directly in their browser to “LoopOnstore.isActive()” to confirm that a customer will have the On-Store experience.

  3. To allow customers to access On-Store through the portal, please enable On-Store under the merchant's return policy:
    1. Go to the Loop admin > Policy settings > Return policies.
    2. Click Edit on the chosen policy, then find the Shop Now toggle (within the "Return outcomes" section).

    3. Ensure the "On-store enabled" check box is selected.

      This image shows the Shop Now option within a return policy in the Loop admin. The

    4. Click Save to keep the return policy changes.
  4. Notify the merchant's Onboarding Specialist or email Loop at support@loopreturns.com!

FAQ

Which Loop plan do I need to have to utilize this feature? To check to see if this feature is included in your plan, please review the Pricing page on the Loop Returns website. If you're interested in this adding this feature, please contact your Merchant Success Manager or support@loopreturns.com.

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.

This image shows the left-hand navigation menu on the customization page for a Shopify theme. The top left icon,

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.


Now that I’ve integrated the Shop Now: On-Store experience, can I still safely edit my theme? Absolutely! Loop recommends you save a backup of your previous theme and test the On-Store experience thoroughly after making any changes. Refer to the “Test the setup” section of this article for testing instructions.


I made a theme change and now my checkout button isn’t working correctly through the Shop Now: On-Store experience. What should I do? Review the steps for “Set up a development theme in Shopify“ above. If the problem continues, please contact your Merchant Onboarding Manager or support@loopreturns.com.


Where can I find my Shop Now: On-Store API key? You can locate your API key under Loop admin > Tools & integrations > Developer tools.

How does Loop choose which Products to display in the Shop Now preview?

For Shop Now: In-App, the preview displays products available in the top-level menu item that match the original products' Product Type. If no products match the original product's Product Type, Loop will display the next available products in the top-level menu item.

For Shop Now: On-Store, the preview will not display any product images unless you select "Import Collections" in the Shop Now tab of your admin. Once selected, add a menu item, and then the preview will display products that match the original products' Product Type.

For further questions, please contact the merchant's Merchant 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.

Related Articles