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.

        

      //optional
      var callBack = function(arg) {console.log("callback executed", arg)}

      var config = {
        username: "demo",
        target: "stylitics-target",
        outfits_per_page: 6,
        onload_callback: callBack,
        carousel_content: {
          show_titles: true,
          title_position: "bottom",
          item_size: {
            height: 150,
            width: 150
          },
          item_numbers: ["425120002",
            "873970012",
            "550665002",
            "518196002",
            "287018072",
            "493006002"],
          fallback_item_numbers: ["678755002", "493538012"],
        },
      }

      closet_essentials.core.start(config);