Outfitter

Outfitter is a storefront app for selling merch, such as tees, hoodies, caps, mugs and totes. It renders the whole storefront itself, without a theme, and comes with a visual editor. You build the home, product and category pages from sections, edit the store's copy on the page itself, and set your logo and colors in its settings. Checkout hands off to Swell's hosted checkout.

Set up Outfitter in your test environment first, and place a test order there before you go live.

The home, product and category pages are each built from a list of sections. In the editor, choose a page under Pages. Then:

The product page has one list of sections, shown on every product, and the category page has one list, shown on every category. The editor previews them with a sample product and category. Each of these pages keeps a required section, Product detail or Category products, which you can move but not hide or delete.

If the home page has no sections, it shows a standard hero and product grid. If every section on it is hidden, shoppers see nothing between the header and the footer.

Every section type can go on any of the three pages, in any number.

Every heading, label, button and message the store shows can be edited, 143 strings in all, from the header and footer to the cart drawer. To change one, click it in the preview and type. You can also edit a section's copy in Section settings. Product names, prices and descriptions come from your catalog, so edit them in Swell.

The cart, checkout, account and not-found pages have no sections. Choose them under Pages to edit their copy the same way.

Copy is saved for each language. If your store sells in more than one, switch the language in the preview's header, then edit the copy for that language. A string with no translation shows the copy for your store's default language.

In the dashboard, the storefront's Settings tab has the same copy in its Content panel, grouped by page.

The store name shows in the header and page titles, and a logo replaces the name in the header. Seven colors are used across the whole store, from buttons to the lines between rows. To change them in the editor, click Settings: the store name and logo are on General and the colors are on Colors. Click Save to apply them. See Settings below for each one.

The product page shows every active option on the product:

The product page also shows up to four images, the sale price when the product is on sale, and up to four of the product's up-sells. A product that is out of stock and can't be backordered shows Out of stock instead of Add to cart.

The checkout page is a review step. It lists the items, the shipping options and the total, and Continue to payment takes the shopper to Swell's hosted checkout to enter their address and pay. Outfitter never handles payment.

Shipping options come from your store, whichever carrier or app provides them, and appear once the shopper has entered a delivery address. When a shipment is recorded on an order, its carrier and tracking number show in the shopper's order history. Any fulfillment app that records shipments works with Outfitter. Printful suits print-on-demand merch, but Outfitter doesn't need it.

Shoppers can sign up, sign in, reset their password and see their 20 most recent orders. If your store sells in more than one language or currency, the header has a menu for each, listing the ones your store is set up for.

With Demo store on, the footer of every page and every product page show a notice that the store is a demo and orders aren't fulfilled. Use it to show the store to your team before it takes real orders. Demo mode doesn't stop orders from being placed.

Settings are in the editor under Settings, and in the Outfitter panel on the storefront's Settings tab in the dashboard. Each storefront has its own settings.

The editor only opens from the dashboard, for a signed-in admin of the store. Go to Online Store > Storefront and click Open editor on the storefront.

Pages are served from the cache for the Page cache time, 60 seconds by default. Wait for the page to refresh, or set Page cache to 0 while you build the store and set it back before you go live.

The editor previews these pages with your first product and category. Add a product or a category, then reopen the editor.

The home page has no sections, so it shows the standard hero and product grid. Add a section to replace them.

Every section on it is hidden. Show a section, or delete them all to get the standard hero and product grid back.

Swell couldn't match the chosen values to a variant, or a chosen value no longer exists. Check that the product has a variant for each combination of its variant options.

Add an image to each value of the color option. Only an option whose values have images changes the photo.

Shipping options appear once the shopper has entered a delivery address, which happens on Swell's hosted checkout. If none appear there either, check your shipping settings in Swell.

The editor couldn't read your store's languages, so it doesn't save copy changes. Reopen the editor.

You can't uninstall Outfitter while a storefront uses it. If the Outfitter storefront is your published one, publish another storefront first. Then in Online Store > Storefront, open the Outfitter storefront's ⋮ menu and choose Delete storefront. Its sections, copy and settings are deleted with it.

Then go to Apps > Outfitter and choose Uninstall app. Uninstalling applies to the environment you are in, so remove the app from the test and live environments separately. Your products, customers and orders aren't affected.

Outfitter is an Astro app that runs on Cloudflare Workers behind the Swell proxy. It reads the catalog, cart and account through the Swell storefront API.

Sections, copy and settings for a storefront live in one document, /:storefronts/{id}/configs/settings:

The app asks for these permissions:

The editor at /editor and its API under /editor/api/ only answer requests that come through the dashboard from a signed-in admin of the store. Other requests to /editor are redirected to the home page, and the API answers 404.

Home, product and category pages are cached at the edge and refreshed in the background. The cache key covers the storefront, language, currency, and the shopper's account and cart. Cart, checkout, account and editor pages are never cached.

Swell builds and maintains the Outfitter app. For help with it, email support@swell.is.