In this guide you'll build a t-shirt customizer where customers can pick colors for the body, sleeves and neckline, add their own text, upload a logo, and choose a size.
Everything here applies to any product. Once you've built this one, the same pattern works for a sofa, a bike or a suitcase.
Before you start, you'll need your product's image layers ready as transparent PNGs → Prepare your product images
Don't have your own yet? Download our t-shirt example files and build along with the guide.
The plan
It helps to write out what you're offering before you build it. For this t-shirt:
Questions | Answers |
Body Color | White, Taupe, Navy |
Sleeve Color | White, Taupe, Navy |
Neckline Color | White, Taupe, Navy |
Text | Up to 10 characters on the front (optional) |
Logo | A customer-uploaded image, centred (optional) |
Size | S, M, L, XL (+$5) |
Each row becomes a question in your customizer. Each option becomes an answer.
1. Create your product
Log in to your Kickflip admin and go to the Products page.
Create a new product by clicking on the + Product button.
2. Add your image layers
Start with the images, so you can see your product take shape as you go. You'll add one question per layer — four for our t-shirt.
Click the black + button at the top left.
Under Select input type, pick None. Under Select a display type, pick Image. Click Create.
Name the question "Body".
In the right panel under Image answers, click the untitled answer, hit browse, and upload
body.png.Name the answer "Body".
Repeat for the neckline, sleeves, and tag and hanger.
3. Add color options
Color questions attach to an image question rather than standing on their own.
Click the Body question, then + Color question in the right panel. A question called "Body colours" appears in the left panel.
Click the untitled answer, rename it, and pick a colour. You can use the picker or type a hex code, and adjust the lighting to make the finish shinier or more matte.
Click + Color answer to add more.
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.
4. Set your defaults
Defaults are what customers see the moment the customizer loads.
Open a question, hover over the answer you want, click the more icon and choose Set as default. A green marker appears on the answer card.
You can also build starting points — complete pre-made designs customers can begin from.
5. Add a size option
Not every question changes how the product looks. Size is a good example.
Click the + button. Under Select input type, pick Dropdown. Under Select a display type, pick None. Click Create.
Name it "Size".
Click + Value answer four times and add S, M, L and XL.
NOTE
Display type None means the choice has no visual effect on the preview — it still reaches your order data.
6. Add custom text
Click the + button. Input type Text input, display type Text. Click Create.
Name it "Your name".
Choose Text on straight path and centre it. Drag the path to position it, and click the dots to reshape it.
Under Font, upload your web font files (.ttf, .otf, .woff, .woff2). WOFF and WOFF2 cover modern browsers; add OTF and TTF for wider support. Font Squirrel converts fonts you already have.
Set the size and default colour.
Add a placeholder — the text shown before the customer types anything.
Set Text max length, and turn on Show character count so customers can see how much room they have.
Click the checkmark icon to finish editing.
7. Add a logo upload
Click the + button. Input type File upload, display type Logo. Click Create.
Position the logo on the product and resize the bounding box using the dots.
Click the checkmark icon when the placement looks right.
Next to Logo answer, click + and upload a placeholder image.
8. Name your customizer
Click the Settings icon on the top left and enter a Customizer title. This appears above the choice panel.
9. Style it to match your brand
Leave the product builder and open Theme Editor. On the top left of the screen, click the down arrow next to your theme name, then select Change theme.
Barebones shows every question on a single page — better for complex products with a lot of options.
Booklike steps customers through the choices as they scroll — better for products with fewer questions.
You can change theme at any time. Fonts, colors, padding, sizes and the position of the choice panel are all adjustable.
10. 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.
Your customizer is built. Next you'll set your prices, then connect it to your store so customers can buy it.
Next step : Set your product's price →