Ecommerce product

{{widget('ecomproduct', 'singleproduct', {})|raw}}

<div id="page-zones__main-widgets__ecomproductWidget" data-name="ecomproduct" class="widget  widget--zone-widget">
  <div class="bk-ecomproduct ecomproduct widget__ecomproduct">
    <textarea name="product" style="display: none !important;" hidden>...</textarea>
    <article class="product-article  product__product-article">
      <div class="product-images  product__product-images">
        <div class="product-image  product__product-image">
          <a class="image-link  product__image-link js-ecom-product-image-wrap" href="#">
          <img class="image image--current  product__image js-ecom-product-preview-image" src="//placehold.it/2250x800" alt="Donec id elit non sapien tincidunt">
          </a>
        </div>
        <ul class="product-gallery  product__product-gallery">
          <li class="gallery-item  product__gallery-item">
            <a class="image-button  product__image-button js-ecom-product-image-wrap">
              <img class="image  image--thumb  product__image" src="//placehold.it/2250x800" alt="Donec id elit non sapien tincidunt">
            </a>
          </li>
          <li class="gallery-item  product__gallery-item">
            <a class="image-button  product__image-button js-ecom-product-image-wrap">
              <img class="image  image--thumb  product__image" src="//placehold.it/300x100" alt="Donec id elit non sapien tincidunt">
            </a>
          </li>
          <li class="gallery-item  product__gallery-item">
            <a class="image-button  product__image-button js-ecom-product-image-wrap">
              <img class="image  image--thumb  product__image" src="//placehold.it/250x250" alt="Donec id elit non sapien tincidunt">
            </a>
          </li>
        </ul>
      </div>
      <div class="product-content  product__product-content">
        <header class="product-header  product__product-header">
          <h1 class="product-title  product__product-title">Donec id elit non sapien tincidunt</h1>
          <div class="message message-information product-availability product-availability--unavailable product-article__message">
            <p>Currently unavailable</p>
          </div>
        </header>
        <div class="product-body  product__product-body">
          <p class="product-description  product__product-description">Donec id elit non sapien tincidunt pellentesque vitae lacinia quam. Maecenas id ipsum in est sagittis porttitor. Suspendisse potenti. Nullam dictum massa augue, at aliquam purus mattis non. Aliquam ac sagittis elit.</p>
        </div>
        <div class="product-actions  product__product-actions">
          <form class="form  product__form">
            <fieldset class="fieldset  product__fieldset">
              <legend class="legend  product__legend">Product Options</legend>
              <div class="form-body  product__form-body">
                <div class="form-group  product__form-group">
                  <label class="label  label--variation  product__label" for="page-zones__main-widgets__ecomproductWidget__product__variation-Colour">Colour</label>
                  <div class="select-wrap  product__select-wrap">
                    <select class="select  select--variation  product__select" id="page-zones__main-widgets__ecomproductWidget__product__variation-Colour" name="Colour">
                      <option selected>Red</option>
                    </select>
                  </div>
                </div>
              </div>
            </fieldset>
            <div class="form-group  product__form-group">
              <input class="button  icon  icon--add  button--submit  product__input js-ecom-product-add-to-cart-btn" type="submit" value="Add to basket" data-ref="" disabled>
            </div>
          </form>
          <div class="view-basket-wrap  product__view-basket-wrap js-ecom-product-go-to-checkout-btn-wrapper">
            <a class="button  icon  icon--basket  product__button ecom-product-go-to-checkout-btn" href="/store/cart">View basket</a>
          </div>
        </div>
        <div class="product-attributes  product__product-attributes">
          <p class="product-category  product__product-category">
            <span class="product-attribute-title  product___product-attribute-title">Category: </span><a class="category-link  product__category-link" href="/store?productlist-categories=">skirt</a>
          </p>
          <div class="product-tags  product__product-tags">
            <p class="tags-title  product__tags-title">
              <span class="product-attribute-title  product___product-attribute-title">Tags</span>
            </p>
            <ul class="tag-list  product__tag-list">
              <li class="tag-item  product__tag-item">
                <a class="tag-link  product__tag-link" href="/store?productlist-tags=stripes">stripes</a>
              </li>
              <li class="tag-item  product__tag-item">
                <a class="tag-link  product__tag-link" href="/store?productlist-tags=black-and-white">black and white</a>
              </li>
              <li class="tag-item  product__tag-item">
                <a class="tag-link  product__tag-link" href="/store?productlist-tags=knee-length">knee length</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </article>
  </div>
</div>