Troubleshooting large vendors

We recently launched http://trailwear.saranac.com and http://schultzanddooleyonline.com for Saranac Beer. Both websites are custom Shopify ecommerce stores. After two weeks of successful store operation, however, shoppers reported that both Shopify-driven stores were suddenly inaccessible in Internet Explorer 6 and Internet Explorer7. Until this point, both stores operated and displayed perfectly in all major browsers including Internet Explorer 6, Internet Explorer 7, Firefox, and Safari.

We first triple-checked our own code, and we concluded that nothing was wrong with our Shopify template's HTML or CSS. Next, we browsed the official Shopify forums. According to recent forum posts, Shopify performed maintenance on their web and statistics servers the previous day to optimze their servers before the expected holiday rush. These changes unexpectedly interrupted many customers' Shopify stores the following day. We emailed the Shopify technical support team alerting them of our own situation, and they confirmed our issue was likely due to the maintenance issues and that they would correct the issue within two or three hours.

Several hours passed, and our client's two Shopify stores were still inaccessible in IE6 and IE7. We emailed Shopify technical support once more alerting them that our issue persisted, even after they had fixed the previous day's server issues. Their response: our templates may be requesting a resource that did not exist. But wouldn't this return an HTTP 404 Not Found error code? We again checked our template's HTML and CSS calls for non-existant resources, and we were confident this was not the issue. Our HTML and CSS were fine. After all, the two stores were working perfectly for two weeks before this issue arose.

We knew it was not an HTML or CSS issue. We knew the error was an HTTP 406 Unacceptable error (when a web browser receives the content but does not recognize the content). This led us to believe the content returned by Shopify did not have the correct mime-type. We searched through our HTML and CSS once more until we found the resource in question.

We referenced a file called "csshover.htc" in our IE6-only CSS stylesheet to enable the :hover psuedo-selector for all DOM elements in IE6; by default, IE6 only recognizes the :hover psuedo-selector on elements. Many web developers use the "csshover.htc" technique to enable semantically correct dropdown CSS menus in IE6. Shopify's nginx web server served the "csshover.htc" file with the "www/unknown" mime-type causing IE6 and IE7 to diplay the 406 error. Instead, Shopify's web servers should serve ".htc" files with the "text/x-component" mime-type.

A quick Google search found http://support.microsoft.com/kb/306231. This URI provided the solution for this issue. We emailed this solution to Shopify and are awaiting their official response.

This brief case study demonstrates the depth of our technical expertise and our desire to provide detail-oriented services to our clients. We also try our best to find answers to and provide proactive solutions for the problems we face, even if the problems are caused by large and reputable vendors like Shopify that we have come to use and trust for our day-to-day needs.

Please note that this case study is not a negative criticism of Shopify. Instead, this case study is a critical analysis of a large vendor's technical issue that we experienced and the proactive process we took to solve the problem. Shopify's customer support is top-notch. All of our support emails were answered within 15 minutes, and Shopify's designers and engineers have been alerted of this issue. We stand by Shopify's steller service and support, and we will continue to use them for our future ecommerce needs.