This is the complete step-by-step Shopify integration tutorial for adding the DTFGSA AI gang sheet builder to your storefront. Total install time: 10-15 minutes for most stores. No engineering work required — single-snippet copy-paste embed.
By the end of this tutorial, your Shopify storefront will accept 24/7 DTF gang sheet orders with AI auto-nesting, automatic white channel + adaptive choke, and RIP-ready production file generation — all running inline on a product page on your domain.
Go to builder.dtfgangsheetapp.com and create a free account. Once logged in, navigate to Settings → Embed Tokens → Create new token.
You'll get an embed token that looks like tok_live_abc123def456.... This token authenticates your Shopify storefront with DTFGSA. Save it — you'll need it in step 3.
The free tier supports unlimited builder usage. You only pay $0.15 per 22"×36" sheet on production export, or upgrade to a monthly subscription ($40-799/mo) for advanced features like adaptive choke per design (Growth tier+) and white-label (Pro tier+).
In your Shopify admin: Products → Add product. Fill in:
Save the product as a draft. Don't publish yet — we'll add the builder embed first.
The simplest method: paste the embed code directly into the product description's HTML view.
In the product editor, click the </> Show HTML button (or click Edit HTML). Paste this snippet, replacing YOUR_TOKEN_HERE with the embed token from step 1:
<div id="dtfgsa-builder-mount"></div>
<script async src="https://builder.dtfgangsheetapp.com/embed.js"
data-token="YOUR_TOKEN_HERE"
data-mount="dtfgsa-builder-mount"
data-shopify-product-id="{{ product.id }}"
data-currency="{{ shop.currency }}">
</script>Save the product. Switch the product status from "Draft" to "Active" and add it to your storefront's main collection.
Alternative method (theme.liquid edit): if you want the builder on a custom URL (like /pages/order-gang-sheet) instead of a product page, paste the same snippet into a custom Page (Shopify admin → Online Store → Pages → Add page) and use the "Show HTML" view.
Open your Shopify store in an incognito browser window and navigate to the new product page. You should see:
If any of these don't work, the most common issue is the embed token not being recognized. Double-check the token is correct and that the product is set to "Active".
When a customer completes checkout, you want the production-ready TIFF file delivered to your fulfillment system automatically. Two options:
Log into your DTFGSA dashboard → Orders. All builder orders appear here with the production-ready file ready to download. Easiest setup; works for any shop volume.
In Shopify admin: Settings → Notifications → Webhooks at the bottom. Add a webhook for "Order created" with the URL of your fulfillment system. The webhook payload includes a line_items[].properties field containing the DTFGSA file URL — your fulfillment system fetches it from there.
For ShipStation users, install the DTFGSA ShipStation app from the Shopify App Store; it routes files automatically.
From an incognito window:
If the file opens cleanly in your RIP without manual prep, your integration is working correctly.
| Issue | Cause | Fix |
|---|---|---|
| Embed shows blank | Token not recognized | Verify token in DTFGSA dashboard; regenerate if needed |
| Pricing shows $0 | Currency not set | Add data-currency="USD" to the script tag |
| Builder loads but customer can't add to cart | Shopify product not Active | Switch product status to "Active" in admin |
| White channel missing in exported file | Free tier doesn't include adaptive choke | Upgrade to Growth ($159/mo) or use default choke for now |
| RIP can't find spot channel | RIP misconfigured | In RIP, manually map "White" channel to white ink head; subsequent orders auto-detect |
| Embed clashes with theme CSS | Theme has aggressive global styles | Wrap embed in a CSS-isolated container or contact DTFGSA support |
Pro tier ($319/mo) and Enterprise tier ($799/mo) remove DTFGSA branding from the embed. Customers see your brand only. Configure in DTFGSA dashboard → Settings → Branding.
Enterprise tier gives you a custom subdomain like builder.yourshop.com. Customers never leave your domain. Setup is a single CNAME record + DTFGSA support ticket.
Set CSS variables in the embed snippet to match your Shopify theme:
<script async src="..."
data-token="..."
data-color-primary="#7c3aed"
data-color-bg="#ffffff"
data-color-text="#1a1a1a">
</script>For best conversion on Shopify, structure your gang sheet product page as:
If you previously used a contact form or quote-by-email workflow, replace those CTAs site-wide with links to the new gang sheet product page. The builder is your new primary commercial surface.
Free to use. No subscription required to start. Get your embed token in 60 seconds and have the builder live on Shopify within 15 minutes.
Get started →