Jupiter Planet — a site with a t-shirt configurator and an inquiry instead of a basket

Jupiter Planet is a workshop in Kragujevac that produces, prints and knits men's clothing - t-shirts, polo shirts, sweatshirts with with and without a hood, tracksuits, shorts and caps. It is made both wholesale and retail, from its own workshop in Liparska 16, and it is sent all over Serbia.

Jobs are repeated in several forms: advertising t-shirts and sweatshirts with the company logo, graduation t-shirts with names and year, jerseys and tracksuits with club numbers and crest, t-shirts and sports skirts for KUDs and folklore societies, and larger series for wholesale. Threshold is a print of ten pieces per design.

Three techniques cover it all: DTF printing in full color for photos and color motifs, machine embroidery for logos and crests, and thermal transfer for names and numbers that vary from piece to piece. The equipment is their own — an industrial embroidery machine with ten heads, a machine for DTF duplicating and an automatic thermo-press with two heads.

The whole business went to the site via Instagram. The account still carries a gallery of work and is still the main source of messages, but the message in the inbox is not a place to explain the difference between links and DTF, nor is it there to see how someone's logo will fit on the back of a sweatshirt.

The first site, still on a subdomain, was practically a copy of another t-shirt store — same structure, same red identity, same product catalog. For a custom manufacturer, it was wrong on two levels: visually it was indistinguishable from anyone else, and functionally it offered a basket where there was none.

That's why the site was created from scratch, not refined. The task came down to four things:

• Self-identity — gold on deep black, after the logo from Instagram, with a planet and a ring in the header. Nothing from the old site has been taken over.
• Configurator on both sides — the customer chooses the item and color, adds text and his logo separately on the front and back, and sees the result before sending an inquiry.
• Inquiry instead of basket — the price depends on the quantity, material and technique, so it cannot be printed as a number next to the product.
• Techniques Explained — DTF, embroidery and thermal transfer are three different things with three different uses and three different prices, and the buyer needs to read that somewhere.

The fifth thing was obvious: everything has to work on the phone, because almost all incoming traffic comes from Instagram. Dragging a design on a shirt with your finger is a different problem than dragging it with a mouse and is treated as such.

This was the first real decision on the project and it is worth explaining, because it goes against what is usually done.

With print-to-order, price is not a feature of the product but a feature of the job. Ten t-shirts with plain text and a hundred sweatshirts with three-way embroidery do not have nearly the same price per piece. A basket with a fixed price would either lie there, or it would have to carry a price list with ten conditions that no one reads to the end.

That's why the entire site leads to one action — send an inquiry. There are two ways to reach it. Who wants to see how the design fits him, goes through the configurator and sends a request with finished pictures of the front and back. Those who already know what they want, go for the classic form, describe the job and attach the logo. Both paths end in the same chest and the same panel.

The practical consequence is simple: the owner responds with an offer, not a correction of the wrongly charged order. The customer gets a figure that applies to his business, not an average.

The site has nine public pages and none redundant. The homepage leads in two directions just below the header — Design Now for those who want to try and Request a quote for those who want to ask. Below that is the configurator itself, then six types of work, then techniques, then four steps from idea to t-shirt, then questions and answers.

Services and printing explain what is being done: advertising t-shirts and sweatshirts for companies, graduation shirts, equipment for sports clubs, wholesale, logo printing and embroidery, and work for KUD and school generations. Each unit has its three specific items, not a list of adjectives.

Techniques and machines are the site that works the most both for the search and for the buyer who does not know what he is looking for. It says what DTF is, when embroidery makes sense and when thermal transfer, and what embroidery with ten heads actually means.

The rest is short: About us, Contact with a form and information about the store, Request an offer, terms of use and privacy policy. The gallery is not built on the site — the Gallery button goes straight to Instagram, because the works are posted there anyway and are always fresh there. A site that keeps a gallery from a year ago is worse than a site that doesn't.

The central part of the site is the the t-shirt configurator, and the same tool is on the homepage, right below the header.

The order is deliberately short: first the object, then the color, then the design. There are seven items — a t-shirt, a polo, a hooded sweatshirt, a hooded sweatshirt, tracksuit bottoms, shorts, and a hat. The color is chosen from a palette, and the front and back are two cards, each with its own design layer.

The tools are reduced to what the customer actually uses: adding text with a choice of font, color and outline, uploading a logo or image, moving and scaling, undoing and undoing page-specific strokes, duplicating and centering. The text automatically fits to the surface so that it does not go out of the piece. The outline of the text is not a decoration but a solution — the same inscription must be seen on both the white and black t-shirts.

For the most common jobs, there are quick templates: graduates, name and jersey number, company inscription and slogan. The click fills the canvas, and the buyer just changes the words.

The touch is specially designed. The delete control is on the object itself, because there is no Delete key on the phone. Guide lines appear when the design approaches the vertical axis of the piece, so centering is not guessed blindly. The canvas scales with the width of the screen, which sounds trivial until you see that the library for working with the canvas writes a fixed 600 by 720 pixels to the element itself and thus throws the content off the screen on the phone.

One thing distinguishes this configurator from most domestic ones: the design is not locked into a rectangle on the chest. The print is made on the entire surface of the garment, including the sleeve, and the tool must show that.

The solution is to cut according to the silhouette itself. The base of each object is a white photo with a transparent background, and the design is cropped to its alpha channel — anything that goes outside the garment simply disappears, instead of stopping at the edge of the fictional frame. The text on the sleeve is visible, content outside the garment silhouette is clipped.

The garment color is not redrawn for each shade. A multiplication filter goes over the white background, so shadows and creases from the photo remain visible in every color. One image per garment gives the whole palette, and white is the only case without a filter.

Garment options are not hard-coded. The configurator looks to see if there is an image for the front and back in the folder, and the button only appears if the image is there. When the new mockup arrived, the item appeared on the site without a single code change — which is important, as the product range has expanded several times.

The gold dotted box shows the print area while the canvas is empty and disappears as soon as the first element is added. It is not a limit but an explanation: the inscription above it says to print anywhere, and the box shows where to start.

The Request quote with design button does more than it looks. Both sides of the canvas are rendered into images, accompanied by a choice of sizes and quantities per size, a choice between prints and embroidery, and contact information. It all goes to the server in one message.

On the server, the inquiry receives a reference number, is entered into the database and immediately arrives in the owner’s inbox — on both sides of the attached design. This is important because of the speed of response: the owner can respond with an offer on a phone, without opening the panel.

Inquiries and messages from the contact form end up in a common panel, the same one used by Shadow Style Shop, because the owner is the same person. Inquiries from Jupiter carry a gold tag and their own reference tag, and the reply to such an inquiry is signed with the name Jupiter Planet, not the name of the store. One panel, two brands, no mixing.

The form accepts email or phone, not necessarily both. Part of the customers leave only the number and that is a completely legitimate way to get in touch; a form that rejects it is a form that loses the lead. The check is done on the server, not only in the browser.

One fault from this chain is worth noting. The message is sent by its own SMTP client, and in the message body the customer can type a line containing only a period. According to the SMTP standard, such a line means the end of the message — everything after it the server tries to read as commands. A query with a period on a separate line would thus arrive truncated. The fix is SMTP dot-stuffing: a leading period is doubled on each affected line, as required by the standard, and from then on the message arrives in its entirety regardless of what the customer typed.

The site is written in PHP 8.3, without WordPress and without any plugins. There are no build steps — no packages that expire in half a year, and no steps that fail one day. The data is in the SQLite database: queries, messages and settings.

The fabric library (Fabric.js) is hosted on the server itself, not on someone else's CDN. A configurator that depends on a foreign address is a configurator that doesn't open one morning due to something beyond our control.

Addresses are clean — /configurator, /services, /techniques — through server rules, and old .php addresses are permanently redirected to clean, with infinite loop protection.

The site started on a subdomain, and when the client leased jupiterplanet.rs, it moved to its own domain. The old subdomain still redirects to the new one and preserves the path, so no old links fall to the header. The DNS zone resides on our pair of name servers. Since no mail is sent from this domain, the zone is closed to third-party use: SPF to deny all, DMARC to deny, and an empty MX record. That's five minutes of work that prevents someone from sending fake offers on behalf of the company.

Sensitive points are treated as sensitive. A form attachment gets its extension from the actual content type, not from the file name submitted by the visitor. The image of the design is verified to be a real image before sending. Login to the panel is locked by IP address that survives the new session, so guessing the password from a clean browser has no effect. The database and data folder are not externally accessible, and no code is executed from the uploads folder.

The hardest part is the pictures of the items. The first version of the T-shirt pad was 1.36 MB — on a mobile connection, that was the entire first impression. By translating it to WebP it dropped to about 85 KB, with the same appearance in the configurator.

The second cost is the canvas library itself. On the homepage, it is not loaded immediately, but only when the configurator approaches the screen — until then, the page carries only what it needs. On the Configurator page, it loads immediately, because the visitor is there precisely because of it.

Then there was a failure that learned something valuable. The site once displayed as a blank background with one giant button. The cause was not code, but a combination of circumstances: a short interruption on the server, the browser caught an empty style file, and the file is served with a long cache — so the empty page was remembered. Additionally, all content was hidden until the script revealed it on scrolling, meaning that the script crash left a white page.

There are three solutions and they are all simple. Critical styles for the header, hero and buttons are written directly into the page, so something always looks like the site. Content hiding is only enabled if the script is actually live. And there's a 2.6 second timer that displays everything no matter what. Since then, such a blank page has not been possible.

The animations are written by hand and all go in one frame — the scrolling gold line, the concept bar that slides seamlessly, the comet in the star field, and the gradual reveal of the sections. Whoever turned off animations in the system does not get any. On narrower screens, some of the effects turn off by themselves, because the mobile screen has no room for decorations next to the content.

The site contains structured data for the store itself (type ClothingStore), for the site, for questions and answers, for the list of services and for breadcrumb path through the site. The address, coordinates, working hours and phone number are in that data, because that's what Google shows when someone searches for T-shirt printing in Kragujevac.

Questions and answers come from a single source — the same list is printed on the page and written to structured data. When visible content and data for the browser are written separately, they differ after the first change.

In a later pass, a few things that are not visible to the naked eye were fixed: the Contact page was reporting another company without an identifier, so it looked like two different companies on the same domain to Google; a 404 page emitted a path through a site that did not exist and was open to crawling; titles and descriptions are reduced to a length that does not cut off in search results. The sitemap takes the last modified date from the file itself, so it doesn't lie.

Measurement is set so that consent goes first: until the visitor clicks I accept, analytics is turned off. There was an easy-to-miss bug caught along the way — the server's security rule didn't allow an image from the measurement domain, so the measurement didn't work even after consent. It has been fixed in the configuration and verified on the live site.

The terms of use and privacy policy are written for this business — inquiries and offers, copyright of designs submitted by the customer, deadlines, shipping and complaints — not copied from someone else's site.

A site the client owns. No monthly platform subscription, no commission, no plugins to update. The code and database are on the server and can be copied and moved.

Practically, the day looks like this: the customer assembles the design himself, the inquiry arrives by e-mail with a picture of the front and back and a reference number, and the answer is written from the panel or from the e-mail program — it doesn't matter. If you don't want to draw, fill out the form on the page Kontakt or call the number that is on the phone as a button at the bottom of the screen, together with Viber.

After this project, the configurator was also transferred to Shadow Style Shop, the store of the same owner, and there it was connected to the basket and orders instead of the inquiry. The tool built for Jupiter Planet is running on two sites with two different business models today — the best proof that it's built as a tool, not as a decoration for one side.

The site is still under active maintenance. What changes, changes on the live site, with a backup copy before each change.