Getting Started

Set up the Gang Sheet Builder end-to-end — from a Shopify product to live orders — in about 30 minutes.

How It Works

The Gang Sheet Builder is a self-hosted web app that sits outside Shopify but integrates tightly with your store:

Customer on your Shopify product page
  → Selects a sheet size (variant)
  → Clicks "Create Gang Sheet"
  → Builder opens in a new tab (your deployed URL)
  → Customer uploads images, arranges layout
  → Clicks "Save & Add to Cart"
  → File uploads to your backend
  → Customer is redirected to Shopify cart
  → Customer checks out
  → Shopify webhook fires → you receive email with download link
  → You download and print the gang sheet

There are two components you need to host:

Component	What it is	Hosting
Frontend	The React builder app customers use	Netlify, Vercel, or your own server
Backend	Node.js API for file storage, order tracking, and email	Railway, Render, or your own server

---

Step 1 — Deploy the Backend

The backend handles file uploads, download link generation, order management, and email notifications.

1a. Environment Variables

Copy .env.example to .env in gang-sheet-backend/ and fill in:

PORT=5000
BASE_URL=https://your-backend-url.com
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=your-email@gmail.com
EMAIL_PASS=your-gmail-app-password
OWNER_EMAIL=you@yourdomain.com

Gmail App Password

Go to Google Account → Security → 2-Step Verification → App passwords and generate a password for "Mail". Use that as EMAIL_PASS — not your regular Gmail password.

1b. Deploy to Railway (Recommended)

1. Push the gang-sheet-backend folder to a GitHub repository.
2. Go to railway.app and create a new project from that repo.
3. Add your environment variables under Variables.
4. Railway will auto-deploy. Note your deployment URL (e.g. https://gang-sheet-backend-production.up.railway.app).

1c. Verify the Backend

Visit https://your-backend-url.com/health — it should return {"status":"ok"}.

The admin dashboard is at https://your-backend-url.com/admin.

---

Step 2 — Deploy the Frontend

The frontend is the builder app customers interact with.

2a. Configure the Backend URL

In gang-sheet-frontend-shopify/, create a .env file:

VITE_API_URL=https://your-backend-url.com

2b. Build

cd gang-sheet-frontend-shopify
npm install
npm run build

2c. Deploy to Netlify

1. Go to netlify.com and sign in.
2. Click Add new site → Deploy manually.
3. Drag the dist/ folder onto the upload area.
4. Get your URL: https://your-site-name.netlify.app.

Alternatively, deploy to Vercel or upload the dist/ folder to any static hosting.

---

Step 3 — Create the Shopify Product

1. In Shopify admin, go to Products → Add product.
2. Set the title (e.g. Custom DTF Gang Sheet).
3. Under Variants, add one variant per sheet size you offer. Name the option Size:

Option Value	Price (example)	SKU
22" × 24"	$20.00	GS-22x24
22" × 36"	$30.00	GS-22x36
22" × 48"	$40.00	GS-22x48
22" × 60"	$50.00	GS-22x60
22" × 72"	$60.00	GS-22x72

4. Set Track inventory to No (it's made to order).
5. Click Save and note each variant's ID.

Variant IDs

You can find variant IDs in the URL when you click a variant in the admin, or via the Shopify Admin API. They're needed to wire up the builder button.

---

Step 4 — Add the "Create Gang Sheet" Button to Your Theme

Method A: Theme Editor (Recommended)

1. Go to Online Store → Themes → Customize.
2. Navigate to the Product page template.
3. Add a Custom Liquid block.
4. Paste the following, replacing YOUR_BUILDER_URL with your Netlify URL:

{% if product.handle == 'custom-dtf-gang-sheet' %}
<div style="margin: 20px 0;">
  <button
    onclick="openGangSheetBuilder()"
    style="background:#16a34a;color:white;padding:14px 28px;font-size:17px;font-weight:bold;border:none;border-radius:8px;cursor:pointer;width:100%;"
  >
    🎨 Create Your Gang Sheet
  </button>
</div>

<script>
function openGangSheetBuilder() {
  const variantId = document.querySelector('input[name="id"]')?.value;
  const selectedOption = document.querySelector('.product-form__input--variant option:checked');
  const size = selectedOption?.text.trim();
  if (!size) { alert('Please select a size first'); return; }
  const sizeFormatted = size.replace(/["'\s]/g, '').toLowerCase();
  const builderUrl = `YOUR_BUILDER_URL?variant=${variantId}&size=${sizeFormatted}&shop={{ shop.permanent_domain }}`;
  window.open(builderUrl, '_blank');
}
</script>
{% endif %}

5. Replace YOUR_BUILDER_URL with your deployed frontend URL.
6. Click Save.

Method B: Edit Theme Code (Advanced)

Edit sections/main-product.liquid directly and add the button code after the product form.

---

Step 5 — Configure Shopify Webhooks

Webhooks notify your backend when an order is placed so it can send you the download email.

1. Go to Shopify Admin → Settings → Notifications → Webhooks.
2. Click Create webhook.
3. Set:
   • Event: Order creation
   • Format: JSON
   • URL: https://your-backend-url.com/api/shopify/webhook/order-created
4. Click Save.

---

Step 6 — Test the Full Flow

1. Visit your product page.
2. Select a size variant.
3. Click Create Gang Sheet.
4. In the builder, upload a test image and arrange it.
5. Click Save & Add to Cart.
6. Go to cart — confirm the item is there with the gang sheet file URL in the line item properties.
7. Place a test order (Shopify test mode).
8. Check your email for the order notification and download link.
9. Click the download link and confirm the file is a high-resolution PNG.

Builder outside Shopify

If you open the builder URL directly (not from the product page), "Save & Add to Cart" will upload the file but the cart redirect will fail — this is expected. Always test from the product page.