Before getting started:

-You do not need this snippet to use On-Store API

-This snippet was developed as a way to get Shopify developers jumpstarted with our on-store API. This is no way is a guaranteed solution to every Shopify store. We encourage developers to understand how it works before implementing. This snippet is an encapsulation of streamlined solutions based on templates we have integrated with in the past.

Step 1: Asset Download

-Download Loop On-Store liquid snippet

-Duplicate your current live theme

-Add to file to 'snippets' folder located in the root directory

The snippet will to be added to your theme. It is recommended you clone your live theme and do the rest of your development work there. The snippet folder should be in the root directory of your theme.

Step 2: Setup

-Include in theme.liquid

First, you are going to want to include the snippet in your theme.liquid. This can be done easily using liquid syntax. Find and open your theme.liquid file, located in your ‘layout’ folder. Then, right below the body tag, add:

 {% include 'loop-returns' %}

 Here you will also need to include your individual api key as shown above.

{% include 'loop-returns' %}
<script>
  if(Loop.status === 'active'){
    Loop.setKey('API_KEY');
  }
</script>

This will now add the returns HTML, styling, and functionality throughout your site. When a customer comes to your site from the Loop Portal, two actions will happen:

1. Data about their return will be grabbed and saved.

2. The returns experience on your site will activated.

Global Returns Bar

A global element called the ‘Loop Returns Bar’ will now appear on every page. This will show the customer’s remaining credit, as well as giving them a button that will redirect them back to the app.

Communication to API

Through this snippets functionality with our API your customer will be able to create a cart and buy items with return credit immediately.

Step 3: Product Page Integration

The last step is to bind your PDP with Loop. If you have multiple templates, or varied PDP experiences, how you integrate may have to change per variation. We offer a few plug and play models that can be easily set up, or a manual mode that is simple for developers to utilize.

For all modes besides manual it is required that you defined an "Add to Cart" button. This is done by setting up your config, preferably at the bottom of the product page template(typical product.liquid). An example would look as such:


<script>
  if(Loop.status === 'active'){
     Loop.config.targets.atc = 'ATC_BUTTON_IDENTIFIER';
  }
</script>

Modes:

"url"
-Many Shopify templates use url params to keep track of their variants. This mode is created to detect the variant in the URL param and send it to the Loop Cart when a customer hits "Add to Cart".

-If your variant param is different from the default 'variant' key, you can update it the same you you configured the "Add to Cart" button with "Loop.config.targets.url".

-To activate URL mode, add this additional code under your button config:

<script>
  if(Loop.status === 'active'){
     Loop.config.targets.atc = 'ATC_BUTTON_IDENTIFIER';
     Loop.setup('url');
  }
</script>

Optional: Manual Setup

Your Shopify theme may not be able to utilize any of the preconfigured Modes. In this case, we recommend doing a manual setup. This means binding functions from our snippet to your template by integrating it into your Liquid/JS files. All relevant functions are detailed in the On-Store Snippet section of our documentation.

If you have any questions on the documentation above, send us a chat using the icon in the lower right-hand corner. Or if you’d prefer to send an email, contact us at support@loopreturns.com

Could you please let us know if this FAQ was helpful by using the emojis below?
Thank you!

Did this answer your question?