Let's start building a t-shirt customizer that will look like this:
Defining your custom program
It's a good idea to start by defining to your custom program. Basically, you have to decide what you are going to let your customers customize on your product. For example, that's our custom program for our t-shirt customizer :
White, Taupe, Navy
White, Taupe, Navy
White, Taupe, Navy
Add 10 characters text on top of the t-shirt (optional)
Upload a centered logo or image on t-shirt (optional)
S, M, L, XL (+5$)
Step 2 : Preparing your product's images
To create the visualization of your product, you will need high-resolution images. For this tutorial, we'll start from that t-shirt image :
From that image, we will create 4 images, including different parts of the t-shirt :
and the tag & hanger.
Cutting out the different customizable areas
You will need Adobe Photoshop or a photo editing software like Gimp or Photopea to generate your images. If you are not familiar with Photoshop, don’t hesitate to reach out if you’d like us to recommend one of our trusted partners. Or you can take a look at the Kickflip Experts page and search for Artwork experts. Additionally, many graphic artists on Fiverr or Upwork can do this kind of photo editing work for you.
To generate those images, we basically need to cut out the different customizable areas using the pen tool in Photoshop.
Start by launching Adobe Photoshop and opening your t-shirt image. You'll see that in this case the background is already transparent. If your background is not transparent you will need to remove it. Here's a quick youtube video tutorial explaining how.
2. Select the Pen tool and create a path around the different customizable areas. Let's start with the sleeves for example :
3. You now need to make a selection with your path and create a clipping mask to separate the sleeves from the rest of t-shirt.
4. If you want to apply colors dynamically on your product image later on, you will need to desaturate your image to make it look white. Let's do that with the sleeves.
Please note that we could have done that on the whole t-shirt image (except the for tag and hanger), before step 2.
5. Repeat that process for each part of your image and your Photoshop file should look like this :
6. Save all of your separate layers as transparent PNG-24 files. Make sure all of your images have the same size so that they’re positioned properly in relation to each other.
We recommend a size of 1200x1200 px to make sure your customizer loads fast. To speed up your customizer even more, we highly recommend compressing your png files using TinyPNG.
Great! Our images are now ready. Time to create our t-shirt customizer in the Kickflip dashboard.
Creating your customizer
Creating a product
Log in to your Kickflip dashboard at yourbrand.gokickflip.com/admin and go to the Products page.
Create a new product by clicking on the + PRODUCT Button
Enter your product name and hit the BUILD button.
Adding a value question
Click on + Add new question to create your first question and Select Value in the submenu.
Questions are what you want to ask your customers and answers are the possible answers your customers will select.
Value Questions do not have a visual effect on the product preview.
Name your question : "Size".
Create 4 answers (S, M, L, XL) by clicking on + Value answer
Adding Image questions
Let's add image questions, questions that will impact the visual of our product by interacting with your images.
Click on + Add new question and Select Image in the submenu.
Let's name this question : "Body".
Hit the browse button and upload the body.png image we previously created.
Name this image answer "Body".
Repeat this process for Neckline, Sleeves and Tag & hanger.
If you look at your questions list on the left of the screen, you should now have 5 questions : Size, Body, Neckline, Sleeves and Tag & hanger.
We want the Size question to be the last one. Drag and drop it down the list to move it down.
Tag & hanger is an image question that will not have any answer. We don't want it to appear in the customizer choice panel (the left area in the customizer below). To remove it from the customizer, you simply can drag and drop it Behind the scene.
Let's also move the Body, Neckline and Sleeves questions to Behind the scene.
With image questions, you can apply colors dynamically on an image, or add multiple image answers and have the customizer display one image or the other.
For the Body, Neckline and Sleeves questions, we want to use dynamic coloring which is why we are moving these image questions behind the scene.
Creating a color question linked to an image question
Click on the Body question. In the right side menu, click on + Color question.
Notice that a question called "Body colors" has been created in the left side panel.
In the right side panel, Click on Untitled answer. Rename it "Red" and pick a red color that you like using the color picker.
Click on + Color answer, than Create and add a couple more colors. You can also type in a Hex code and play with the lighting to make your colors look shinier or mat.
Repeat this process for the Neckline and Sleeves questions but instead of creating new colors, you can click on + Color answer, than Import, than select the colors you previously created. When you do that, your imported colors are linked and when you edit one, the other will be updated.
Setting default answers
To decide what are the default answers your customers will see when they start customizing your product, open a question, for example Body colors and hover over an answer, for example Blue. Click on the more icon, and click on Set as default. The default answer now has a green marker on the right side of the card.
You can also create starting points to let your clients start customizing your product from a design they like.
Naming your product
On the right side of the screen click on Customizer title and type "T-Shirt Customizer".
Previewing your customizer
Our t-shirt customizer is starting to look good!
You can preview the mobile version by clicking on the mobile phone icon on top of the screen :
Adding a text question
Let's now add text on our t-shirt.
Click on + Add new question and select Text in the submenu.
Name the text question: "Your name".
There are many text settings but for this example, let's simply select Path, Straight, and align the text in the center.
You can move your path by drag and dropping it where you want and edit the path by clicking on the dots and moving them around.
Make sure to hit the STOP EDITING button once you are satisfied with your text position.
Under Font, you can upload any web font files (.ttf, .otf, .woff, .woff2). If you are mostly targeting users with modern browsers, you can only use WOFF and WOFF2 formats. If you want to expand support as wide as possible, upload OTF and TTF files as well. You can use a web font generator such as Font Squirrel to generate different web font files from the font you have.
Under Size, you can edit the font size, let's set it to 60.
Let's set a placeholder for our text. Let's type in "Your Name". This will be displayed on the t-shirt and within the text input in the choice panel.
Let's edit the default color and set it to clear blue.
You can set the maximum character limit with the Text max length setting. We also recommend activating the setting Show character count for a better user experience :
The text tool has many other settings you can explore. For example you could add your text to a print area to generate print-ready files. Or, you could prevent your customers from writing bad words on your product, or even display a text on multiple locations on your product.
Adding a logo
Let's now add a logo on that t-Shirt.
Click on + Add new question and select Logo in the submenu.
Place the logo where you want it to appear on the t-shirt and resize the bounding box by clicking on the purple dots.
Hit the STOP EDITING button once the placement looks right.
Click on + Logo Answer > Create to upload your logo placeholder image. In our case, it's logo.png.
As you can see, a logo upload question has been added to the choice panel.
There are many more things you can do with the logo question, like allowing your customers to move, resize and rotate their logo for example. Make sure the checkout the complete logo documentation to learn all about that.
Publishing your customizer
Once you are satisfied with your customizer. Make sure to hit the PUBLISH button located on the top right corner of the product builder.
If your product is already live on your online store, hitting Publish will make your changes visible on your online store.
If you haven't already added your product on your online store, hitting Publish will essentially save your draft, but it will not add your product on your online store.
Editing your customizer theme to make it fit with your branding
You probably want to edit the look and feel of your customizer to make it fit with your brand image. Let's do it!
Exit the product builder and and go to the Theme Editor section.
Click on Change Theme. There are currently 2 fully customizable theme on MyCustomizer, simply Select the one you prefer! You can always change later on.
Barebones : This theme is great for products with few questions. The user can easily customize the product by scrolling through the choices.
Booklike : This theme is perfect for complex product. All the questions are shown in a single page so the user can easily see all the options and edit his choices.
3. Let's not go into details but pretty much everything in these themes can be modified : fonts, colors, padding, sizes, etc. You can even move the Question panel on the left of right side of your screen.
Take a look at this doc to learn how to set up your product's base price and upcharges.
Make sure to check out our guide explaining how to connect your customizer with your online store.
Start making some sales!
Hope you have enjoyed this guide! If you have any further question, please contact us over chat or at firstname.lastname@example.org. We are always happy to help!