Shopify Quick View

_quickview.scss.liquid

#quick-view {
  display: flex;
  height: 100%;
  justify-content: flex-end;
  flex-wrap: wrap;
  position: relative;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  .qv-product-images {
    width: 60%;
    height: auto;
    display: inline-block;
    position: absolute;
    margin: 0 auto;
    left: 30px;
    top: 0;
    height: 100%;
  }
  .slick-list, .slick-track {
    height: calc(100% - 12px);
  }
  .slick-initialized .slick-slide {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .slick-slide {
    padding: 0 50px;
    height: 100%;
    position: relative;
    img {
      margin: 0 auto;
      max-height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      width: auto;
      height: auto;
      -webkit-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
    }
  }
  .slick-dots {
    right: auto;
    left: 50%;
    bottom: 10px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    li {
      margin: 0 8px 0 0;
      button {
        background-color: #cacaca;
        width: 12px;
        height: 12px;
      }
      &.slick-active button {
        background-color: $primary;
      }
    }
  }
  .qv-content {
    width: 36%;
    display: inline-flex;
    float: right;
    flex-direction: row;
    justify-content: space-between;
    height: calc(100% - 40px);
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    flex-wrap: wrap;
    overflow: auto;
    box-sizing: border-box;
    > * {
      width: calc(100% - 25px);
      box-sizing: border-box;
    }
  }
  .qv-product-title {
    padding-right: 20px;
    text-transform: lowercase;
    margin-bottom: 0;
    color: #575757;
  }
  .qv-product-type {
    color: #a18466;
    font-family: 'proxima-nova-semibold';
    text-transform: lowercase;
  }
  .qv-product-price, .qv-product-original-price {
    display: inline-block;
    color: #5a5a5a;
    margin-bottom: 0;
  }
  .qv-product-original-price {
    margin-left: 8px;
    text-decoration: line-through;
    color: lighten(#5a5a5a, 30%);
  }
  .option-selection-title {
    display: none;
  }
  hr {
    border-top: 1px solid $beige;
    margin: 15px 0 20px;
  }
  .quantity {
    margin-bottom: 25px;
    span {
      text-transform: lowercase;
      @include font-size(1.4);
      display: inline-block;
      min-width: 100px;
    }
    input[type="number"]{
      width: 60px;
      text-align: center;
      @include font-size(1.4);
      -moz-appearance: textfield;
      margin-left: -4px;
      padding: 4px;
      border: 1px solid #d3d3d3;
      &:focus {
        outline: none;
        border: 1px solid $red;
        display: inline-block;
      }
    }
    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button { 
      -webkit-appearance: none; 
      margin: 0; 
    }
  }
  .qv-product-options {
    > div {
      margin-bottom: 8px;
    }
    span {
      @include font-size(1.4);
      text-transform: lowercase;
      display: inline-block;
      min-width: 100px;
    }
  }
  .qv-add-button {
    display: block;
    background-color: $red;
    font-family: 'proxima-nova-semibold';
    @include font-size(1.4);
    text-transform: uppercase;
    letter-spacing: .1em;
    text-align: center;
    padding: 10px 20px;
    border: 0;
    width: 100%;
    color: #fff;
    &:hover {
      background-color: $red-hover;
    }
    &:focus {
      background-color: #3a3a3a;
      outline: none;
    }
    &:disabled {
      background-color: #ccc;
    }
  }
  .qv-add-to-cart-response {
    @include font-size(1.4);
    margin-top: 20px;
    display: none;
    font-family: 'proxima-nova-semibold';
    &.success, &.error {
      display: block;
      padding: 8px;
      border: 1px solid;
    }
    &.success {
      border-color: $green-hover;
      color: $green-hover;
      a {
        color: $primary;
        text-decoration: underline;
      }
    }
    &.error {
      border-color: $red-hover;
      color: $red-hover;
    }
  }
  .qv-product-description {
    padding: 20px 0 30px;
    @include font-size(1.45);
  }
  .view-product {
    display: inline-block;
    text-transform: uppercase;
    @include font-size(1.2);
    letter-spacing: .05em;
    font-family: 'proxima-nova-semibold';
    span {
      color: #5a5a5a;
      border-bottom: 2px solid #5a5a5a;      
    }
    &:hover {
      span {
        color: $red;
        border-bottom: 2px solid $red;
      }
    }
  }
  @media (max-width: 1200px){
    .qv-product-images, .qv-content {
      width: 50%;
    }
    .qv-content {
      padding-left: 60px;
    }
    .slick-slide {
      padding: 0;
    }
  }
  @media (max-width: 900px){
    display: block;
    height: calc(100% - 40px);
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    .qv-product-images {
      top: 0;
      left: 0;
      height: 50%;
      max-height: 350px;
      position: relative;
      width: 100%;
    }
    .slick-slide {
      position: relative;
      img {
        max-height: 300px;
        margin: 0 auto;
        position: relative;
        top: auto;
        left: auto;
        -webkit-transform: none;
        transform: none;
        height: 100%;
        width: auto;
      }
    }
    .slick-dots {
      bottom: 0;
    }
    .qv-content {
      width: 100%;
      height: auto;
      padding: 0 10px 10px 30px;
      overflow: auto;
      -webkit-transform: none;
      transform: none;
    }
    .slick-initialized .slick-slide {
      display: block;
      text-align: center;
    }
    .slick-slide img {
      width: auto;
      display: inline-block;
      max-width: 300px;
    }
  }
}

collection.liquid

{% comment %}
Add to bottom of collection.liquid
{% endcomment %}

<script>
{% capture content %}{% include 'quickview' %}{% endcapture %}
      var content = {{ content | json }};
</script>

product-grid-item.liquid

<div class="quick-view-button"><a class="quick-view" data-handle="{{ product.handle }}">Quick View</a></div>

quickview.js.liquid

var $ = require('jquery');
require('fancybox')($);

$(document).ready(function () {
  quickView();
});

function quickView() {
  $(".quick-view").click(function () {
    var product_handle = $(this).data('handle');
    $('#quick-view').addClass(product_handle);
    var collection_handle = $('.coll').data('handle');
    jQuery.getJSON('/products/' + product_handle + '.js', function (product) {
      var title = product.title;
      var type = product.type;
      var price = 0;
      var original_price = 0;
      var desc = product.description;
      var images = product.images;
      var variants = product.variants;
      var options = product.options;
      var url = '/collections/' + collection_handle + '/products/' + product_handle;
      $('.qv-product-title').text(title);
      $('.qv-product-type').text(type);
      $('.qv-product-description').html(desc);
      $('.view-product').attr('href', url);
      var imageCount = $(images).length;
      $(images).each(function (i, image) {
        if (i == imageCount - 1) {
          var image_embed = '<div><img src="' + image + '"></div>';
          image_embed = image_embed.replace('.jpg', '_800x.jpg').replace('.png', '_800x.png');
          $('.qv-product-images').append(image_embed);
          $('.qv-product-images').slick({
            'dots': true,
            'arrows': false,
            'respondTo': 'min',
            'useTransform': false
          }).css('opacity', '1');
        } else {
          image_embed = '<div><img src="' + image + '"></div>';
          image_embed = image_embed.replace('.jpg', '_800x.jpg').replace('.png', '_800x.png');
          $('.qv-product-images').append(image_embed);
        }
      });
      $(options).each(function (i, option) {
        var opt = option.name;
        var selectClass = '.option.' + opt.toLowerCase();
        $('.qv-product-options').append('<div class="option-selection-' + opt.toLowerCase() + '"><span class="option">' + opt + '</span><select class="option-' + i + ' option ' + opt.toLowerCase() + '"></select></div>');
        $(option.values).each(function (i, value) {
          $('.option.' + opt.toLowerCase()).append('<option value="' + value + '">' + value + '</option>');
        });
      });
      $(product.variants).each(function (i, v) {
        if (v.inventory_quantity == 0) {
          return true
        } else {
          price = parseInt(v.price / 100).toFixed(2);
          original_price = parseInt(v.compare_at_price / 100).toFixed(2);
          $('.qv-product-price').text('$' + price);
          if (original_price > 0) {
            $('.qv-product-original-price').text('$' + original_price).show();
          } else {
            $('.qv-product-original-price').hide();
          }
          $('select.option-0').val(v.option1);
          $('select.option-1').val(v.option2);
          $('select.option-2').val(v.option3);
          return false
        }
      });
    });
    $(document).on("change", "#quick-view select", function () {
      var selectedOptions = '';
      $('#quick-view select').each(function (i) {
        if (selectedOptions == '') {
          selectedOptions = $(this).val();
        } else {
          selectedOptions = selectedOptions + ' / ' + $(this).val();
        }
      });
      jQuery.getJSON('/products/' + product_handle + '.js', function (product) {
        $(product.variants).each(function (i, v) {
          if (v.title == selectedOptions) {
            var price = parseInt(v.price / 100).toFixed(2);
            var original_price = parseInt(v.compare_at_price / 100).toFixed(2);
            var v_qty = v.inventory_quantity;
            var v_inv = v.inventory_management;
            $('.qv-product-price').text('$' + price);
            $('.qv-product-original-price').text('$' + original_price);
            if (v_inv == null) {
              $('.qv-add-button').prop('disabled', false).val('Add to Cart');
            } else {
              if (v.inventory_quantity < 1) {
                $('.qv-add-button').prop('disabled', true).val('Sold Out');
              } else {
                $('.qv-add-button').prop('disabled', false).val('Add to Cart');
              }
            }
          }
        });
      });
    });
    $.fancybox({
      href: '#quick-view',
      maxWidth: 1040,
      maxHeight: 600,
      fitToView: true,
      width: '75%',
      height: '70%',
      autoSize: false,
      closeClick: false,
      openEffect: 'none',
      closeEffect: 'none',
      'beforeLoad': function () {
        var product_handle = $('#quick-view').attr('class');
        $(document).on("click", ".qv-add-button", function () {
          var qty = $('.qv-quantity').val();
          var selectedOptions = '';
          var var_id = '';
          $('#quick-view select').each(function (i) {
            if (selectedOptions == '') {
              selectedOptions = $(this).val();
            } else {
              selectedOptions = selectedOptions + ' / ' + $(this).val();
            }
          });
          jQuery.getJSON('/products/' + product_handle + '.js', function (product) {
            $(product.variants).each(function (i, v) {
              if (v.title == selectedOptions) {
                var_id = v.id;
                processCart();
              }
            });
          });
          function processCart() {
            jQuery.post('/cart/add.js', {
              quantity: qty,
              id: var_id
            },
              null,
              "json"
            ).done(function () {
              $('.qv-add-to-cart-response').addClass('success').html('<span>' + $('.qv-product-title').text() + ' has been added to your cart. <a href="/cart">Click here to view your cart.</a>');
            })
              .fail(function ($xhr) {
                var data = $xhr.responseJSON;
                $('.qv-add-to-cart-response').addClass('error').html('<span><b>ERROR: </b>' + data.description);
              });
          }
        });
        $('.fancybox-wrap').css('overflow', 'hidden !important');
      },
      'afterShow': function () {
        $('#quick-view').hide().html(content).css('opacity', '1').fadeIn(function () {
          $('.qv-product-images').addClass('loaded');
        });
      },
      'afterClose': function () {
        $('#quick-view').removeClass().empty();
      }
    });
  });
};

$(window).resize(function () {
  if ($('#quick-view').is(':visible')) {
    $('.qv-product-images').slick('setPosition');
  }
});

quickview.liquid

<div class="qv-product-images" style="opacity: 0"></div>
<div class="qv-content">
    <div class="holder">
        <h3 class="qv-product-title"></h3>
        <h4 class="qv-product-type"></h4>
        <h5 class="qv-product-price"></h5>
        <h5 class="qv-product-original-price"></h5>
        <hr />
        <div class="qv-add-to-cart">
            <div class="qv-product-options"></div>
            <div class="quantity">
                <span>Quantity</span>
                <input type="number" class="qv-quantity" value="1" min="1">
            </div>
            <input type="submit" class="qv-add-button" value="Add to Cart">
            <div class="qv-add-to-cart-response"></div>
        </div>
        <div class="qv-product-description"></div>
    </div>
    <a class="view-product" href=""><span>View Full Product Details</span></a>
</div>

theme.liquid

{% comment %}
Upload the Fancybox images, css, and javascript: http://fancyapps.com/fancybox/#license

CSS goes in header, JS goes in footer
{% endcomment %}

{{ 'https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css' | stylesheet_tag }}
{{ '//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js' | script_tag }}
{{ 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js' | script_tag }}

Hi, How are you doing? I'm wondering if you can direct me on how to implement this on shopify pipeline theme. Thanks

This has too many bugs.

Is it still working now?

it's not working there are so many errors

@kellyvaughn thanks for the code