Overview

This article covers how to inject the Extend SDK, Extend Shopify SDK, and some essential files that will be used throughout the integration.

Est. Time of Completion: 30 minutes

Video Guide

Configuration

1. Go to the Shopify Script Editor.
2. Create a duplicate of your Current Theme :
   We strongly advise working in a separate, non-live copy of your theme, to ensure your changes aren't visible to customer until you are ready to publish them.
   1. Select the theme you'd like to use, then click Actions -> Duplicate
   2. Under the duplicate of the theme, usually labelled Copy of {live_theme_name} click Actions -> Rename
   3. Replace Copy of with Extend -
   4. Click Actions -> Edit Code

3. Open the theme.liquid (/Layout/theme.liquid)file. Copy the following new lines of code and place them right above the closing </head> tag, then click Save.

<!-- Extend -- Load Extend SDK Configuration script -->
{% render 'extend-configuration' %}
<!-- Extend -- End Extend code -->

4. (in the left sidebar of the code editor), locate the Snippets directory and click "Add a new snippet" and name it extend-configuration

5. Add the following code to your extend-configuration snippet:

<!-- Extend - Add necessary SDK script tags and configure the store -->
<script src='https://sdk.helloextend.com/extend-sdk-client/v1/extend-sdk-client.min.js' defer='defer'></script>  
<script src='https://sdk.helloextend.com/extend-sdk-client-shopify-addon/v1/extend-sdk-client-shopify-addon.min.js' defer='defer'></script>  
<script>
 window.addEventListener('DOMContentLoaded', function(){
  window.Extend.config({ storeId: '{INSERT_STORE_ID_HERE}', environment: 'production' })
  window.Extend.integration = {};
  window.Extend.integration.analytics = false;

  // Extend - QA Cypress booleans
  window.Extend.integration.isExtendPdpOfferEnabled = true;
  window.Extend.integration.isExtendOfferModalEnabled = true;
  window.Extend.integration.isExtendMainCartOfferEnabled = true;
  // Extend - End Code
 });
</script>

<!-- Extend - Render aftermarket integration snippet -->
{% render 'extend-aftermarket-integration' %}

<!-- Extend -- Load product integration script -->
{% render 'extend-product-integration' %}

<!-- Extend -- Load cart integration script -->
{% render 'extend-cart-integration' %}

<!-- Extend - Render analytics -->
{% render 'extend-analytics' %}
<!-- Extend - End Extend code -->

6. In the code you just added, replace the text '{INSERTSTORE_ID_HERE}' with your specific Extend account's Store ID. Click _Save when you're finished.

Verify

1. Open the preview of the theme you are working on.
   Helpful Tip: Shopify's Preview button will default to opening in a new browser window with a more limited browser interface. You can right click the Preview Theme button and click Open in new Tab to view it within your usual browser interface.

2. Open your browser's console window.
   Helpful Tip: This is usually F12 on your keyboard. In Google Chrome, right-click anywhere on the page and select "Inspect."
3. Type Extend into the console and hit Enter.
   You should see a result appear for "Extend".
   
4. Type ExtendShopifyand hit enter. You should see a result appear for "ExtendShopify."
   
5. If both of these console search terms produced results, congratulations! you completed this step!

If you run into any issues during this integration process or have questions please reach out to our team through your Merchant Portal.