iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
You can build a custom ecommerce storefront on Thor Commerce by using Thor for commerce data and APIs and your own application for the buyer experience. The practical path is to configure a store, channels, products, prices, and inventory; build product discovery and product pages with Thor’s Storefront API; persist and update a cart; then connect checkout and test the full purchase path. AI can help implement each bounded step, but you still need to verify API fields, test the integration, and control changes to live commerce data.
How Thor Commerce and your storefront fit together
Thor manages products, contextual prices, inventory, customers, carts, and orders; your application builds the experience shoppers use. Thor’s architecture separates a trusted management interface from the buyer-facing interface: the Admin API is for trusted management integrations and embedded apps, while the Storefront API supports product discovery, customer accounts, carts, and checkout. How Thor fits together and Storefront API documentation describe this division.
Keep Admin API credentials on the server. Never place them in browser code or a client-side bundle. Storefront requests use GraphQL and can include product and variant data, contextual prices and availability, carts, checkout, and customer accounts. The request context can include store, channel, currency, country, locale, and customer context; Thor uses that context to determine what a shopper can see and buy, including pricing, inventory, discounts, shipping, and eligible payment methods.
Choose a starting point and configure the environment
Start by deciding whether to customize a working Next.js storefront, build a storefront from scratch, connect a service, configure an empty project, test the purchase path, or extend the dashboard. Thor’s getting-started guide describes these routes. Use the project slug, credentials, and resource IDs that belong to the same environment so requests and configuration target the intended project. Thor’s getting-started guide was last updated September 9, 2026.
#1 Best Overall
Adapting a starter can get an initial working flow in place while preserving the option to change its UI; building from scratch gives you more control but leaves more application work to do. Thor’s guide offers both paths but does not publish comparative time or cost estimates.
Prepare products shoppers can actually buy
Before building pages, configure the commerce model in Admin. Set up the store and channels, create products with sellable variants, add prices and inventory, then activate and publish the products you intend to expose. A product record existing in Admin is not enough to make it available in a storefront: publication, a price, stock, and the shopper’s context all affect whether it appears as purchasable.
This distinction matters when diagnosing missing or unavailable products. Check that the product is published for the intended channel, has a sellable variant with a price and inventory, and is queried with the shopper’s appropriate store and market context. Thor’s architecture documentation describes the product and operational data it manages: How Thor fits together.
Build product discovery and product pages
Use the Storefront API to query products, categories, or collections. Depending on the query, product results can include variants, contextual price and availability, media, categories, collections, tags, and public metafields. Thor also supports cursor pagination, sorting, facets, and search queries, allowing the application to build browse and search experiences without treating a single product list as the whole catalog.
Keep the request context consistent with the market the shopper is browsing. In particular, store, channel, currency, and country should carry through the discovery flow and into cart creation. A result’s price or availability can depend on that context, so a product page should not assume that a value returned for one context applies unchanged to another. See the Storefront API documentation for the API’s supported operations and context.
Create a cart and treat Thor’s response as authoritative
Create and update carts using the same shopper context used for product discovery. Persist the cart identity in the shopper’s session, and re-read the cart after changes rather than trusting stale client state. The returned cart is the source of truth for line prices, discounts, tax, shipping, payment eligibility, and totals.
Do not independently calculate the payable total in browser code. The values shown to the shopper should reflect the current cart response, including any changes after adding or removing items or changing checkout details. This avoids presenting a total that does not match Thor’s contextual pricing and checkout calculation.
Recommended Free Tools
Choose hosted or custom checkout
| Approach | Implementation effort | Buyer-experience control | What your application must handle |
|---|---|---|---|
Redirect to the returned checkoutUrl |
The shorter integration path described in Thor’s Storefront documentation. | The transition into checkout is less custom than a checkout built within your own application. | Use the returned checkout URL and ensure the cart and shopper context are correct. |
| Build a custom checkout | More integration work because the application wires the checkout steps. | More control over the buyer-facing checkout experience. | Connect shipping and payment steps according to the methods configured for the project; use the cart response for authoritative prices and totals. |
Thor’s documentation describes both options: redirecting to the returned checkout URL for a shorter integration, or wiring shipping and payment for a custom flow. The available methods depend on project configuration. Do not assume a payment provider or shipping option is enabled simply because the storefront supports checkout. See the Storefront API documentation.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Use AI as a bounded implementation assistant
Thor’s documentation recommends giving a coding agent a defined task, retrieving the relevant Markdown guides, and verifying operations before making changes. Use the conceptual material to inform modeling decisions, implementation guides for procedures, and the API reference for exact fields and input contracts. Thor’s suggested prompt begins: “Inspect my project, ask what I want to build, and propose a plan before implementing it.” The prompt also asks the agent to verify GraphQL fields and inputs, keep Admin credentials server-side, and ask before changing live commerce data. Thor documentation home.
For a more reliable implementation loop, give the agent one slice at a time—for example, a product-listing query or cart-update interface. Ask it to identify the Thor guide or API reference it followed. Review the generated code, check GraphQL fields and input shapes against the current API reference, and run it in a development environment with a configured test payment method before launch. An AI-generated implementation is not evidence that the code has been tested; only report tests that were actually run.
Test the full purchase path and hand operations off
- Use the development environment and a configured test payment method.
- Run the buyer journey from product discovery through cart and checkout, checking that the store and shopper context remain aligned.
- Complete a test order and inspect it in Admin.
- Document the operational handoff: payment and fulfillment are separate workflows after checkout, so identify who or what handles each for the project.
Thor’s getting-started documentation includes testing the purchase path, and its platform documentation distinguishes commerce operations such as orders from subsequent payment and fulfillment workflows. Getting started with Thor; How Thor fits together.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallExtend the store when the core flow works
Thor’s documentation identifies webhooks, catalog synchronization, bulk operations and jobs, custom data, and embedded apps as extension paths. Which integrations are needed depends on the project’s connected systems and configuration. Treat these as follow-on integration decisions rather than prerequisites for establishing the basic discovery-to-checkout path. Thor documentation home.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
