Cacher is the code snippet organizer for pro developers

Problem

If you have tried installing the Zendesk Web Widget into your Shopify theme but it does not show up or gives an error, this might be the fix for you

This fix should work for the following Shopify themes installed prior to September 2015 :

• React
• Brooklyn
• Supply
• Classic
• Solo
• Pop

Fresh installs of these themes from the Theme Store are free of this bug. If you do not wish to edit any theme files, installing a fresh copy will also work.

Step 1

Open the Theme Template editor and go to assets/shop.js.liquid or assets/timber.js.liquid depending on your theme

Step 2

Do a search for timber.responsiveVideos (control + f on windows or command + f on a mac). You should see a block of code that looks like this

Delete this code and replace it with the following:

timber.responsiveVideos = function () {
  var $iframeVideo = $('iframe[src*="youtube.com/embed"], iframe[src*="player.vimeo"]');
  var $iframeReset = $iframeVideo.add('iframe#admin_bar_iframe');

  $iframeVideo.each(function () {
    // Add wrapper to make video responsive
    $(this).wrap('<div class="video-wrapper"></div>');
  });

  $iframeReset.each(function () {
    // Re-set the src attribute on each iframe after page load
    // for Chrome's "incorrect iFrame content on 'back'" bug.
    // https://code.google.com/p/chromium/issues/detail?id=395791
    // Need to specifically target video and admin bar
    this.src = this.src;
  });
};

The end result should look like this:

Save the file and follow the normal install instructions for the Zendesk Web Widget. If you followed the instructions properly, it should already be working. If not, double check you code.

If you are not using one of the aformentioned themes, this may stil work if it was built using Timber or based off one of the above mentioned themes.