At Kickflip, we've built a super easy-to-use, yet very powerful platform to let you create a product customizer and integrate it with Shopify, WooCommerce, Prestashop or any online store.
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 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 :
Questions | Answers |
Body Color | White, Taupe, Navy |
Sleeve Color | White, Taupe, Navy |
Neckline Color | White, Taupe, Navy |
Text | Add 10 characters text on top of the t-shirt (optional) |
Logo | Upload a centered logo or image on t-shirt (optional) |
Size | 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 :
the body,
the sleeves,
the neckline
and the tag & hanger.
Cutting out the different customizable areas
NOTE
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 our partners page. 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.
TIP
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
Adding a dropdown question
Questions are what you want to ask your customers and answers are the possible answers your customers will select.
Click on the black + button in the top left part of the screen to create your first question.
Under Select input type, pick Dropdown. Then, under Select a display type, pick None, then hit Create.
Picking None, means the question will not have any visual effect on the product preview.In the right panel, under Title, name your question : "Size".
Create 4 answers (S, M, L, XL) by clicking on + Value answer
Adding Image
Click on the black + button. Under Select input type, pick None. Under Select a display type, pick Image, then hit Create. As you can see, the element is added Behind the scene because we picked None as the Input type. The question panel will not display this element. Later on, we will apply colors on that image and it is these color answers which will be displayed in the question panel.
Let's name this question : "Body".
In the right side menu, under Image answers, click on Untitled answer, then 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.
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 Import to select the colors you previously created. When you do that, your imported colors are linked. Editing one will update the other linked colors.
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 left side of the screen click on the Settings icon, then, under Customizer title, 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 the black + button. Under Select input type, pick Text input. Under Select a display type, pick Text, then hit Create.
Name the text question: "Your name".
There are many text settings but for this example, let's simply select Text on straight path 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.
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 edit the default color and set it to clear blue.
Make sure to hit the Checkmark icon once you are satisfied with your text look and feel.
Let's set a placeholder for our text. Let's type in "Your Name", under Placeholder in the right side panel. This will be displayed on the t-shirt and within the text input in the choice panel.
You can also 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 the black + button. Under Select input type, pick File upload. Under Select a display type, pick Logo, then hit Create.
Place the logo where you want it to appear on the t-shirt and resize the bounding box by clicking on the dots.
Hit the checkmark icon to stop editing once the placement looks right.
Click on the +button, next to Logo Answer 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 two fully customizable theme on Kickflip, 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 the screen.
Next steps!
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 help@gokickflip.com. We are always happy to help!