Web to print with Drupal Commerce

Empower your customers to customize products.

There is a high likelihood the t-shirt on your back or in your closet started life as someone’s idea, uploaded to an online tool. The idea that a person could buy t-shirts and design them in a tool and approve the proof before payment now seems almost commonplace. Why aren’t more people talking about this?

Your customers are expecting more tailored experiences when buying decorated apparel, signage and personalized promotional products from small to medium web storefronts. Getting the “Web to Print” toolset just right on Drupal is not easy.

Here are a few of the expectations for ordering printed materials from the web on Drupal:

• Drupal integration: Full integration with existing Drupal website
• Intuitive editor experience: Drag and drop toolset, uploading of files (jpg, png, tiff, pdf, eps, ai, PSD), cropping and quick fixes to pictures, lots of fonts, pop-over text formatting, white labelled branding with plenty of customizations, low-resolution upload warnings, and mobile-friendly web to print tool.
• Proof and checkout workflow: Print-quality PDF proof, edit before purchase, edit after purchase, CMYK colour space, super large files that need processing

Getting off the bespoke product editor island

An example of a bespoke web to print tool Acro Commerce built with Drupal and jQuery UI.

Like many Drupal agencies, there’s rarely a problem we face that can’t be solved with in-house open source tools. Before we decry the problems, we are very proud of what we accomplished in the past given budget and available tools. With jQuery UI and HTML-to-pdf experience, we’ve built these kinds of tools before, to varying degrees of success. Every time we tackled a project like web-to-print, the struggle became very real. With minimal hours, the tools we knew and loved created a functional experience that was hard to maintain and very error-prone.

More often than not, we had trouble with converting HTML to PDF reliably enough for high-resolution print quality, especially with customer-supplied imagery and layout. Offering fonts in a customized product builder is challenging to get right, especially when you’re creating a PDF that has to have the font attached. The RGB colorspace doesn’t translate easily to CMYK, the most common four-colour process for printing. And all of our experience in software revolved around pixels, not these things called picas. In this crazy world, the resolution could go as high as 3200 dpi on standard printers, dimensions suddenly couldn’t be determined based on pixels.

Enter one of our clients. We had previously built them a tool with existing technology, but they now wanted some of the above-mentioned features, but not all of them. We took this as a sign to tackle the technical challenges we grappled with over a year ago. 

Product customization is not the right phrase

Example screenshot of keditor in action.

We started to look for product customization tools and found nada. Then we looked for web layout tools that would maybe give Drupal a better HTML editing experience but found a disappointing lack of online web to print solutions. We did find grapejs, innovastudio, and keditor. 

But, almost universally, these javascript-based libraries were focused on content and not editing products that would be printed. We needed something with the goal of creating a printable image or PDF with a tight integration around the editor experience. We had nearly convinced ourselves there wasn’t a vertical for this concept, it seemed like nearly all product builders in the wild were powered by one-off conglomerations of toolsets.

Web to print using Customer’s Canvas works with Drupal, right?

Finally, via a project manager, an industry phrase was discovered that opened the floodgates: Web to print. After a bit of sifting through the sales pitch of all the technologies, almost all tools were found to be cumbersome and hard to integrate into an existing Drupal website, save one. Customer’s Canvas checked all the boxes and then some:

• SAAS (so we don’t have to host customer’s images, or maintain the technology)
• White label
• More than fully featured
• Completely customizable
• Iframe-friendly. Meaning we could seamlessly plop the product customization tool into an existing or new layout.

Example of Customers Canvas running in Drupal Commerce.

To make an even longer story short, we jumped on board with Customer’s Canvas and built the first (to our knowledge) third-party web to print Drupal 7 module. We might make a Tech Talk regarding the installation and feature set of the module. Until then, here’s what you can do:

1. Download and install the module
2. Provide some API credentials in the form of a javascript link
3. Turn on the Drupal Commerce integration
4. Provide some JSON configuration for a product via a field that gets added to your choice of product types.
5. Click on Add to Cart for a Customer’s Canvas product
6. Get redirected to a beautiful tool
7. Click “Finish” and directed to a cart that can redirect you back to edit or download your product.
8. As a store administrator, you can also edit the product from the order view page.

Drupal 8, web to print and the future

Currently, the module is built for Drupal 7. Upgrading to Drupal 8 Commerce 2 is definitely on our roadmap and should be a straightforward upgrade. Other things on the roadmap:

• Better B2B features – You can imagine a company needs signs for all of its franchisee partners and would want the ability to create stores of customizable signage. With Commerce on Drupal 8, that would be pretty straightforward to build.
• More download options — Customer’s Canvas supports lower-res watermarked downloads for the customers as well as the high res PDF downloads. Currently, the module displays high resolution for all parties.
• Better administrative interface — If you’re using Drupal 7, the integration for this module is pretty easy, but the technical experience required for creating the JSON formatting for each product is pretty cumbersome. So it would be awesome (and very possible) to build out the most common customizations in an administration interface so you wouldn’t have to manage the JSON formatting for most situations.
• Improve the architecture — Possibly support Customer’s Canvas templates like entities that are referenced so that you could create a dozen or so customizable experiences and then link them up to thousands of products.
• Webform support — The base module assumes your experience at least starts with an entity that has fields and gets rendered. We could build a webform integration that would allow the webform to have a customer’s canvas build step. T-shirt design content anyone?

Integration can be a game-changer

One of the big reasons we work with Drupal and Drupal Commerce is that anything with an API can be integrated. This opens the doors to allow the platform to do so much more than any other platform out there. If you need an integration made, talk to us! We're happy to help.