{"id":10626,"date":"2026-01-01T19:49:55","date_gmt":"2026-01-01T17:49:55","guid":{"rendered":"https:\/\/geeksco.co.za\/?post_type=product&#038;p=10626"},"modified":"2026-01-07T15:45:04","modified_gmt":"2026-01-07T13:45:04","slug":"t-shirt-designer","status":"publish","type":"product","link":"https:\/\/geeksco.co.za\/?product=t-shirt-designer","title":{"rendered":"Custom T-Shirt"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p>Order your own custom T-shirt. Attach your design, Add a name, and Pick the colour of the shirt.<br \/>\nThe Print area for your design is a4 size. If you want bigger or anything else custom, kindly add it on the &#8220;additional notes&#8221;<\/p>\n    <div id=\"tsd-container\">\r\n        <div class=\"canvas-wrapper\">\r\n            <canvas id=\"tshirt-canvas\" width=\"400\" height=\"500\"><\/canvas>\r\n        <\/div>\r\n\r\n        <div class=\"controls\">\r\n            <h3>Customize Your Shirt<\/h3>\r\n            \r\n            <!-- Size Selection -->\r\n            <div class=\"control-group\">\r\n                <label>Select Size<\/label>\r\n                <select id=\"tsd-visible-size\">\r\n                    <option value=\"S\">Small (S)<\/option>\r\n                    <option value=\"M\" selected>Medium (M)<\/option>\r\n                    <option value=\"L\">Large (L)<\/option>\r\n                    <option value=\"XL\">Extra Large (XL)<\/option>\r\n                    <option value=\"2XL\">Double XL (2XL)<\/option>\r\n                    <option value=\"3XL\">Triple XL (3XL)<\/option>\r\n                <\/select>\r\n            <\/div>\r\n\r\n            <!-- Color Swatches -->\r\n            <div class=\"control-group\">\r\n                <label>Shirt Color<\/label>\r\n                <div class=\"tsd-color-swatches\">\r\n                    <button type=\"button\" class=\"swatch active\" data-color=\"#ffffff\" style=\"background-color:#ffffff; border:1px solid #ddd;\" title=\"White\"><\/button>\r\n                    <button type=\"button\" class=\"swatch\" data-color=\"#000000\" style=\"background-color:#000000;\" title=\"Black\"><\/button>\r\n                    <button type=\"button\" class=\"swatch\" data-color=\"#2c3e50\" style=\"background-color:#2c3e50;\" title=\"Navy\"><\/button>\r\n                    <button type=\"button\" class=\"swatch\" data-color=\"#95a5a6\" style=\"background-color:#95a5a6;\" title=\"Heather Grey\"><\/button>\r\n                    <button type=\"button\" class=\"swatch\" data-color=\"#c0392b\" style=\"background-color:#c0392b;\" title=\"Red\"><\/button>\r\n                    <button type=\"button\" class=\"swatch\" data-color=\"#27ae60\" style=\"background-color:#27ae60;\" title=\"Green\"><\/button>\r\n                    <button type=\"button\" class=\"swatch\" data-color=\"#f1c40f\" style=\"background-color:#f1c40f;\" title=\"Yellow\"><\/button>\r\n                    \r\n                    <div class=\"swatch-custom-wrapper\">\r\n                        <input type=\"color\" id=\"shirt-custom-color\" value=\"#ffffff\" title=\"Custom Color\">\r\n                        <span class=\"custom-icon\">+<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <hr>\r\n\r\n            <!-- Text Controls -->\r\n            <div class=\"control-group\">\r\n                <label>Add Text<\/label>\r\n                <input type=\"text\" id=\"text-input\" placeholder=\"Type here...\">\r\n                \r\n                <div style=\"display:flex; gap:10px; margin-top:5px;\">\r\n                    <select id=\"font-family\">\r\n                        <option value=\"Helvetica\">Helvetica<\/option>\r\n                        <option value=\"Roboto\">Roboto<\/option>\r\n                        <option value=\"Oswald\">Oswald (Bold)<\/option>\r\n                        <option value=\"Pacifico\">Pacifico (Script)<\/option>\r\n                        <option value=\"Anton\">Anton (Heavy)<\/option>\r\n                        <option value=\"Lobster\">Lobster (Fancy)<\/option>\r\n                    <\/select>\r\n                    <input type=\"color\" id=\"text-color\" value=\"#333333\" title=\"Text Color\">\r\n                <\/div>\r\n                \r\n                <button type=\"button\" id=\"add-text\" style=\"margin-top:10px;\">+ Add Text<\/button>\r\n            <\/div>\r\n\r\n            <hr>\r\n\r\n            <!-- Image Controls -->\r\n            <div class=\"control-group\">\r\n                <label>Upload Graphics<\/label>\r\n                <button type=\"button\" id=\"btn-trigger-upload\" class=\"btn-upload\">Upload Image<\/button>\r\n                <p><small>Supports PNG, JPG (High Res)<\/small><\/p>\r\n            <\/div>\r\n            \r\n            <hr>\r\n\r\n            <!-- Positioning Tools -->\r\n            <div class=\"control-group\">\r\n                <label>Positioning Tools<\/label>\r\n                <div class=\"control-row\" style=\"display:flex; gap:10px;\">\r\n                    <button type=\"button\" id=\"btn-send-back\" title=\"Send Backward\">\u2193 Back<\/button>\r\n                    <button type=\"button\" id=\"btn-bring-front\" title=\"Bring Forward\">\u2191 Front<\/button>\r\n                    <button type=\"button\" id=\"btn-center-h\" title=\"Center Horizontally\">\u2194 Center<\/button>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <hr>\r\n            \r\n            <!-- Actions -->\r\n            <button type=\"button\" id=\"btn-remove-selected\" class=\"btn-danger\">Remove Selected<\/button>\r\n            \r\n            <hr>\r\n\r\n            <!-- Additional Notes -->\r\n            <div class=\"control-group\">\r\n                <label>Additional Notes<\/label>\r\n                <textarea id=\"tsd-visible-notes\" placeholder=\"Special instructions...\" rows=\"3\"><\/textarea>\r\n            <\/div>\r\n\r\n            <!-- Reset Button -->\r\n            <button type=\"button\" id=\"btn-reset-design\" class=\"btn-reset\" style=\"margin-top:10px;\">\u21bb Reset Design<\/button>\r\n        <\/div>\r\n\r\n        <!-- HIDDEN DATA INPUTS -->\r\n        <input type=\"hidden\" name=\"tsd_preview_data\" id=\"tsd_preview_data\">\r\n        <input type=\"hidden\" name=\"tsd_additional_notes\" id=\"tsd-hidden-notes\">\r\n        <input type=\"hidden\" name=\"tsd_size\" id=\"tsd-hidden-size\" value=\"M\">\r\n    <\/div>\r\n    \n","protected":false},"excerpt":{"rendered":"<p>Order your own custom T-shirt.<\/p>\n","protected":false},"featured_media":10627,"template":"","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":""},"product_brand":[],"product_cat":[18],"product_tag":[],"class_list":{"0":"post-10626","1":"product","2":"type-product","3":"status-publish","4":"has-post-thumbnail","6":"product_cat-uncategorized","8":"first","9":"instock","10":"shipping-taxable","11":"purchasable","12":"product-type-simple"},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/geeksco.co.za\/index.php?rest_route=\/wp\/v2\/product\/10626","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geeksco.co.za\/index.php?rest_route=\/wp\/v2\/product"}],"about":[{"href":"https:\/\/geeksco.co.za\/index.php?rest_route=\/wp\/v2\/types\/product"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/geeksco.co.za\/index.php?rest_route=\/wp\/v2\/media\/10627"}],"wp:attachment":[{"href":"https:\/\/geeksco.co.za\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10626"}],"wp:term":[{"taxonomy":"product_brand","embeddable":true,"href":"https:\/\/geeksco.co.za\/index.php?rest_route=%2Fwp%2Fv2%2Fproduct_brand&post=10626"},{"taxonomy":"product_cat","embeddable":true,"href":"https:\/\/geeksco.co.za\/index.php?rest_route=%2Fwp%2Fv2%2Fproduct_cat&post=10626"},{"taxonomy":"product_tag","embeddable":true,"href":"https:\/\/geeksco.co.za\/index.php?rest_route=%2Fwp%2Fv2%2Fproduct_tag&post=10626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}