Shop Now: On-Store Setup

OVERVIEW

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
  • Loop Plus Subscription
Timing:
  • 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. Launch your Shop Now: On-Store experience

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

  • 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="https://unpkg.com/@loophq/onstore-sdk@latest/dist/loop-onstore-sdk.js"></script>
<script> 
	LoopOnstore.init({ 
		key: "XXXXXXXXXXXXXXXXXXXXXXXXXXXX", 
		attach: "XXXXXXXXXXXXXXXXXXXXXXX" 
	});
</script>

  • Paste your API key, from Loop Admin > Settings > Developers, as the key value of the init call
  • 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)
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 api.loopreturns.com/api/v1/cart/ 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 instantly redirected to a Loop 404 page - this shows that you have used the API successfully and are ready to move forward
Note: Testing steps provided assume you are using Google Chrome browser

Step 4: Modify customer experience, as needed

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

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;
}<br></span>

Help Chat

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

Without Banner:






With Banner:

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
<strong>//get rid of extra add to cart
.loop-returns-activated .other-add-to-cart-button{
    display:none
}
//get rid of help chat
.loop-returns-activated .help-chat{
    display:none
}
//modify credit bar to work with mobile bottom drawer add to cart
@media screen and (max-width: 960px) {
    #LRS{
        bottom: 2rem !important
    }
}</strong>

Step 5: Update any additional customizations

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

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 Merchant Onboarding Manager or email us at support@loopreturns.com

FAQ

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 support@loopreturns.com

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 support@loopreturns.com