How to build a single-product store on top of Shopify with AI

What this actually builds, and what it does not

Sleep and recovery products — mouth tape, weighted blankets, magnesium, sleep masks — share a commercial shape. One hero product, a claim that needs explaining, a sceptical buyer, and a decision made in under a minute. That shape rewards a focused page and punishes a general-purpose catalogue theme with eleven navigation items.

So the useful thing to build is not a shop. It is a front end: one page that argues for one product and then gets out of the way. And critically, it is a front end for a Shopify store you already have. NorthernGo does not process payments, calculate VAT, hold stock or ship anything. Shopify does all of that, and the app hands the buyer over at the right moment.

That division is the reason this is worth doing at all. You keep Shopify's payment handling, order administration and tax logic — the parts that are genuinely hard and genuinely regulated — and replace only the part Shopify themes are weakest at, which is a page built to sell one thing to one sceptical person.

Two honest constraints before you start. The Shopify integration is Pro only, at 299 SEK / $29 a month. And you need an existing Shopify store with a Storefront API access token; this is not a way to sell without one.

Step 1: Connect the store to the project

Save the project first. The integration is keyed to a project id, and an unsaved project has no id to key to — the API returns "you must save the project before you can fetch Shopify data" and nothing works.

Then open My projects, choose More on the project card, and pick Shopify. Two fields:

• The shop domain, in the form your-store.myshopify.com. Paste it without https://; the field strips the scheme anyway, but it is one less thing to wonder about.
• A Storefront Token. This is a Storefront API access token from your Shopify admin, not an Admin API key and not your account password.

Press Save Shopify. The domain then shows on the project card, which is the quickest confirmation that it stored.

Step 2: Ask the AI to build the page against the real API

Now describe the page in the prompt. Be specific about the product and the objection you are answering, because "a wellness store" produces a generic wellness store.

The one technical instruction worth spelling out is which calls to use:

Build a single-product landing page for mouth tape. Fetch the products with window.NorthernGoShopify.getProducts() and render the first one large, with the price from the product's own price field. Add a quantity selector and one button that calls window.NorthernGoShopify.checkout() with that variant. Below the fold: three benefit blocks, a short section addressing "is this safe to sleep with", and a FAQ.

The three agents handle the rest. The Architect plans the structure, the Builder writes it, and on Premium and Pro the Critic reviews the result before you see it. What comes out is a single HTML document using Tailwind from a CDN, with the SDK injected in a script tag at the bottom — no build step, nothing to compile.

Step 3: Understand the product shape you get back

getProducts() resolves to an array. The backend flattens Shopify's GraphQL response into something simple, and knowing the exact fields saves you guessing:

const products = await window.NorthernGoShopify.getProducts();
// [{
//   id, title, description, handle,
//   imageUrl,          // first image only, or null
//   price,             // string, e.g. "249.00"
//   currency,          // e.g. "SEK"
//   variantId          // needed for checkout
// }]

Three things about that shape matter more than they look.

It returns the first 20 products. Not the first 20 of a paged set you can walk through — 20 is what the query asks Shopify for, and there is no page parameter. For a single-product store that is irrelevant. For a 200-product catalogue it is a hard ceiling.

Each product carries one variant and one image. If your product has three sizes, you get one variantId back, and it is whichever variant Shopify returns first. A size or colour picker is not something you can build from this data — that is the single most important limitation on this page.

price is a string. Do arithmetic on it and you will concatenate. parseFloat(product.price) before multiplying by quantity.

Step 4: Send the cart to Shopify checkout

The checkout call takes an array of variant ids and quantities:

async function buy(product, quantity) {
  try {
    await window.NorthernGoShopify.checkout([
      { variantId: product.variantId, quantity: quantity }
    ]);
  } catch (err) {
    console.error(err);
    showMessage('Could not open the checkout. Please try again.');
  }
}

On success it does not return data — it redirects the browser to Shopify's hosted checkout. Everything after that click is Shopify's: card and wallet payment, VAT, shipping options, the order confirmation email, the order in your admin.

That is worth stating plainly because it removes a large amount of compliance work from your side. You are not storing card details, and you are not responsible for tax calculation. If you would rather sell without Shopify at all — a digital product, a subscription — that is a Stripe integration instead, and a different setup.

The call throws on failure, unlike the AI calls in the SDK, so try/catch around it is doing real work. The most common thrown error is an empty or invalid cart.

Step 5: Test it on the published app, not in the preview

This one costs people an afternoon. Shopify calls are deliberately blocked in the editor preview. Both getProducts() and checkout() return the message "Not available in the editor preview — save the project and open the app via its ?app= link."

That is not a bug and it is not your credentials. The preview has no project identity to look credentials up with, so the bridge refuses rather than failing obscurely. The same applies to email sending, webhooks and Stripe checkout.

To test the store, publish it and open the real URL. On Pro that is your own custom domain if you have bound one, otherwise a <subdomain>.northerngo.com address, otherwise the https://northerngo.com/?app=<projectId> fallback. For anything you are running ads to, bind a custom domain — a checkout flow that starts on someone else's domain converts worse, and the reason is not subtle.

What it costs

Pro is 299 SEK / $29 a month and includes 50 cloud generations, the Shopify integration, custom domains, webhooks and automated SEO audits. Shopify's own subscription and transaction fees are separate and unchanged — this replaces your theme, not your Shopify plan.

Generating locally on your own GPU is unlimited on every plan, which is genuinely useful while iterating on copy and layout: rebuilding the same page eleven times to get the hero right does not need to spend cloud generations.

Limitations

• Pro only. Shopify, custom domains and webhooks all sit behind the Pro plan. On Free and Premium the menu item is visible but locked.
• No product variants. One variant and one image per product. Sizes, colours and bundles cannot be selected in the app. If your product needs a size picker, this integration is the wrong shape for it.
• Twenty products, no pagination. Fine for one product or a small curated range. Not a catalogue front end.
• No inventory or stock display. The response carries no availability field, so the page cannot show "3 left" or hide a sold-out product. Shopify will reject the purchase at checkout, which is a worse place for the buyer to discover it.
• No cart persistence across devices. A cart held in JavaScript is gone on reload unless you store it yourself with window.NorthernGoDB.save(). Shopify's cart only exists once checkout has been created.
• No order history in the app. Orders live in Shopify. The app cannot read them back.
• Semantic HTML is not a ranking guarantee. The generated markup is clean single-document HTML, which helps crawlers and language models parse the page. It does not make the page rank. That comes from the product, the copy and the links pointing at it. Tools promising automatic search visibility from clean markup alone are overselling a real but small advantage.

Troubleshooting

"You must save the project before you can fetch Shopify data." The project has no id yet. Save it from the workspace, then reconnect Shopify.

"There are no valid Shopify keys for this project." The domain or token did not store, or one of them is empty. Reopen My projects → More → Shopify and re-enter both fields; the save requires both.

Products come back empty but there is no error. Almost always a token problem. Shopify answers with a 200 response and an errors array for an invalid token, which surfaces as a thrown error with Shopify's own message. Check that the token is a Storefront API token with product read access, and that the products are published to the sales channel that token belongs to. An unpublished product is invisible to the Storefront API even though it looks fine in your admin.

Nothing happens in the preview. Expected. Shopify calls are blocked there. Publish the app and test on its real URL.

Checkout opens with the wrong variant. You are sending the only variantId the API returned, which is the first variant of the product. There is no way to choose another from this data.

The price shows as "249.001" or similar. price is a string and you multiplied it by quantity through concatenation. Wrap it in parseFloat() first.