CDN Update for Shop Now: On-Store

OVERVIEW

Loop suggests that all merchants update the On-Store code in their Shopify theme from Unpkg to JSDelivr. JSDelivr provides a trustier and more transparent uptime status, which measures the reliability of a machine or computer.

How it works

JSDelivr is a multi-CDN and multi-DNS architecture. This means that it combines multiple content delivery networks (CDNs) into one larger network, as well as uses domain name systems (DNSs) from two or more providers. Because JSDelivr has several of both CDNs and DNSs, it is resilient and more likely to function normally, even in situations such as outages. 

Go to JSDelivr’s website to learn more about the differences between Unpkg and JSDelivr.

Setup instructions

Play the video below or review the written instructions beneath it to learn how to update the Unpkg link.

To adjust the code snippet in the development theme:

1. Go to Sales channels > Online Store > Themes in Shopify admin.
2. Find the new theme and click the ellipsis button > Edit Code to get to Shopify's theme editor.
3. Under the Layout folder on the left, click the file titled “theme.liquid”.
4. Scroll to the bottom of the code or use the finder tool.
5. Shortly above </body>, find this snippet of code:

<script src="https://unpkg.com/@loophq/onstore-sdk@latest/dist/loop-onstore-sdk.js"></script>
<script>
        LoopOnstore.init({ 
                key: "example api key",
                attach: "example attach value", 
        });
</script>

6. Return to these instructions and copy this URL: https://cdn.jsdelivr.net/npm/@loophq/onstore-sdk@latest/dist/loop-onstore-sdk.min.js
7. In the theme editor, replace the original link from the snippet in Step 5 with the previously copied URL (leave the quotes around it). The new snippet should look like this:

<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>

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

   

Because these actions simply switch the code source, everything should function the same way as beforehand. Merchants can also try running test mode with a developer’s help to make sure.

Please reach out to support@loopreturns.com with any additional questions.