Build and publish MySite themes

A MySite is a rep’s personal page at /my/<username> on your storefront. It shows the rep’s photo, bio, social links, buttons, and the products and content they picked. A MySite theme decides how that page looks. Your reps choose a theme for their MySite, and admins manage the list on the Mysite Themes screen. A MySite theme isn’t a storefront theme. It’s a single template made of three parts:

Part	Local file	What it holds
Content	`content.liquid`	The page body, in HTML and Liquid
Head	`head.liquid`	Extra markup for the page’s `<head>`, such as font links and meta tags, in HTML and Liquid
Stylesheet	`stylesheet.css`	The theme’s CSS

Which theme a MySite renders

For each visit to /my/<username>, Fluid renders the first of these that exists:

The theme in the preview_theme_id query parameter, when it’s one of your company’s MySite themes. fluid mysite dev uses this to preview your edits.
The theme the rep chose for their MySite.
Your company’s default MySite theme, marked Default on the Mysite Themes screen.
Fluid’s built-in default theme.

Fluid renders the theme’s published version. Every rep who uses a theme sees the same template, filled with their own values.

Write the theme

Content

Fluid wraps content.liquid in its own HTML document, so write only the page body. Don’t add <!DOCTYPE html>, <html>, <head>, or <body> tags: they would nest a second document inside Fluid’s. Fluid adds the page title and Open Graph tags from the rep’s name and bio, and links your stylesheet, so you don’t need to. MySite pages don’t show your storefront’s navigation bar or footer. A MySite theme has no theme files around it. There are no sections, blocks, snippets, or settings schema, and {% render %} or {% section %} tags have nothing to load. Write the whole page in content.liquid. Read the rep’s values from fluid_affiliate. Theme variables lists every field.

Handle empty values

Reps fill in their MySite over time, so design for missing values:

Social links. Each social field, such as fluid_affiliate.instagram_url, is blank unless the rep set it. Show each icon only when its URL is set, and hide the whole icon row when none is.
Bio. fluid_affiliate.bio can be blank. Skip its block rather than leaving an empty box.
Photo. fluid_affiliate.image always has a value. Fluid uses a placeholder image when the rep has no photo.
Buttons and cards. When a rep hasn’t added links or picked products, fluid_affiliate.links and fluid_affiliate.my_site_displayables hold your company’s default MySite links and favorites instead. Both can still be empty, so give the page a layout that works without them.

{% if fluid_affiliate.instagram_url != blank %}
  <a href="{{ fluid_affiliate.instagram_url }}" aria-label="Instagram" target="_blank" rel="noopener">
    <svg aria-hidden="true" width="24" height="24"><use href="#icon-instagram"></use></svg>
  </a>
{% endif %}

{% if fluid_affiliate.bio != blank %}
  <p class="mysite-bio">{{ fluid_affiliate.bio }}</p>
{% endif %}

Render each card type

Each entry in fluid_affiliate.my_site_displayables is a card. Branch on its favoriteable_type and read the item from favoriteable:

`favoriteable_type`	The card is	Extra fields on `favoriteable`
`Product`	A product	`display_price`, `price`, `url`
`EnrollmentPack`	An enrollment pack	`enrollment_pack`, `price`, `url`
`Medium`	A video, PDF, image, or other media	`kind`, `video_url`, `pdf_url`, `image_url`, `powerpoint_url`, `url`
`Page`	A storefront page	`url`
`Promotion`	A promotion	`url`
`Library`	A playlist	`url`

Every card’s favoriteable also has id, type, title, description, and image. Link each card to its url: it’s the item’s address under the rep’s own link, with the rep’s username in it.

{% for card in fluid_affiliate.my_site_displayables %}
  {% assign item = card.favoriteable %}
  <a class="mysite-card mysite-card--{{ card.favoriteable_type | downcase }}" href="{{ item.url }}">
    {% if item.image != blank %}
      <img src="{{ item.image | image_url: width: 400, format: 'auto' }}" alt="{{ item.title }}" loading="lazy">
    {% endif %}
    <span class="mysite-card__title">{{ item.title }}</span>
    {% if card.favoriteable_type == 'Product' %}
      <span class="mysite-card__price">{{ item.display_price }}</span>
    {% elsif card.favoriteable_type == 'Medium' and item.kind == 'video' %}
      <span class="mysite-card__badge">Video</span>
    {% endif %}
  </a>
{% endfor %}

Head

Put markup that belongs in the page’s <head> in head.liquid: font links, extra meta tags, or a small script. Fluid renders it as Liquid with the same values as the content, and adds it to the end of the <head>, after its own tags and your stylesheet.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap">
<meta name="theme-color" content="#1f3a5f">

The Add Mysite Theme dialog in the admin has fields only for the content and the stylesheet. Edit the head with the CLI.

Work on a theme with the CLI

The fluid mysite commands come from the MySite plugin. Install it next to the Fluid CLI, and sign in:

npm install -g @fluid-app/fluid-cli @fluid-app/fluid-cli-mysite
fluid login

Command	What it does
`fluid mysite list`	List your company’s MySite themes with their IDs
`fluid mysite pull --theme <id>`	Download a theme’s three files into the current directory, or into `--root <dir>`
`fluid mysite dev`	Preview your local files on your own MySite without changing the theme
`fluid mysite publish`	Send your local files to the theme. Every MySite that uses it changes straight away

Pull the theme

fluid mysite list
fluid mysite pull --theme 4182 --root ./mysite-aurora

Pull writes content.liquid, head.liquid, stylesheet.css, and a .fluid-mysite.json file that records which theme the directory belongs to. Pulling the same theme again overwrites your local files without asking. To pull a different theme into a directory that already tracks one, add --yes.

Preview your edits

cd mysite-aurora
fluid mysite dev

The first run creates a copy of the theme for previews, named after the theme with (dev …) added, and later runs reuse it. Members can’t choose that copy for their MySite. Each time you save one of the three files, the CLI updates the copy and reloads the page.The dev server listens on port 9293, or the next free port, and shows your own MySite rendered with the copy. It also prints a production preview link, your MySite URL with preview_theme_id set to the copy. Your signed-in user needs a username in the company, so that you have a MySite to preview against.Use --port to pick another port, --live-reload off to stop automatic reloads, and --root <dir> to run against another directory.

Publish

fluid mysite publish

The CLI asks you to confirm, then sends your three files to the theme you pulled.

A MySite theme has no draft. fluid mysite publish replaces the theme’s content, head, and stylesheet, and every rep’s MySite that uses the theme changes at once. Preview with fluid mysite dev first.

Publish checks your files before it changes anything:

It stops when any of the three files is missing or can’t be read, because sending it would erase that part of the live theme. An empty file is fine, and clears that part on purpose.
In a session that can’t answer a prompt, such as a script or an AI agent, it refuses to publish unless you pass --yes. Add --yes only when you mean to publish.

If a rep’s MySite still shows the old version, Reset Cache on the Mysite Themes screen clears the cached copies of your reps’ MySites.

Mysite Themes, to add, rename, and customize themes in the admin
Theme variables, for every fluid_affiliate field
Image transformations, to size card images
CLI, for storefront theme commands

Start here

Building blocks

Storefront features

Advanced

Member storefront

Build and publish MySite themes

Which theme a MySite renders

Write the theme

Content

Handle empty values

Render each card type

Head

Work on a theme with the CLI

​Which theme a MySite renders

​Write the theme

​Content

​Handle empty values

​Render each card type

​Head

​Work on a theme with the CLI

​Related pages

Which theme a MySite renders

Write the theme

Content

Handle empty values

Render each card type

Head

Work on a theme with the CLI

Related pages