Product

Default

<div class="product">
  <figure class="product-image">
    <a href="#!">
      <img src="path/to/image" alt="Image">
    </a>
  </figure>
  <div class="product-meta">
    <h3 class="product-title"><a href="#!">Fawn Wool / Natural Mammoth Chair </a></h3>
    <div class="product-price">
      <span>$2,268</span>
      <span class="product-action">
        <a href="#!">Add to cart</a>
      </span>
    </div>
    <a href="#!" class="product-like"></a>
  </div>
</div>

Image on Hover

<div class="product">
  <figure class="product-image">
    <a href="#!">
      <img src="path/to/image" alt="Image">
      <img src="path/to/image" alt="Image">
    </a>
  </figure>
  <div class="product-meta">
    <h3 class="product-title"><a href="#!">Red Analog Magazine Rack</a></h3>
    <div class="product-price">
      <span>$120</span>
      <span class="product-action">
        <a href="#!">Add to cart</a>
      </span>
    </div>
    <a href="#!" class="product-like"></a>
  </div>
</div>

Carousel

<div class="product">
  <figure class="product-image">
    <div class="owl-carousel" data-nav="true" data-loop="true">
      <a href="#!">
        <img src="path/to/image" alt="Image">
      </a>
      <a href="#!">
        <img src="path/to/image" alt="Image">
      </a>
      <a href="#!">
        <img src="path/to/image" alt="Image">
      </a>
    </div>
  </figure>
  <div class="product-meta">
    <h3 class="product-title"><a href="#!">Dark Stained NY11 Dining Chair</a></h3>
    <div class="product-price">
      <span>$504</span>
      <span class="product-action">
        <a href="#!">Add to cart</a>
      </span>
    </div>
    <a href="#!" class="product-like"></a>
  </div>
</div>

Promo Banner

<span class="product-promo">-25%</span>
<span class="product-promo bg-blue">LOW</span>
<span class="product-promo bg-red">SALE</span>
Should be placed inside:
<figure class="product-image">