How to add a store to an existing project

To add an online store to a TeleportHQ project you already have, click Plugins in the editor's left sidebar, click E-commerce, then switch on E-commerce enabled. A short wizard asks you to confirm, pick a database and choose a payment provider or No Provider. TeleportHQ then creates everything the store needs: product, cart, checkout and order pages, the data behind them, and shopper sign-in.

Before you start#

• Your project becomes a web app. A TeleportHQ store always runs as a web app, so its code can no longer be downloaded. You can still publish it from TeleportHQ. To go back to a website later, you restore the backup TeleportHQ saves before the change. See What's the difference between a website and a web app?.
• A web app needs a Web App slot to keep publishing after a 7-day window. Trial and Premium workspaces include 1 slot; Pro includes none, and you can buy more. See Why does my web app need a slot, and what is the 7-day window?.
• Have your payment provider's API keys ready if you want to take online payments right away. You can also add them later.
• Starting a brand-new store? The AI can build a whole store for you. See How to generate an online store or web app with AI.

Steps#

1. In the editor's left sidebar, click Plugins (below the plugin icons, above Growth).
2. In the Plugins panel, click the E-commerce row ("Products, cart, checkout and orders."). Its pill says Off. A drawer opens beside the list, titled E-commerce.
3. In the drawer, under Feature, switch on E-commerce enabled. (Or, under Panel, click Open next to E-commerce panel: the E-Commerce panel says E-Commerce Not Activated; click Activate E-Commerce. Both start the same wizard.)

4. If your project is still a Presentation Website, the Enable Web App features? window opens first. Read it, then click Enable Web App features. TeleportHQ saves a backup named Before Web App features Enabled before it changes anything. A project that is still blank (an empty home page and no components) gets no backup, because there is nothing in it to restore. To stop here, click Keep as a Presentation Website.

5. In the Activate E-Commerce window, read the list and click Continue.
6. If the wizard asks for a database, keep TeleportHQ database selected (managed by TeleportHQ), or pick a database you connected, and click Continue. This step is skipped when the project already uses a database for sign-in or another feature.
7. Choose how shoppers pay:
   • No Provider is selected at first: shoppers pay on delivery or at pickup. Click Activate E-Commerce.
   • Or click a provider (Stripe, PayPal, Mollie, Razorpay, Square, Paddle or CoinGate) and click Continue. Paste your keys and click outside each field so it saves. Then click Activate E-Commerce, or Skip and activate to add the keys later.
8. Keep the browser tab open while the Setting up your store checklist runs. When it says Your store is ready, click Open my store.
9. In the E-Commerce is Ready! window, click Show Me for a guided tour, or Maybe Later.

Turn your existing product pages into a real store (optional)#

If your pages already show products, for example a static "Our Candles" gallery, the provider step shows the switch Connect my existing pages to the store, switched on. TeleportHQ's AI then reads your pages and turns the products, categories and lists they show into live store data, keeping the same cards and layout.

• It uses about 4,000 AI tokens. If your workspace has fewer than 2,500, the switch is disabled with "Not enough AI tokens to read your pages".
• To keep your pages as they are, switch it off before you click Activate E-Commerce.
• A product shown in two lists, for example on the home page and on the shop page, becomes one product, not two. A hand-picked list, such as "Staff picks", keeps showing exactly the products it showed. A filter button that stands for everything, such as All, doesn't become a category.
• If the conversion fails, the store is still activated, and the checklist says "Sample products were added instead". If your project's main language isn't English, TeleportHQ translates the sample products into it; when that fails (for example with no AI tokens left), they stay in English.

Other ways to switch on a TeleportHQ store#

• E-Commerce panel: if the E-commerce icon is in your left sidebar, click it; the panel says E-Commerce Not Activated and offers Activate E-Commerce.
• Elements panel: the E-Commerce group shows E-Commerce Required with an Enable E-Commerce button.
• AI Assistant: ask it to "enable e-commerce".
• Project Menu → Edit → Enable Plugins…: in the Choose your plugins window, tick E-commerce (it comes with Accounts, the shopper sign-in) and click Enable 2 plugins (Enable 1 plugin when sign-in is already on). This switches the store on without the wizard: it uses the TeleportHQ database, starts with Stripe waiting for its keys (unless the project already has a payment provider), and leaves your existing pages as they are. See How to turn features on or off (Plugins).

Check that it worked#

The left sidebar now has an E-commerce icon (a credit card), and the E-commerce row in Plugins says On. The E-Commerce panel shows Payment Providers and Products; your orders will show in Growth → E-Commerce → Orders. In Pages, Components & Tree View, a new e-commerce folder holds the store pages, such as the products list (/products), product details (/products/[slug]), cart, checkout and order pages. Publish your site to put the store online.

Troubleshooting#

"Please enter a valid value and click outside the field to save it" A required key in the wizard saves when you leave the field. Click outside the field after pasting. An optional field says "Please click outside the field to save the value".

The provider card shows "Misconfigured" after activation The provider rejected the key, but the store was still activated. Fix the key in E-commerce → Payment Providers. See How to accept payments with Stripe or PayPal.

"Your store could not be set up" Something failed during setup. The checklist says "Something went wrong. Nothing was left half-done." and "You can try again from the E-Commerce panel."

"E-Commerce Activation Limit Reached" A project can activate e-commerce up to 10 times. To activate it again, click Contact Support in that window, which writes to hello@teleporthq.io.

The panel says "Store Pages Deleted" Your store's pages were deleted, but its products, orders and settings were kept. Activate E-Commerce rebuilds the pages. See How to regenerate store pages or turn off e-commerce.

Your dashboard shows no Store badge on the project ("Could not mark the project as a store") Your store works. The Store badge and the Online store filter on your dashboard read a mark TeleportHQ saves on the project when the store is switched on, and saving that mark failed. The editor shows no message for it: the words "Could not mark the project as a store" appear only in your browser's developer console. TeleportHQ tries again each time you open the project. Open it again from your dashboard, then go back to the dashboard: the card should now show the badge. If it doesn't, write to hello@teleporthq.io.

Good to know#

• Sign-in is switched on too. Activating the store also turns on shopper sign-up and login (authentication), because customers need accounts to see their orders.
• Links in your navigation and footer. TeleportHQ adds what shoppers need to reach the store, wherever your navigation and footer don't have it yet: a Shop link, a cart button and an account menu in the navigation, and Shop and My account links in the footer. A message says what was added, for example "Added a “Shop” link, a cart button, an account menu and a “My account” link to your navigation and footer." To remove one, delete it in your navigation or footer component. See Links the store and Bookings add.
• Prices start in US dollars. A store you add this way, and every product you add by hand, start on USD. A store the AI builds starts in the currency of the country you're in, for example euros (EUR) from Germany, and in US dollars when TeleportHQ can't tell where you are. To sell in another currency, see Which currency your store uses.
• No provider still works. With No Provider, shoppers pay on delivery or at pickup, and the store can still create invoices for those orders. See How to set up invoices and VAT for your store.
• Store emails use the email provider your project already has, until you change the store's email settings.
• In a project TeleportHQ's AI built, activating the store also lets the AI set up the products page's listing (filters, search and sort, card layout and pages). You can change it later in Products Listing. See How to show products on your pages.
• Changes go live when you publish.