The T-Shirt Single demo prices a printed shirt the way a print shop quotes one: the blank shirt, plus a charge for every place that gets a print. Its design editor has a side for each face of the shirt, and the left and right sides each hold two print areas. It runs on Appify Custom Product Options.
A shirt printed on the front, the back, the left shoulder and the left side totals 99.49 with prices in dollars. This article shows how the calculator gets there, and how the editor lets the customer design every print area before they buy.
What does the T-Shirt Single calculator do?
The customer picks a shirt color and a size, then picks where the prints go: the front, the back, either shoulder or either side. The Design Shirt button opens the design editor.
Front and Back start selected, and at least one location has to stay selected. The price is the shirt's own price plus a charge for each location picked.
Why is a printed shirt hard to sell online, and how is it handled?
- The print sits on top of the shirt's own price. The base is the selected variant's Shopify price, so the shirt price is never retyped in the calculator. The print charges are added on top.
- One shirt can carry several prints. The location buttons accept more than one choice, and each choice carries its own price.
- A shirt has more than one face. The editor has four sides: Front, Back, Left and Right. The customer designs each one.
- Some faces have more than one print area. The left side holds a shoulder print and a side print, each in its own area. The right side is set up the same way.
- Customers want to see the real shirt. Each side shows a photo of the shirt from that angle behind the design. The photo is a preview and never prints.
- Bulk orders need a discount ladder. Nine breaks run from 5 shirts to 5000, each a percentage off the cart line.
How is one price worked out?
Take one Gold shirt printed on the front, the back, the left shoulder and the left side.
| Step | Working | Result |
|---|---|---|
| Shirt | The variant's Shopify price | 18.99 |
| Front | Price on the choice | 25.00 |
| Back | Price on the choice | 25.00 |
| Left Shoulder | Price on the choice | 12.50 |
| Left Side | Price on the choice | 18.00 |
| Total | The shirt plus the four locations | 99.49 |
The price summary under the calculator shows the shirt, the locations and the total.
Leave the default of Front and Back and the same shirt totals 68.99.
How does the editor handle the front, the back and the sleeves?
Design Shirt opens the Product Designer on the Front side. The dashed box is the front print area, called an artboard. Here a logo has been uploaded onto it. This shot has the default Front and Back picked, so the total reads 68.99.
The customer can move the image, set its width and height in inches, or rotate it. The left bar holds the other tools: text, clipart, image upload, shapes, frames, drawing and layers. The live total sits at the bottom of the right panel.
The tabs at the bottom switch sides. On the Left side, a second row of tabs switches between that side's two print areas.
Sides and print areas
A side is one face of the product. An artboard is one print area on that side. The demo has four sides, and two of them hold two artboards.
| Side | Print areas on it | Matching location choices |
|---|---|---|
| Front | Front | Front |
| Back | Back | Back |
| Left | Shoulder and Side | Left Shoulder and Left Side |
| Right | Shoulder and Side | Right Shoulder and Right Side |
You build these in the Calculator Editor, under Side settings on the designer canvas. Add side adds another face, such as a sleeve. Under Artboards, Add artboard adds another print area on that side, such as a pocket next to a full front.
Each side has a When customers see this side setting. It can be always, or only for some choices. That way a sleeve can appear only when the customer picks a sleeve print.
Each artboard sets its own size, either a fixed width and height or a size taken from a calculator option. One print area can also be locked to another, so it follows that artboard's size, cut and position. In the demo, the right side's print areas are locked to the left side's.
The shirt photo sets the scale
Each side shows its own picture of the shirt, set as a Product photo, like a shirt scene. The photo stays whole behind the artboards, does not stretch, and is not printed.
To set the scale, you draw a line across a distance you know on the photo and enter its length. The artboards are drawn to that scale. So a shoulder print stays a small part of the shirt.
Each side keeps its own design
The customer can design the front, flip to the back, then add a shoulder print, and each side keeps its own design until they save. The back's design files are listed under the Back label, so the back print never gets mixed up with the front.
Checks that save reprints
- A low-resolution warning. If an uploaded image does not have enough pixels for the size it is placed at, the editor warns the customer before they save.
- Remove Background. When a customer selects one image, an AI button can cut out the subject. It is switched on in the editor settings.
- A design review. Review Design opens a full-screen check, and the customer ticks that they approve the design before it is saved.
How much the customer can change is set by the editor profile. This demo uses full editing. How to control what customers can edit in the Product Designer covers the other profiles, and how to add your own clipart and fonts covers your own assets.
What are the pricing decisions behind it?
The shirt's price is the starting point
The total price formula is the shirt's Shopify price plus the Design Locations option. Change a variant's price in Shopify and the calculator follows.
Locations add up
Design Locations is a set of buttons that allows more than one selection, with a minimum of one. Each choice carries its own price.
| Location | Charge |
|---|---|
| Front | 25.00 |
| Back | 25.00 |
| Left Shoulder | 12.50 |
| Right Shoulder | 12.50 |
| Left Side | 18.00 |
| Right Side | 18.00 |
One discount ladder for the whole line
The quantity discount rules use the simple mode and apply per cart line. Each break is a percentage off. In a team order across sizes and colors, the whole size grid counts toward one break.
| From this many shirts | Discount |
|---|---|
| 5 | 2% off |
| 10 | 5% off |
| 25 | 10% off |
| 50 | 15% off |
| 100 | 20% off |
| 250 | 25% off |
| 500 | 35% off |
| 1000 | 45% off |
| 5000 | 50% off |
What arrives with the order?
The cart line carries the color, the size and the print locations the customer chose, along with their saved design.
The same line appears in the Orders tab with its options and design.
A customer who wants to add a shoulder print taps Edit options in the cart. Their choices reopen filled in, and the price follows. The guide to editing in the cart has the setup.
How can you make it yours?
- Add a pocket print. Add a second artboard on the Front side and a matching location button, so a chest pocket logo has its own area and its own price.
- Add a setup fee per location. Charge once per print area on top of the location price, as in custom apparel pricing on Shopify.
- Change the ladder. Tighten the breaks or move to amount-off tiers. Tiered and volume pricing for custom products covers the options.
How do you get this calculator?
Describe the pricing to Chat with AI and check what it builds. A starting prompt:
Build a t-shirt calculator. The price is the shirt's own Shopify price plus a charge for each print location the customer picks. Design Locations are buttons where the customer can pick several, at least one, with Front and Back selected by default: Front 25, Back 25, Left Shoulder 12.50, Right Shoulder 12.50, Left Side 18, Right Side 18. Add percent-off quantity discounts per cart line: 2% at 5 shirts, 5% at 10, 10% at 25, 15% at 50, 20% at 100, 25% at 250, 35% at 500, 45% at 1000 and 50% at 5000. Add a Design Shirt button that opens the Product Designer.
The sides, the artboards and the shirt photos are set up in the Calculator Editor after that, on the designer step. For people who want to design from scratch, how to let customers design their own products walks through the editor, and how to let customers upload artwork covers ready-made files.
FAQ
How is the T-Shirt Single price calculated?
The shirt's own variant price plus the charge for each print location the customer picks. Quantity breaks take a percentage off the cart line.
Can customers design the back and the sleeves too?
Yes. The editor has four sides, Front, Back, Left and Right, and the customer switches between them with the tabs at the bottom. Each side keeps its own design.
Can one side have more than one print area?
Yes. In the demo, the Left and Right sides each hold a Shoulder and a Side artboard. You can add more, such as a pocket next to a full front.
Can a side appear only when the customer pays for that location?
Yes. Each side has a When customers see this side setting. Set it to show only for some choices, and map it to the location buttons.
Does the shirt photo get printed?
No. The product photo is there for preview and scale only. It stays out of the print files.
Every print location on the shirt, priced on its own.
Whatever you sell, however you price it · The last options app you'll shop for