Mix & Match → Stacked Carousels + Modal

Add mix & match modal styles

        #widget { position: absolute; top: 0; left: 0; width: 100vw;} 
      

        <link rel="stylesheet" type="text/css" href="//widget.stylitics.com/mnm-modal/css/style.css">
      

Require the PDP outfits widget script

        <script src="//widget.stylitics.com/v2/widget.js"></script>
      

Require the mix & match widget script

        
          <script src="//widget.stylitics.com/mnm-modal/js/main.js"></script>
        
      

Set configuration options and initialize the widgets once your target divs are on the page.

        function initMultiMnM(){

  // 'widget' in the arg refers to the id of the MnM target div
  var mnm1 = new TapToSwap('widget');

  mnm1.initMultipleInstance({
    username: 'demo',
  });

  var outfitsWidget1Settings = {
    api: {
      total: 9,
      with_item_coords: true,
      tags: "leatherjacket_gallery",
    },
    display: {
      carouselWrap: false,
      cols: 3
    },
    onOutfitClick: function() {
      //must be present here but will be overwritten
      return true;
    }
  };

  var outfitsWidget1 = new StyliticsWidget(
    "demo",
    "leatherjacket_gallery",
    outfitsWidget1Settings
  );

  var mnm1Settings = {
    hideBrandSwapModal: true,
    hideBrandItemList: true,
    outfitsWidgetInstance: outfitsWidget1
  }

  //overwrite onOutfitClick now that outfits widget is instantiated
  outfitsWidget1.opts.onOutfitClick = function(outfit){
    mnm1.init(mnm1Settings, outfit)
  }


  // 'widget' in the arg refers to the id of the MnM target div
  var mnm2 = new TapToSwap('widget');

  mnm2.initMultipleInstance({
    username: 'demo',
  });

  var outfitsWidget2Settings = {
    api: {
      total: 9,
      with_item_coords: true,
      tags: "sweater_gallery",
    },
    display: {
      carouselWrap: false,
      cols: 3
    },
    onOutfitClick: function() {
      //must be present but will be overwritten
      return true;
    }
  };

  var outfitsWidget2 = new StyliticsWidget(
    "demo",
    "sweater_gallery",
    outfitsWidget2Settings
  );

  var mnm2Settings = {
    hideBrandSwapModal: true,
    hideBrandItemList: true,
    outfitsWidgetInstance: outfitsWidget2
  }

  //overwrite onOutfitClick now that outfits widget is instantiated
  outfitsWidget2.opts.onOutfitClick = function(outfit){
    mnm2.init(mnm2Settings, outfit)
  }


  ///////

  outfitsWidget1.load();
  outfitsWidget2.load();



}

window.initMultiMnM = initMultiMnM;

//call this when DOM is ready:
// initMultiMnM();