Skip to main content
Build your storefront as a Fluid theme unless you have a specific reason not to. A Fluid theme is Liquid templates, section schemas, CSS, and JavaScript that Fluid renders for you. You keep full control of the design. In return, Fluid handles the parts that are hard to rebuild correctly: merchant editing, rep credit, routing, SEO, droplets, menus, translations, and per-market views. A headless storefront, where you build your own front end against the API, is supported. But everything in the table below becomes yours to build and maintain.

At a glance

Why a Fluid theme

Merchants can keep editing after you ship

Your templates, sections, and schemas become the panels in the Page Editor. Merchants rearrange sections and change settings without a developer, and without breaking your code. A headless front end loses that, unless you build an editor too.

Routes carry FairShare credit

Fluid’s routes are built for FairShare. When a member shares a credit path such as /<username>/products/<slug>, the FairShare SDK logs the credit. FairShare then keeps that member’s credit as the shopper moves around the store. Every Fluid storefront already loads the SDK, so you don’t add it to a theme. See Supported paths and FairShare SDK and the storefront. A headless site has to load the SDK itself and follow the same credit routes. If it doesn’t, member shares can’t credit the member.

Resources arrive on the right routes

Products, collections, categories, pages, posts, and media each have a slug route, such as /products/<slug>. Fluid matches the route to the resource and passes it into the right template. You write the template, and Fluid fetches the data. See Supported paths and Slugs and URLs.

Admins manage SEO and the page head

Each resource carries its own SEO title, description, preview image, and indexing setting, which admins can change. Admins add scripts and tags to the page head or body with global embeds, such as analytics or verification tags. See SEO. With a Fluid theme, you don’t build any of this.

Droplets plug into your theme

Droplets that add storefront features have a structure to build on. A droplet can add sections that merchants place on pages, blocks inside your sections, and app embeds that load across the storefront. Your theme doesn’t change when a merchant installs one. See Droplet theme extensions. Navigation menus live in Fluid, not in your theme’s code. Admins edit the links in the admin, and your theme renders whatever menu it’s given. You can redesign or replace a theme later without rebuilding the menu structure.

Every market can get its own view

The storefront sitemap gives every route a structure you can control. Country routes, called theme region rules in the API, can serve a different template, resource, or redirect for each country at the same URL. Use them when one market needs a different layout. Combine them with translations for language. See country routes in the API reference.

Translations are easy to add and keep up

Your theme renders translated content from the same structure in every language. Products, collections, pages, menus, and your theme’s own text each carry a translation for every language the store sells in. Admins translate from the admin, or ask Mist, Fluid’s AI assistant, to do it. Agents and developers can use the Add a language guided setup. It finds what isn’t translated, machine-translates it, and confirms nothing is left. Shoppers pick their language on the storefront, and the theme doesn’t change. See Translations.

You still control every pixel

None of this limits the design. Your theme is your own Liquid, CSS, and JavaScript, built from sections and blocks that you define. You work locally with the Fluid CLI or in the editor’s code mode. Developers and agents have full control, as long as they follow the structure these docs describe.

When headless makes sense

Go headless when the front end isn’t a website Fluid can render: for example, a native mobile app, a kiosk, or a checkout embedded in another product. For those, build against the API:

For AI agents building a storefront

  1. Start from a Fluid theme, not a blank front end. To match a merchant’s current site, copy it into a theme. See Agent launch guide.
  2. Read the developer guide and common pitfalls before you edit.
  3. Install Fluid’s theme skills with fluid theme skills install. See Fluid CLI.
  4. Push to an unpublished theme, preview it, and publish only when the merchant approves.

Frequently asked questions

Can I build a headless storefront on Fluid?

Yes. The Checkout API and the FairShare SDK support it. You then build the editing, routing, SEO, menus, translations, and per-market views a Fluid theme already gives you.

Will a Fluid theme limit my design?

No. You write the templates, CSS, and JavaScript, so you control every pixel. Fluid supplies the data, routes, and editor around them.

How does rep credit work with a Fluid theme?

When a member shares a credit path, the FairShare SDK logs the credit, and FairShare keeps it as the shopper browses. The SDK is already on every Fluid storefront. See FairShare.

Do I lose my menus if I change themes?

No. Menus are stored in Fluid, not in the theme. A new theme renders the same menus.

How do I translate a Fluid storefront?

Turn the language on, then translate from the admin, ask Mist, or follow the Add a language guided setup with the Fluid CLI. The theme renders each language without code changes.

Can I show a different storefront design in each country?

Yes. Use country routes to serve a different template or resource for each country at the same URL, and translations for each language.