Require the stylesheet for the experience.

        
<link rel="stylesheet" type="text/css" href="//widget.stylitics.com/closet-essentials/v2-0/styles.css">
        
      

Require the JavaScript for the experience.

        
<script src="//widget.stylitics.com/closet-essentials/v2-0/main.js"></script>
        
      

On page load (document ready), launch the widget. In the config, the "target" parameter refers to the id of the container div where the experience should render. You must control the width of the div. We recommend a percentage width, with responsive breakpoints to determine whether it is full width (on mobile) or 70 to 80 percent of page width (tablet and desktop), with a max width around 1440px.

        
var config = {
  username: "macys",
  target: "stylitics-target",
  outfits_per_page: 9,
  carousel_content: {
    item_size: {
      height: 299,
      width: 256,
    },
    show_titles: true,
    title_position: "bottom",
    tags: [
      {"tag": "casualchic"
        "name": "Casual Chic"
        "img-url": "https://widget.stylitics.com/scratch-images/CE_Casual_Chic_static-cropped.jpg"},

      {"tag":    "glam",
        "name":    "Glam",
        "img-url": "https://widget.stylitics.com/scratch-images/CE_Glam_static-cropped.jpg"},

      {"tag": "trendsetter",
        "name": "Trendsetter",
        "img-url": "https://widget.stylitics.com/scratch-images/CE_Trendsetter_static-cropped.jpg"},

      {"tag": "minimalist",
        "name": "Minimalist",
        "img-url": "https://widget.stylitics.com/scratch-images/CE_Minimalist_static-cropped.jpg"},

      {"tag": "sporty",
        "name": "Sporty",
        "img-url": "https://widget.stylitics.com/scratch-images/CE_Sporty_static-cropped.jpg"},
    ],
  },
}

closet_essentials.core.start(config);

        
      

You can customize the responsive behavior of the carousel (number of items shown):

        
/* These are the default settings
carousel_opts: {
  default_number_of_columns: 5
  responsive: {
    "1000": {cols: 5},
    "769": {cols: 3},
    "550": {cols: 2}
  }
}
*/

var config = {
  // ...

  carousel_opts: {
    default_number_of_columns: 7
    responsive: {
      "1200": {cols: 6},
      "900": {cols: 5},
      "550": {cols: 3}
    }
  }

  // ...
}