Shop Now: On-Store Setup
Loop's Shop Now: On-Store feature uses your store’s product collections in Shopify to encourage customers to make exchanges instead of returns. The resulting exchanges help you retain and increase revenue.
Tip: We recommend setting up On-Store with a web developer or someone with fluent knowledge in HTML, JavaScript, CSS, or liquid coding. The process generally takes about two hours.
Important: These setup instructions are for merchants using Shopify's theme builder. If you do not use Shopify themes or create your own, you probably have a "headless" Shopify store. Headless means that your 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 On-Store setup, go to this article instead.
In this article:
- How it works
- Shop Now: the On-Store customer experience
- Set up Shop Now: On-Store
- Test your work
- Optional setup details
- Publish Shop Now: On-Store
- FAQ
How it works
The Shop Now: On-Store experience has two parts:
- The Shop Now feature lets your customer exchange an item they bought with any other item from your store's catalog while they're still in the Loop portal.
- The On-Store version of Shop Now brings the customer directly to your 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, you can choose to set up more details based on your store’s specific needs.
Notes:
- We recommend saving a backup of your previous theme before publishing the new one. Please contact a developer on your team, your Merchant Onboarding Manager, or support@loopreturns.com if you need help 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 your current theme is not set up for On-Store, you 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 instructions before the "Fill in the blanks" header.
Set up a development theme in Shopify
First, you’ll set up a space in your Shopify account to enable the On-Store experience:
- Open your Shopify admin page in a separate tab or window in your browser.
On the left sidebar, click Sales channels.
Sales channels section of Shopify side bar. Click Online Store when the pop-up window appears.
Online Store option within Sales channels. After the page loads, your store's current live theme should appear in the middle of your screen. Click the ellipsis button (a set of three periods) on the right side of the current live theme.
Placement of the ellipsis button on your current theme. From the ellipsis menu, click Duplicate. A copy of your theme will appear in the "Theme library" section of the page with a “Just Added” tag next to the “Copy of [theme]” title.
Newly-added theme in Shopify. Do NOT click Publish on the new theme yet, as doing this will activate the new theme before setup is done.
- Rename the new theme as you need.
On the new theme, click the ellipsis button > Rename. A pop-up window will appear with a text field.
"Rename" button on newly-added theme. - Enter the new name. We recommend naming the theme in a way that you will remember, such as "Theme + Loop On-Store Integration."
Click Save in the pop-up window.
"Save" button on new theme.
Add a snippet to the development theme
A snippet is a reusable block of code, similar to a paragraph in a textbook. Saving these can help you reuse good pieces of code in the future.
We've already written the On-Store snippet for you! Just insert it into your theme code by following the instructions below:
On the new theme, click the ellipsis button > Edit code. This will load Shopify’s theme editor.
"Edit code" button on new theme. Under the Layout folder on the left, click the file titled “theme.liquid”.
Locating the "theme.liquid" file. - Locate the closing body tag (" </body> "), as you will add the snippet above this line. You can find </body> in a few ways:
- Scroll to the bottom of the code window and look for the tag there.
- Press Control F (Command F on a Mac) at the same time on your keyboard to activate the finder tool. In the finder’s text field (probably in the top right of your screen), type “ </body> ”. Then, press Enter on your keyboard. The finder will highlight </body> in the code for you.
- Return to this instruction page. Highlight and Copy the On-Store script below:
<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>
Go back to your Shopify theme editor. Click in front of </body> in the code, then Paste the highlighted script. This should place the script directly above the </body> tag so that it looks like the screenshot below:
On-Store script placement in Shopify theme editor. Click Save in the upper right corner of your theme editor window.
Save button in the upper right-hand corner of the Shopify theme editor.
Fill in the blanks
Next, we need to plug in the remaining values for the On-Store snippet. To learn how to set up your new theme, play the video below or review the written instructions beneath it. The video covers instructions before the "Test your work" header.
Add your API key
To add your API key to the On-Store snippet:
- Open a new browser tab or window and go to Loop admin.
On the left, click Settings > Developers.
Developers option under Settings in Loop admin. - Scroll down to the “API keys” section.
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. - Copy your API key from the “Key” column.
- Go back to your theme editor in Shopify and find the On-Store snippet you copied and pasted earlier.
Replace “example api key” with your API key. Be sure to keep the quotes around it!
Placement of API key within Shopify's theme editor. Click Save in the upper right corner of your theme editor window.
Save button in the upper right-hand corner of the Shopify theme editor.
Add your attach identifier
To add your attach value to the On-Store snippet:
- Open your Shopify store in a new tab.
Right-click your checkout button and select Inspect to open the Inspector Tool.
Opening the Inspector Tool. In the highlighted part of the Inspector Tool, find the ID or Class (this will look like “id=‘[id]’” or “class=‘[class]’”). These are unique identifiers for your checkout button.
Locating the checkout button Class in the Inspector Tool. Copy the part in quotes for ID or Class; either one will do.
If a unique ID does not exist for your checkout button, add one. You may be able to find one by going to Snippet > “cart-template.liquid” in your theme editor. However, the placement depends on your particular theme. If you need help, please reach out to support@loopreturns.com.
- In your Shopify theme editor, find the On-Store snippet you copied and pasted earlier.
Replace “example attach value” with your identifier, keeping the quotes around it.
Placement of attach value within Shopify's theme editor. 7. Click Save in the upper right corner to make sure all your changes keep!
Important:
- When adding identifiers, a hash (#) should always proceed an ID, and a period (.) should always proceed a Class.
- If your store has multiple checkout buttons with different Classes or IDs, you can add multiple attach values to this code by separating each value with a comma (,). The code will not function unless the commas are present between values. A correct example is below:
attach="#checkout, .checkout-btn"
Great job! Later, when you publish the new theme, this code will activate the Shop Now: On-Store experience automatically for customers coming from Loop. Adding your API key to the On-Store snippet also lets your code talk to Loop’s API.
Test your work
Now you can test your work to make sure On-Store is functioning as expected.
Tip: We highly recommend using a developer’s or engineer’s help here.
Test the setup
To test the work you've done:
- Click Save in your theme editor to make sure all your changes stick.
- Click the back arrow on your theme editor page to return to your Shopify themes.
On the new theme you’ve been editing, click the ellipsis button > Preview.
"Preview" button on new theme. - Right-click anywhere on the new Preview tab and select Inspect.
Click the Console tab at the top of the Inspector Tool. If you can't find the Console tab, try clicking the carrot symbol to show more options.
Console and arrow tabs in the Inspector Tool. - Scroll to the bottom of the code in the Console tab.
- Type “LoopOnstore.testMode()” at the very end of the code. (You can also copy and paste it from here.)
- Press Enter on your keyboard. The following messages should appear:
Successful testing messages
Successful testing messages. The credit banner at the bottom of your Preview page
Example credit banner. If these messages and a credit banner don't appear, return to the snippet section to make sure you have installed the script correctly.
Test the checkout button
You must also test the checkout button to confirm that your Loop.submit function works. Below the GIF (graphics interchange format) visual are written instructions you can follow.

To test the checkout button:
- In your theme’s Preview tab, add any product to your cart.
- Right-click anywhere to open the Inspector Tool again and click the Network tab.
Underneath the tab names, make sure the "Preserve log" checkbox is selected. If it isn’t, click the “Preserve log” square to select it.
Network tab and selected "Preserve log" checkbox. - Click the checkout button in your cart within Shopify.
Troubleshoot if needed
Clicking the checkout button should display a pop-up on your screen saying “Test Mode Successful”:

If the pop-up does not appear, double-check the following:
A call to “api.loopreturns.com/api/v1/cart/” should appear under Inspector Tool > Network > Names.
Network tab and Name sub-tab in the Inspector Tool. - 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.
Optional setup details
Once your tests are successful, you are ready to visualize this integration on your site. However, we recommend also reviewing the optional setup steps before publishing your new theme, in case your store has additional needs Loop can help you meet. Please consider the article above with a developer before continuing. After setting up anything else you need, continue below.
Publish your Shop Now: On-Store theme
After setup and testing, you are ready to publish your theme. Below the GIF are written instructions you can follow.

To publish your On-Store theme in Shopify:
- Go to Shopify admin > Sales channels > Online Store.
Click the Publish button next to the theme you want to publish. This will display your new theme on your storefront immediately.
"Publish" button on new theme in Shopify admin. - Notify your Onboarding Specialist or email us at support@loopreturns.com!
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.
FAQ
What plan do I need to be on to utilize this feature? This feature is included for merchants with Loop Plus or the Integrations add-on. If you are not on one of these plans and would like to add this feature, please reach out to your Merchant Success Manager or support@loopreturns.com.
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“ and “Add a snippet to the development theme“ 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 > Settings > Developers.
If you have any questions, please contact your Merchant Onboarding Manager or support@loopreturns.com.