Setting up a store for your own frontend

With your own frontend, the pages shoppers browse are your own code; Storeloom stays your store: products, prices, stock, checkout, payments, orders, emails and the admin. This guide is the order to set things up in.

Choose where your frontend runs

• Hosted on Storeloom. Your code lives in GitHub; every push builds it there and Storeloom runs it on your store’s addresses. Checkout, order pages and cart links keep working on the same addresses without anything from you. See Hosted storefronts and GitHub.
• On your own servers. You run your frontend wherever you like and read your store through Storeloom’s API with the Own frontend add-on. Shoppers pay on your store’s address, your own domain (see The cart and checkout below).

Either way, your theme stays: it answers your store’s addresses until a hosted storefront goes live, and again at once if your code ever fails.

1. The store itself

Set these up as for any store; your frontend reads them, and checkout uses them:

• Settings › General: the store’s name, country and currency.
• Products and Collections: only active products are shown to your frontend.
• Content › Menus: your frontend gets every menu with its links as store paths, so you change navigation in Storeloom, not in code.
• Pages, Blog and Settings › Policies: your frontend reads them by their handles.
• Settings › Languages and Markets, if you sell in more than one: ask the API with ?locale=de for another language and ?country=RO for a country’s market prices.

2. Selling and checkout

Checkout is always Storeloom’s, at your store’s address /checkout, so set up what it needs:

• Settings › Shipping and delivery, Taxes and duties and Payments.
• Settings › Checkout: its fields, look and words.
• Emails: order confirmations and the rest link to your store’s Storeloom address, where the order status, reviews and withdrawal pages stay.

3. Addresses

Open Settings › Domains.

• Hosted on Storeloom: connect your domain (such as www.yourbrand.com) to your store; your hosted storefront answers it once live.
• On your own servers: your frontend has its own domain (such as www.yourbrand.com). Give your Storeloom store a domain of yours too, such as shop.yourbrand.com, so checkout, order pages and emails carry your name instead of the Storeloom address.

4. Reading your store (own servers)

Open Settings › Own frontend and switch the add-on on. You get:

• a public key for browsers and apps and a secret key for your server (keep it there); send one in the Authorization: Bearer header;
• the API address, ending in /v1/headless: / (the store, menus, collections and policies), /products (with search, filters, sorting and pages), /products/:handle (with each variant’s id, price and stock), /collections/:handle, /pages/:handle, /blogs/:handle, /policies/:kind and /theme;
• webhooks, so your server knows the moment a product, collection or page changes and can refresh what it keeps.

5. The cart and checkout

Your frontend keeps the shopper’s cart in Storeloom, so prices, stock, discounts and checkout always agree, and the shopper pays on your own domain (your store’s address, such as shop.yourbrand.com):

• POST /cart/lines with a variant’s id and a quantity makes the cart the first time and answers with its token. Keep it with the shopper (for example in their browser) and send it in the x-cart-token header from then on.
• GET /cart shows the cart, priced again from your catalog; PUT /cart/lines/:key with a new quantity changes a line, and 0 removes it. Use the line’s key from the cart: one item can be on several lines, one for each way a shopper filled in its choices (such as two flavours) or each gift card recipient. A variant’s id alone still works for an item on one line. A cart opened from a draft order’s invoice says invoice: true: its items are the ones you chose, so changing, removing or adding a line is refused (409 invoice_lines); show its lines without steps.
• POST /cart/checkout answers with a checkoutUrl: send the shopper there. Storeloom’s checkout opens with the same cart on your store’s address. The link works for 15 minutes, so ask for it when the shopper chooses to check out. Your frontend keeps the cart too, until the order is placed.

These work with the public key in a browser as well as with the secret key on your server.

For a quick Buy now without a cart, a cart link does it in one step: https://shop.yourbrand.com/cart/<variant id>:<quantity>, with several separated by commas (up to 25), makes a new cart and opens checkout. If one is sold out or gone, the shopper lands on the cart, which says so, with the rest kept.

6. Search engines

Your frontend writes its own page titles, descriptions and structured data; the API gives you what to fill them with:

• each product’s, collection’s and page’s seoTitle and seoDescription;
• /sitemap (every public address, in each language) for your sitemap.xml, and /llms for llms.txt;
• /redirect?path=/old-address, to answer your old addresses with a 301 before showing a “not found” page (manage them in Content › URL redirects).

7. What your frontend must add itself

Storeloom adds these to its own pages; on yours, add them:

• the Withdraw from contract here link on every page, for EU shoppers, leading to your store’s address /withdraw;
• links to your policies;
• cookie consent and measurement: Settings › Customer events measures Storeloom’s pages and sends orders to your pixels from Storeloom’s servers; anything measured on your own pages is yours to set up.

Checklist

• [ ] Products, collections, menus, pages and policies in Storeloom
• [ ] Shipping, taxes, payments and checkout set up; a test order placed
• [ ] A domain for your store’s Storeloom address (and your frontend’s own)
• [ ] Hosted: GitHub connected, the pull request merged, a deployment on Production, Go live
• [ ] Own servers: the add-on on, the secret key only on your server, webhooks added
• [ ] The cart through the API, and checkout through its checkoutUrl
• [ ] Sitemap, redirects and page titles from the API
• [ ] The withdrawal link and policy links on every page