Documentation

BigCommerce ImageEngine Integration with JavaScript

Although BigCommerce has a flexible template system, a JavaScript based implementation of ImageEngine may be beneficial both from an implementation and performance perspective. This guide will demonstrate how to implement a JavaScript which will serve all images through ImageEngine.

# 1) Get your ImageEngine Delivery Address

If you haven’t done so already, sign up for an ImageEngine account to get your unique ImageEngine delivery address. Alternatively, reach out to our customer success team.

Your ImageEngine delivery address looks something like this: xxxxx.cdn.imgeng.in. Keep this handy for the next step.

Note that the origin of ImageEngine should usually be cdn11.bigcommerce.com.

# 2) Create the Script in the Script Manager

  1. Log on to BigCommerce Admin Panel

  2. From the left hand menu, navigate to Storefront > Script Manager > Create a Script

  3. Click the “Create New Script” button.

  4. Fill in the fields as shown in the screenshot below


  5. Paste this script into the “Script contents” box:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
    
    <script>
    /* 
    Change this variable to use your unique ImageEngine Delivery Address
    */ 
    var imageEnginecdn = "​example.cdn.imgeng.in​";
    
    $(function(){$(".productView-img-container").hover(function(){var i=(i=$(".easyzoom-flyout img").attr("src")).replace("cdn11.bigcommerce.com",imageEnginecdn);$(".easyzoom-flyout img").attr("src",i)}),$(".productView-img-container .easyzoom-flyout").remove(),$(".productView-img-container img").removeAttr("srcset"),$(".productView-img-container img").removeAttr("data-srcset"),$(".card-img-container img").removeAttr("srcset"),$(".card-img-container img").removeAttr("data-srcset"),$(".productView-images img").removeAttr("srcset"),$(".productView-images img").removeAttr("data-srcset"),$(".card").each(function(){var i=(i=$(".card-img-container img",this).attr("src")).replace("cdn11.bigcommerce.com",imageEnginecdn);$(".card-img-container img",this).attr("src",i)}),$(".productView-thumbnails li").each(function(){var i=(i=$(".productView-thumbnail-link img",this).attr("src")).replace("cdn11.bigcommerce.com",imageEnginecdn);$(".productView-thumbnail-link img",this).attr("src",i)});var i=(i=$(".productView-img-container img",this).attr("src")).replace("cdn11.bigcommerce.com",imageEnginecdn);$(".productView-img-container img",this).attr("src",i)}),$(document).ready(function(){$(".card-img-container img").show(),$(".productView-images img").show()});
    </script>
    
    • If you already use JQuery in your theme, you can remove that line.
    • Depending on your theme, you may need to edit the selectors in the main script
  6. Double check that you’ve updated the variable var imageEnginecdn = "​example.cdn.imgeng.in​"; to use your unique ImageEngine delivery address.

  7. Click the “Save” button.

# 3) Check your Site

Visit the storefront on a product page and verify that images are loaded through ImageEngine. Look inside the <head> on the markup and verify that the newly added script is there.

Note that some image urls may not be changed by this script. You many need to customize the selectors i the JavaScript.