SpreeCommerce Product Customization

As an e-commerce business, you can do better than your competition by allowing your customers to customize the product they want to order.

Of course, not all products can be customized but if you deal in a product which renders itself well to customization – by allowing the customer to do so, you are engaging the customer at a deeper creative level. So, now the transaction does not remain merely a financial transaction for her, but the customer is invested at an emotional level with the product since she has designed it herself.

Some examples of businesses that really do this well are: –

Shoes of Prey
Shoes of Prey allow customers to design their own shoes. They do a really good job of making it very easy for customers to design and then order their shoes.

1 Atelier allows their customers to design their own hand bags. You can choose a bag type from among all the options available – whether a tote or a clutch or something else. Then you choose the hardware, piping, leather finish for the various parts and you are ready to checkout.

Since we do most of our e-commerce development on SpreeCommerce, we set out to build something that could be available off the shelf.

To know more, read on or watch a video.

We experimented with T-shirts and have made quite a bit of progress and that is what is presented here.

You can play with the SpreeCommerce demo at http://3d.domain4now.com/

You can signup as a new customer to get access to the functionality on the demo site.

To know more about how the extension works, read on or watch a video.

Customize Your T-Shirt:

Follow these steps to customize a new T-shirt:

1. Login with valid credentials.

2. From home page, select the T-Shirt type which you want to customize. Currently, the Round-neck and the V-neck are the two types available but more will be added in the future. See below:


3. Click on “Design your own” button. This will take you to the page where you can customize your new T-shirt.

4. Choose T-shirt color from the “Select Color” section. There’s a “more colors” button for those of you who aren’t satisfied with the bunch of colors available beforehand.


5. Add Image to your T-Shirt:

5.1 You can choose an image to place on T-shirt safe zone (front and back side, left and right sleeve). Safe zone is an area set out by dotted lines within which only the added image stays. To add an image, go to the “Select Art” section, select the collection from the dropdown and choose an image by clicking on its icon.


5.2 You can also upload image(s) from your own device by clicking on “Choose your image”.


5.3 You can change the position of the image that is displayed on the T-shirt by dragging it around in the safe zone. You can also resize, recolor or rotate the same.


6. Add Text/Quotation:

6.1 Under the “Add Text” section, you can put your text in the input field and click “Add Text” button to superimpose the text on the T-shirt.


6.2 Text formatting and orientation: You can specify the text color, font family and font style from a bunch of different options.


You can also preview your customization by clicking “Preview”.


Here’s how a part of a preview looks: –


7. At any point of time, if you wish to undo or redo your previous move or delete your customization entirely, you can do so with the help of the icons available to the upper right-hand corner of your customization, besides “Add to your collection” button.

8. Add to Collection: You can add a suitable title to the T-shirt and click “Add to your collection” button to create and save your T-shirt customization.


9. My Collections: You can visit all your saved T-shirt designs in the “My Collections” section. You can review your work and carry on from here. You can also design a new T-Shirt right from here.


We are constantly working on enhancing the functionality of this extension and are also exploring more categories where customization can be applied.

Follow us on twitter to know more when we extend this experiment further.