Setting up the Extend SDK
Learn how to set up the necessary Extend components needed to do the integration
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
- Go to the Shopify Script Editor.
- 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.- Select the theme you'd like to use, then click Actions -> Duplicate
- Under the duplicate of the theme, usually labelled
Copy of {live_theme_name}
click Actions -> Rename - Replace
Copy of
withExtend -
- Click Actions -> Edit Code
- 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 -->
- (in the left sidebar of the code editor), locate the Snippets directory and click "Add a new snippet" and name it
extend-configuration
- 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 -->
- 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
- 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.
- Open your browser's console window.
Helpful Tip: This is usuallyF12
on your keyboard. In Google Chrome, right-click anywhere on the page and select "Inspect." - Type
Extend
into the console and hit Enter.
You should see a result appear for "Extend".
- Type
ExtendShopify
and hit enter. You should see a result appear for "ExtendShopify."
- 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.
Checklist
Updated about 1 month ago