T-Shirt Design Studio / Tool – HTML5 Supported Mobile Compatible

T-Shirt Design Studio / Tool – HTML5 Supported Mobile Compatible



Allow your customer to design their own T-shirt in your store with the help of Ocodewire Designer Extension

Addon Details
T-Shirt Design Studio / Tool - HTML5 Supported Mobile Compatible $350.00
SKU: oCodeDesignStudio Category:

To increase the customer interest toward your store & to make your store different from others provide this unique feature to your valuable customers. Add our Designer Magento Extension in your store & allow your customers to make their own T-shirt / product as they desire. This extension helps your customers to make changes in the product such as product colour, add text, upload clip art, upload images and add name and number on the product. Also, as an admin you can easily set the price of clip art/ text/ images/ name & numbers and upload the design patterns for the particular product according to your preferences.

Note: Right now, it is only applicable for a T-Shirt stores.

Select Product Colour

 Save Design Changes






1. After package download and installing that package successfully. Clean cache of Magento and Logout.
2. Now, again Login into Magento admin, here you would see “Ocode Designer” in the top menu.
3. Go to Ocode Designer tab->Sample Products and click on “Sample Products”. By clicking that tab, admin can create a sample product of Design Tool.
4. Go to CMS page and click on any CMS page where you want to insert design tool.
5. Now, go to “Content Now” and click on “Insert Widget” from the widget dropdown. Here, select the “Widget Type” as Ocodewire Design Tool, and in “Widget Options”, select front-end template as “Ocodewire Design Tool”.
6. Click on Insert Widget -> Design Section & choose “Page Layout” as “1Column” and “Save” page.
7. Go to Front end and open that CMS page. Now you would see the Ocodewire Designer on that page with T-shirt.



1. Admin can set the price of per clip art, text and uploaded image on the product and can set the price of name and number. To set the price:

  • Login into admin & Go to System -> Configuration from the left panel. Click on “Ocode Designer Setting”.
  • By default 10 and 20 $ added for Clip Art / Text / Uploaded Image and Name / Number Respectively.
  • You can change that price according to you.


1. Admin can upload Fonts for text on the product.

  • To upload a Font, Go to Ocode Designer -> Manage Font -> English Font.
  • Now click on “Add English Font” Button- Add name, upload font and select status of the font.

Note: Admin can upload only .woff format fonts.
2. Admin can upload available Clip Art.

  • To upload the Clip Art, Login into Magento Admin -> Ocode Designer -> Manage Clip Arts.
  • Now, click on “Add Clip Art”. Here, enter Clip Art Title, Default Color and upload Clip Art and then, click on “Save”. You can see your uploaded clip art in “Clip Art Grid”.

3.Admin can manage list of available Colors of Product.

  • Login into Admin -> Ocode Designer -> Manage Color.
  • Now, click on “Add Color” then, add Color Name and Color Code. Then, click on “Save”.

Note: Basically, we are creating a list of all colors with their name and color codes.
4. Admin can upload Design Patters for a particular product.

  • To add “Pattern” for a new product. Login into Magento Admin -> Ocode Designer -> Manage Design Patterns. Now click on “Add Pattern”.
  • Front-View Settings: Enter Product ID, default Color of Product, X-Coordinates (left Position), Y-Coordinates (Top Position), Front Base Image and Shadow Image.
  • Back-View Settings: Enter X-Coordinate (Left Position), Y-Coordinate(Top Position), Back Base Image, Back Shadow Image. For available colors: Enter Color Code of Available Colors.

Note: Entered Color code must be in “Manage Colors List”.
5. Boundary Box is containment area, which notifies customer about the right area where customer can add text, clip-art and uploaded image.

  • To set the boundary box position on the product, enter X-Coordinate(Left-Position),Y-Coordinate (Top-Position), Width and Height.

6.Admin can upload preview images for the product and it would be displayed on the design tool page for Front and Back View.
Note: Image size must be smaller than the original image.


1. Allow customer to change the color of the product without having any loss of design on the product.

  • Customer can change color of a product by simply clicking on “Color Blocks” and customer can change the product by clicking “Change Product” button.
  • After clicking on “Change Product” button, customer would see the “List of Categories” in left side and “Category Products” on right side.
  • By clicking on “Category”, customer can see list of the product of that particular category, by clicking on “Get Details” button, customer would see the product details with an available color list and by clicking on “Color Block”, customer can switch product with that product.

2.Upload option enables customer to upload images on the product and can re-size and set the position of uploaded image.
3. Text option enables customer to add text on product, customer can set text color, text border, text position and size according to his/her requirement.
4. Art option enables customer to add clip art on a product and set the position, color of clip art.
5. Name-Number option enables customer to add name, number on the product. Customer can set the position, color, border color and font-family of name, number.
6. New Design enable customer to recreate a design from the starting.
7. Save Design enables customer will be able to save their design by clicking on “Save Design” button. After entering their email address customer would get an email where they can view attached product designed images.
8. Get quote enables customer to calculate price according to added clip art / text / uploaded image and name-number. Basically, it shows the estimated price.
Note: Get note enables customer to add note for order.
9. Checkout enables customer to add the product into the cart. After Login into customer account, customer can add designed product into the cart.


Allow your customer to design their own T-shirt in your store with the help of Ocodewire Designer Extension

First & Stable Version

2014-08-22 10:06:26

  • Version number:1.0.0
  • Stability: Stable
  • Compatibility: 1.5, 1.6, 1.6.1,, 1.7, 1.8, 1.8.1, 1.9, 2.0
T-Shirt design studio by using the HTML5 and Canvas.

Q: Why there is an error 404 after installation while browsing Ocodewire Designer configuration in admin?

A: Whenever you get an error, flush the cache, log out from admin and log in again. Now, you can manage the configuration without 404 error.

Q: Can this extension be used for configurable products and bundled products, or is it the case that it can only be used for simple products?

A:Yes, you can use this extension for all type of products.

Q: Can I save my designed T-shirt sample for future reference?

A: Yes, you can save the product design and use or redesign it, in the future.

    Your Cart
    Your cart is emptyReturn to Shop