Intro - Stylitics/guide GitHub Wiki

Stylitics turns your product catalog into visually appealing, shoppable outfits. We offer drop in widgets and an API so you can feature these outfits on product detail pages, dedicated themed gallery pages, emails, and more.

Getting started - Identifying products

The first step is helping us understand your product data with respect to how you'd like to feature outfits.

The first part of that is deciding upon an identifier for your products.

Most clients identify their products at three levels: product, product+color, and product+color+size. While terminology differs, for consistency's sake we'll refer to these levels/identifiers as follows:

  • product: product
  • product+color: colorway
  • product+color+size: SKU

We need to choose one which will serve - for Stylitics purposes - as a unique identifier. While the only truly unique one from a client perspective is SKU, we do not recommend this one, since there is no visual difference in the product imagery for products of the same color, but different sizes. We can use SKU-level data for some other purposes - more on that later - but let's focus on the first two.

If you choose product ID as your unique identifier for Stylitics, this means that when you request outfits for a given product, you will get outfits containing that product in any color. Which color, for a given request, is not controllable in this scenario. The only scenario we'd recommend this approach for is if you are running a very limited pilot test and only wish to style/outfit the primary (landing / PDP default) color of each product.

Therefore, our default recommendation clients is to choose a colorway level identifier for products to use with Stylitics.

Getting your products into Stylitics

Ideally, you will provide Stylitics with some form of structured data representing your products (henceforth the product feed). We prefer (in order of preference) JSON, CSV, XML.

At minimum, this should provide the aforementioned ID (ideally colorway level) and the canonical url for that product. This enables Stylitics to - at additional cost, excepting the pilot phase - manually or programmatically scrape other required details such as product name, primary image, category, etc.

Please see our detailed guide for fields that would be ideal for Stylitics to receive in the product feed. See also our discussion of out-of-stock checking.

Initial client feed questionnaire

  • What field will we use for product identifier?
  • Can you provide a product feed?
  • Can you provide a sample product feed with an explanation of the fields/columns in it?
  • How will Stylitics receive the feed? (e.g., pull from URL, or client will push to us via (S)FTP or S3)
  • Will you provide a feed of only the products you want outfitted, or a superset of that?
  • If the latter, can you provide a way of identifying within the feed which products belong to the set of products to be outfitted?

Product Imagery

Stylitics' standard outfitting requires product images that are:

  • reasonably high resolution
  • front facing
  • not on model
  • transparent background
  • cropped

We have the experience and capacity to process images where these conditions aren't met by the client's available imagery, but this adds time & operational cost to onboarding and ongoing catalog maintenance.

Product Imagery questionnaire

  • Do you have not-on-model images for every product/colorway?
  • If not, is there a standard way to identify the "best" (front-facing, shows product alone vs. whole model) image on your PDPs? (This allows us to scrape these programmatically instead of manually)
  • Can you include a single, primary image URL for each colorway in your product feed?
  • If not, can we identify the primary image URL in a standard way? (by URL, column, position in multi-value array for a column like "image_urls")
  • Do you use a dynamic imagery solution like Adobe Scene7 (now Dynamic Media) or Cloudinary?
  • If so, do you require that the product image urls returned by Stylitics API responses use these URLs? (The default - since we typically do some additional processing of client imagery, like cropping and removing backgrounds - is that the images returned are hosted by Stylitics and come in a few standard, static sizes)
  • What is the largest image size that you require for a) product images and b) outfit collage images?

Next Steps

Once we have a plan for identifying and ingesting your products, we can begin implementation via our drop-in widgets (widget setup guide) or via our API (see API guide)