Complete the look

Early access. Complete the look is not yet offered in the dashboard while its matching is improved. Contact us to try it on your store.

/script/agent/v2/complete-the-look.js adds a strip to your product pages. It shows the rest of what the model in the product photo is wearing, matched to products in your catalogue. A shopper who likes the outfit can buy the whole thing from the page.

html

<script>
  window.StylorConfig = Object.assign({
    "publicKey": "sgpt-pk-…"
  }, window.StylorConfig || {});
</script>
<script src="https://stylor.ai/script/agent/v2/complete-the-look.js" defer></script>

It needs no page bridge, and it can sit beside the shopping assistant's snippet. Both read the same window.StylorConfig, so if you use both, put your options in one configuration block.

How it works

On a product page, after your page has finished loading, it identifies the product: from itemId if you set one, else the variant SKU, the product name and the page's canonical URL.
It asks Stylor for the other garments in that product's model photos, matched to your catalogue.
It draws the strip only when there is something to show. When the product has no model photo, or nothing in your catalogue matches, it draws nothing at all.

The first visit to a product can take a few seconds while its photos are read. The strip waits and asks again. After that the answer is kept for a week, so later visits show it straight away.

When the shopper switches to another photo or variant, the strip follows the model photo in view.

It never runs on the cart, account or checkout pages, and only on product pages otherwise. It uses Shopify's page type when the theme provides it, else the /products/ path.

Options

Set these on window.StylorConfig, with the strip's own options under completeTheLook:

html

<script>
  window.StylorConfig = Object.assign({
    "publicKey": "sgpt-pk-…",
    "completeTheLook": {
      "placement": "buy-box",
      "heading": "Shop the outfit"
    }
  }, window.StylorConfig || {});
</script>

Option	Type	Default	What it does
`publicKey`	string	Required	Your organization's public key.
`themeId`	string	The theme changed most recently	Only the theme's corner roundness is used. With `"none"`, or no theme saved, the strip copies the corners of your add-to-cart button. Colours and text always come from your page.
`datasetIds`	string[] or comma-separated string	Your active datasets	The catalogue the outfit is matched against.
`completeTheLook.placement`	`"buy-box"`	Below the product section	`"buy-box"` puts the strip in the buy box, under the add-to-cart buttons. If your theme's buy box can't be found, it falls back to the default placement and says so in the console.
`completeTheLook.anchor`	CSS selector	None	Put the strip next to this element instead. If the element isn't on the page within 6 seconds, the strip isn't shown.
`completeTheLook.position`	`"before"`, `"after"` or `"append"`	`"before"`	Where the strip goes relative to `anchor`: before it, after it, or inside it at the end. Only used with `anchor`.
`completeTheLook.heading`	string	`"Complete the look"`	The strip's title. With the default title and only one garment, it reads "Wear it with".
`completeTheLook.subtitle`	string, or `false`	`"The rest of what the model is wearing, from our collection."`	The line under the title. `false` or `""` removes it.
`completeTheLook.itemId`	string	None	The Stylor item id of the product on this page. It is the most reliable way to identify the product. Render it per page from your theme if you have it.
`completeTheLook.matchStore`	boolean	`true`	By default, only datasets connected to the website the page is on are matched. Set `false` on a staging or preview domain whose address doesn't match the store.
`completeTheLook.debug`	boolean	`false`	Logs to the console where the strip looked for a place, what it matched and why it skipped, and adds a preview control for the number of garments. Leave it off on your live store.

Where the strip goes

Without placement or anchor, the strip takes the first of these that is on the page:

An element you place: <div data-stylor-complete-the-look></div>. The strip goes inside it. Put this in your product template to choose the spot exactly.
Just before your theme's product recommendations.
Just after the main product section.
At the end of the page's main element.

placement: "buy-box" and anchor take priority over this list.

Styling

The strip uses your page's fonts and text colour. You can adjust its spacing with CSS custom properties on any ancestor:

Property	Default	What it sets
`--stylor-ctl-margin`	`40px` (`24px` in the buy box)	Space above and below the strip.
`--stylor-ctl-max-width`	`1400px`	The strip's widest.
`--stylor-ctl-list-max`	`560px`	The garment list's widest.
`--stylor-ctl-photo`	`72px`	The width of each garment's photo.

css

.product-page { --stylor-ctl-margin: 24px; --stylor-ctl-photo: 88px; }

The strip's element has the class stylor-complete-the-look, and data-placement="buy-box" when it is in the buy box.

What shoppers see

Each garment is one row: its photo, what it is, its name and its price in the shopper's currency, with a sale price struck through. Rows link to the product in the same tab. With five or more garments, the first three show, with "Show N more" for the rest.

Pasting the snippet twice still draws only one strip.