AI Stylist

The AI Stylist builds a complete outfit from your own products. A shopper describes an occasion or a look, such as “gala night” or “beach casual”, and the stylist picks a piece for each part of the outfit, explains its choices, and lets the shopper refine the look and add it to their cart.

What shoppers see

A headline that rotates between short phrases, over an animated garden scene, and a field to describe an outfit or a scene.
After the shopper clicks Build The Look, a short build sequence with a counter and status lines, then the finished look.
The look: one card per piece, labeled by its place in the outfit (The Layer, The Top, The Bottom, The Shoes, The Finish), with a note on why it was chosen, its price and a link to its product page.
On each card, the shopper can add that piece to the cart, choose an alternative from a list, or swap it for another piece.
Below the look: the total, a button that adds every piece to the cart, refine chips (for example Warmer or Cheaper) that rebuild the look in that direction, Try another for a different look from the same description, and a field for a new description.

How it works

The stylist runs entirely in the shopper's browser. When the page loads, the section writes your products (up to the Maximum products to load) into the page, and the stylist chooses from them there.

It needs no app, no API key and no account with an outside service.
What a shopper types never leaves their browser. The only request the stylist makes of its own is Shopify's standard add-to-cart request, when the shopper asks for it.
It uses only products from your store, so every piece it suggests is something a shopper can buy.

Set it up

From your Shopify admin, go to Online Store > Pages, and click Add page.
Enter a title, such as AI Stylist. You can leave the content empty; the section supplies everything on the page.
In the Theme template drop-down menu, choose ai-stylist, then click Save.
Add the page to your main menu in Content > Menus, so shoppers can find it.
From Online Store, click Edit theme next to Inkblot, choose the page.ai-stylist template from the drop-down menu at the top of the editor, and select the AI Stylist section to adjust its settings.
Try a few descriptions on the page. If a piece lands in the wrong part of the outfit, see Product type mapping.

Settings and blocks

Product pool: The collection the stylist picks from. Leave it empty to use all products. A collection of clothing, shoes and accessories gives the best results.
Maximum products to load: How many products from the pool the page carries, from 50 to 250. More products give more choice but make the page heavier to load.
Audience: All uses every product. Menswear or Womenswear leaves out pieces made for the other audience. The stylist decides a product's audience from words such as men's, women's, ladies or gents in its title, product type and tags; products with neither are treated as unisex and always stay in.
Show the living garden: The animated scene behind the stylist. Turn it off for a plain black background.
Fast mode: Shortens the build sequence. Useful while you set the section up.
Product type mapping: Optional. Tells the stylist which part of an outfit each of your product types belongs to. See Product type mapping.
Headline phrase blocks: The phrases the headline rotates through, each with a First line and a Second line. Add, remove or reorder them.
Refine chip blocks: The buttons that rebuild a look in one direction. Each has a Label that shoppers see and a Refinement: More casual, Smarter, Warmer, Cooler, Bolder, Simpler or Cheaper.

How it sorts your products

Every outfit has up to five parts: a layer (outerwear), a top, a bottom, footwear and one finishing accessory. The stylist reads each product's product type, title and tags, and recognizes common garment names, such as chore jacket, overshirt, knit, jeans, carpenter pants, chelsea boots or beanie, to decide where a product goes.

It leaves out products that aren't clothing, even when their names contain a clothing word. For example, a shoe cleaning brush is not treated as footwear.

A product type in your mapping always wins over what the stylist works out on its own.

Product type mapping

Use the mapping when the stylist puts a product in the wrong part of the outfit, or when your product types are names only your store uses. The mapping is JSON: a slotByType object that pairs each product type with one of five parts, outerwear, top, bottom, footwear or accessory.

{"slotByType": {
  "jackets": "outerwear",
  "overshirts": "outerwear",
  "tees": "top",
  "knitwear": "top",
  "trousers": "bottom",
  "boots": "footwear",
  "hats": "accessory"
} }

Write every product type in lowercase, exactly as it is spelled in your admin apart from the case. The stylist lowercases your product types before it looks them up, so "Jackets" would never match.
End with } }, with a space between the braces. Shopify refuses to save a setting that contains two closing braces together, because it reads them as Liquid code.
Map only types that hold one kind of garment. A mapped type skips the check that leaves out products that aren't clothing, so a mixed type such as Gifts would put mugs or candles into outfits.
Types you leave out of the mapping are still sorted by the stylist on its own.

Tips for better outfits

Give every product a product type. Products without one rely on their title and tags alone.
Use plain garment words in titles and product types, such as wool overcoat or pleated trousers.
Make sure every part of the outfit has enough products. With only a few trousers in the pool, looks reuse the same ones.
Give products a clear first image. The stylist shows it on each card.

Limits

The stylist understands descriptions written in English. Its buttons and labels follow your store's language, but the look's name and the notes that explain each choice are written in English.
It considers only the products the page loads: the Product pool, up to the Maximum products to load.
It adds each piece in its first available variant. See What shoppers see.