Search the site:

Copyright 2010 - 2024 @ DevriX - All rights reserved.
Browse more at:White Labeled

T-Shirt Designer Platform With WooCommerce

Due to the NDA with the client, the case study explains the problems solved by DevriX and our process breaking the business requirements into technical components and software architecture without sharing brand names and URLs.

A client reached out for a project resembling the Teespring technical and business model. The main goal was building a community platform for selling T-shirts based on custom designs, in a way that stimulates the community members to keep sharing the site through various channels and submitting custom designs in exchange for a percentage of the sales.

Our Business Process

We had a business model that was already working and some good examples of their infrastructure, but there were several different requirements as well. Our client requested two different platforms – one being publicly available and accessible from all of the users and customers, and one internal for the staff.

After some evaluation, we had to build several different components:

  • A visual dynamic image manager that lives in the browser and is supported by all major devices
  • Custom clothing designs – different types of T-shirts, hoodies, sweatshirts
  • Customizable palettes with colors for the tees, font options for custom signatures or titles, duplicating panels
  • T-shirt animation – zooming in and out, switching to back and front
  • Connecting the engine to WooCommerce and OpenCart
  • Providing the respective views with pricing, custom marketing page and campaign modules

Technical Solution

We used HTML5 and Fabric.js for our frontend editor manager. Our prototype looked like this:

Screenshot showcasing the editing UI for tshirts

There are various options for styling a shirt, updating its color, adding custom text, images or reusing predefined templates.

Fabric allows us to customize the canvas infinitely, and provides a great API for better fine adjustments, moving entire components and combining different elements in a flexible manner.

Integration with WooCommerce and Opencart

The main marketing website and eCommerce engine was based on WordPress with WooCommerce. Our team built an WooCommerce extension providing a flexible view for authorized users for creating new custom designs, and saving them as templates or T-shirts for sale.

Each of the custom designs could be promoted to a single page including marketing copy, price, and various ways to engage other people – sharing buttons, countdown timer, a library for dime sales, a countdown for scarcity and more.

Each design is stored as a separate WooCommerce product with several different fields storing the various options, allowing for using a template as a new design and introducing minor adjustments instead of starting from scratch.

Our client asked for Opencart integration as well, since they use a custom platform for warehouse management and CRM based on Opencart’s database. Therefore, we built a custom script triggered when a new design is stored in WooCommerce, interacting with the Opencart install and creating a new Opencart product as well, only migrating the custom designs and relevant fields (such as prices for sale, profit margin, and user details).

Business Results

The frontend platform was connected to WooCommerce and Opencart, and we bundled several different libraries and extensions providing the final look and feel for the custom design presented by the client. New users are able to sign up and access the T-shirt builder, create custom designs and get a sales page connected to their user.

From then on they can define custom pricing and receive a percentage of the sales as a profit. Different 3rd party services were integrated for social media and email marketing, and affiliate management platform is available for joint ventures and other collaboration efforts increasing the engagement from end customers and street fashion stores.


Hire DevriX Contact us
  • Please select the closest to your needs and describe it in the field to the right

  • The DevriX team will get back to you as soon as we review your request.