{
  "action": "Product-Zoom",
  "queryString": "",
  "locale": "default",
  "product": {},
  "slickData": {
    "arrows": false,
    "asNavFor": ".js-carousel-zoom-thumbs",
    "slidesToShow": 1,
    "responsive": [
      {
        "breakpoint": 767,
        "settings": {
          "dots": false,
          "slidesToShow": 1
        }
      }
    ]
  },
  "slickThumbData": {
    "arrows": false,
    "asNavFor": ".js-carousel-zoom-main",
    "slidesToShow": 8,
    "responsive": [
      {
        "breakpoint": 1024,
        "settings": {
          "dots": true,
          "slidesToShow": 6
        }
      },
      {
        "breakpoint": 576,
        "settings": {
          "dots": true,
          "slidesToShow": 4
        }
      }
    ]
  },
  "renderedTemplate": "<div class=\"modal-header\">\n    <div class=\"d-flex justify-content-end align-items-center w-100\">\n        <!-- Zoom icon on PDP -->\n        <button type=\"button\" class=\"c-quick-view__header__close c-quick-view__header__close--zoom pull-right\n        js-close-zoom-modal c-zoom-modal__header__close btn\" data-dismiss=\"modal\">\n            <i></i>\n            <span class=\"sr-only\">label.close</span>\n        </button>\n    </div>\n</div>\n<div class=\"modal-body\">\n    <div class=\"sr-only\">The following image has zoom and pan functionality when clicked. Use arrow keys to pan, &amp;plus; and &amp;minus; to zoom.</div>\n    <div class=\"row c-zoom-modal__primary-image w-100 m-0\">\n        \n        \n        \n    </div>\n</div>\n\n\n"
}