Shop Now: On-Store Setup


Loop's Shop Now: On Store API enables customers to shop directly on your website during their return, leveraging their return credit. To see what the experience looks like, check out the video below.

Requirements for set up:

  • Experience with Liquid
  • Approximately 2 hours (set up time may vary)

Integrate with 6 easy steps 

  1. Set up a development theme in Shopify
  2. Add snippet to the development theme
  3. Test
  4. Modify customer experience, as needed
  5. Update any additional customizations
  6. Configure Shopify script discounts
  7. Custom Redirect 

Step 1: Set up a development theme in Shopify

Development should begin by setting up a safe space to begin the Shop Now: On-Store implementation. 

  • Under the "Online Store" tab in Shopify, select Actions > Duplicate for your current live theme
  • After a few moments, a clone of your current live theme will appear in the "More Themes" section
  • Begin using this theme

Best Practice: We recommend you name the theme with a convention that you will remember, such as "Theme + Loop On-Store Integration"

Step 2: Add snippet to the development theme

The below instructions are for merchants who use Shopify's theme builder. If you do not use Shopify themes and have a headless Shopify store, head over to this article because there are significant modifications needed for setup.

Setup instructions:

  • Select Actions on your new theme
  • Select Edit Code
    • This will load Shopify's theme editor 
  • Locate the file under the layout section named theme.liquid and open
  • Scroll to the bottom of the page and find the </body>
  • Paste the scripts below directly above the </body> tag
<script src=""></script>

  • Paste your API key, from Loop Admin > Settings > Developers, as the key value of the init call. This key should be scoped to Cart only. Checking the other boxes could expose returns data.
  • Find a unique selector for your checkout button and paste that as the attach value in the init call
    • This is typically an ID or Class (e.g. #checkout or .checkout). 
    • You can find this by right-clicking on your checkout button and selecting inspect element
    • If a unique ID does not exist on your checkout button, be sure to add one (this process will vary based on your theme, but typically it can be found in cart-template.liquid)
    • If your store has multiple checkout buttons that do not share the same class or ID, you can set multiple attach values by separating them with a comma (,) . Example:  attach="#checkout, .checkout-btn"
The snippet code will now automatically sense and activate the Loop Shop Now: On-Store Experience when coming from Loop Returns. It also binds the snippet code with your Loop API Key, enabling it to talk to our API.  LoopOnstore.isActive() can be called to check if a user is bucketed into an On-Store Experience

Step 3: Test

  • Go to your "Online Store" tab in Shopify
  • Select Actions dropdown on the theme you want to preview
  • Select Preview
  • In your browser, open Developer Tools to access your console
  • Enter LoopOnstore.testMode() in the Console and press Enter
    • You will see the following messages appear on your console and the Credit Indicator will be activated on your site

View Credit Banner: 

  • You should see the credit banner at the bottom of the page
    • If you do not see a credit banner, go back to Step 2 to make sure you have correctly installed the snippet

Test Checkout Button (that your Loop.submit function is working):

  • Add any product to your cart
  • Open your inspector and navigate to the "Network" tab 
    • Make sure the "Preserve log" radio button is set 
    • Click the button
  • Select the checkout button in your browser cart

Things to look for:

  • A call to should appear in the network calls
  • It should contain the payload of the array of variant ID's
  • The response should hold a token
  • You should be shown a modal that says Test Mode Successful
Note: Testing steps provided assume you are using Google Chrome browser

Step 4: Modify customer experience (optional)

There are a few things to watch out for when building a Shop Now: On-Store experience. Examples of each are below, along with solutions:

  • Alternative Payment Methods or Home Try-on
  • Help Chat
  • Mobile Checkout
  • Discount Code and Special Offer Pop-Ups
  • Preserving Items in the Cart

Alternative Payment Methods or Home Try-on:

Your store may offer alternative payment options, such as AfterPay, Google Pay, Apple Pay and PayPal, instead of using Shopify checkout. These are not available on Loop On-Store and  should be hidden when Loop is running. Similarly, if there are buttons for a Home Try-On program, they should also be hidden when Loop is running.

To hide elements: 

  • CSS is typically the best way to hide additional elements
  • The class 'loop-returns-activated' is added to the </body> when Shop Now: On-Store is active
<span style="background-color: initial; font-family: inherit; font-weight: normal;">.loop-returns-activated <ANY ELEMENT CLASSIFIER> {
   display: none;

Help Chat

Chat widgets will collide with the Loop Shop Now: On-Store credit banner and should be adjusted or hidden when Loop is running. 

Mobile Checkout

Mobile add-to-cart buttons can cause trouble for the Loop Shop Now: On-Store experience and should be adjusted when Loop is running. 

Discount Code and Special Offer Pop-Ups

It’s common to show special offers through a pop-up modal when a customer enters their site. Anything distracting a customer from adding products to their cart is distracting for returning customers, especially since these discounts will not apply to items bought using the Loop Shop Now: On-Store experience. It is recommended that these be deactivated. 

To hide or adjust elements:

  • CSS is typically the best way to hide or adjust these additional elements
  • The class 'loop-returns-activated' is added to the </body> when Shop Now: On-Store is active
  • Either moving elements around or simply adding 'display:none' to the items you don't want to show up is sufficient
//hide add to cart
.loop-returns-activated .other-add-to-cart-button{
//hide help chat
.loop-returns-activated .help-chat{
//modify credit bar to work with mobile bottom drawer add to cart
@media screen and (max-width: 960px) {
        bottom: 2rem !important

Preserving Items in the Cart

By default, once a customer navigates from their cart on your website over to Loop to finalize their return by selecting 'checkout', if they navigate back to your shop from Loop by selecting the back button, they will return to your shop with a cleared cart. The selected products will still be in Loop, but if you are concerned that a cleared cart on your shop will cause confusion, you can add the preserveCart option to your On-Store code snippet to keep the products visible in the cart on your website.

<script src=""></script>
		preserveCart: true 

Step 5: Update any additional customizations (optional)

Change the Copy of your Checkout Button

Changing the copy of your "Checkout" button in your cart is a powerful way to remind customers they are shopping with return credit. You can also customize your On-Store credit banner, to suit your brand.

  • Add CSS in your files to overwrite or add CSS to the snippet classes found on the On-Store Credit Indicator 
  • Check out what classes are applied to the banner by looking in the browser inspector. Step 6: Launch your Shop Now: On-Store experience

Customizing the Shop Now Redirect

By default, Shop Now defaults to the home page of your website. You can customize the redirect of Shop Now so your customers are redirected to a to a specific collection on your site instead. Please review this Loop On-Store SDK article and leverage the below example:

document.addEventListener('Loop:Activated', () => {

When you are done testing your integrations, you can go live! To publish your theme:

  • Go to your "Online Store" tab in Shopify
  • Select Actions dropdown on the theme you want to publish
  • Select Publish
    • Done properly, this code will lie dormant on your site until the Shop Now: On-Store experience is enabled through Loop
  • Once this is complete, notify your Onboarding Specialist or email us at

Step 6: Configure Shopify script discounts (optional)

Loop’s On Store experience can leverage merchant’s existing Shopify scripts to determine proper discounts for customers’ Shop Now: On Store orders. 

How it works:

  1. Customer uses Loop on-store experience to add items to their cart
  2. On-store JS sends Shopify `cart` object to new Loop core API endpoint
    1. Cart includes products and discounts to be applied
  3. Loop core interprets new cart prices & translates them to discounts in our system

Setup instructions:

To support On Store + Discount Scripts, add full: true to your init() call after the attach line.

Existing Limitations:

  • Discount must be applied at Order Level

CDN Update

This is only relevant to Loop merchants who setup On-Store before November 2022. We are suggesting all merchants switch the url used in their Onstore script in their Shopify theme to

This switches the Content Delivery Network (CDN) used to host the Onstore code from Unpkg to JSDelivr, which has shown to be more reliable and transparent in their uptime status. JsDelivr is Multi-CDN and Multi-DNS, which means that it is more resilient and likely for Onstore to continue working as normal if one provider was to have an outage. includes a chart showing the differences.

To make the change, you will need to adjust the code snippet in your development theme.

  1. Select Actions on your new theme
  2. Select Edit Code
  3. This will load Shopify's theme editor
  4. Locate the file under the layout section named theme.liquid and open
  5. Scroll to the bottom of the page and find the </body>
  6. Look for this snippet of code

    <script src=""></script>
  7. Change out the first <script> tag to

    <script src=""></script>
  8. Save your theme file.

All should be working as previous, as this simply switches the source of the Onstore code. You can also try running test mode to make sure. 


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 reach out to your Merchant Success Manager or

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 Shop Now: On-Store experience thoroughly after making your changes. Refer to Step 3 of this guide 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 Step 1 and Step 2. If you continue to have issues please contact your Merchant Onboarding Manager or

Where can I find my Shop Now: On-Store API Key? This can be found under Loop Admin > Settings > Developers. If you have any issue accessing this, please contact your Merchant Onboarding Manager or  

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