How to Add A Quickview to Shopify Store

Hailey
Hailey

Share:

Quickview is a popular e-commerce feature used by about half of the top 50 U.S. e-commerce websites, according to Baymard. However, although this is a feature you see a lot of, but if added incorrectly, it will become useless. You need to add Quickview properly to get the best effect.

What you shouldn’t do is automatically open a quick view when someone goes through the product. This results in only about 8.1% of customers interacting with a quick view. Below is a detailed tutorial on how to add a Quickview to Shopify store to help you do it properly and take advantage of the great effect of this feature.

Related Posts:*

How To Add A Quickview To Shopify Store

Why should we add a “Quick view” feature to the eCommerce store?

How To Add A Quickview To Shopify Store

One of the key secrets of a successful shop owner is knowing how to please customers. In this article, I will guide you quickly and simply, helping you save customers time while ensuring your benefits. Using the Quickview feature is a wise choice.

First, this option will help your customers quickly understand the basic and necessary information about the product. Thanks to this, they can quickly decide to buy the product by adding it to their cart. They will find it convenient to read brief and informative information instead of a lengthy piece of information. Besides, your website can eliminate many obstacles, including clicks. Your customers also don’t need to refresh the page, so they can access product details quickly.

Second, Quickview brings key benefits to make your store more optimal. Such as reducing server load and expedites shopping as explained above. In addition, you can display interesting details such as discount deals.

Finally, you should note the following main ideas in a Quickview to ensure you implement it in the best possible way at your e-commerce store:

How To Add A Quickview To Shopify Store

  • Keep it short and simple. Trying to add too many product details to Quickview will make it messy and confusing. Therefore, with a small space, you need to organize the information properly.
  • You need to call for clear action, avoid confusion in using words or sentence structure.
  • Include a link to the full product page.
  • Include the Add to cart button in the featured position.
  • Emphasize product images. Note the product image needs to be larger than any other information.

In general, Quickview is a feature that brings many benefits. It is predicted to be a standard in website usability. Therefore, you need to take good care of it.

Add a “Quick view” feature with code

There are two ways you can add Quickview to your Shopify store simply and quickly. One of them is the add a “Quick view” feature with code. Using the code is no longer complicated as now you just need to copy the code we have prepared and pasted it according to the instructions. Let go ahead.

  • First of all, you need to make sure that you’ve logged in your Shopify account and go to the Online Store section.

  • Then, click on Themes to view a list including all of your themes. Select the theme that you want to add a quick view feature.

click on Themes

  • Tap on Actions and click Edit code in the drop-down list

Edit code

After you’ve done the above steps, you can choose to add a Quickview feature by using one of the following codes.

Using NodeJS

In the ` Assets field, tap on Add a new asset. A dialog will appear. Make sure to click Create a blank file. Then, name the file quickview and choose the file format .js. Click Add asset`.

Copy the following code and paste it in the file you’ve created.


//Quick View
 
$(document).ready(function () {
 $.getScript("//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js").done(function() {
   quickView();
 });
});
 
function quickView() {
 $(".quick-view").click(function () {
   if ($('#quick-view').length == 0){$("body").append('<div id="quick-view"></div>');}
   var product_handle = $(this).data('handle');
   $('#quick-view').addClass(product_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 = '/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': false,
           '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) {
         $('.qv-add-button').prop('disabled', true).val('Sold Out');
         $('.qv-add-to-cart').hide();
         $('.qv-product-price').text('Sold Out').show();
         return true
       } else {
         price = parseFloat(v.price / 100).toFixed(2);
         original_price = parseFloat(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 = parseFloat(v.price / 100).toFixed(2);
           var original_price = parseFloat(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');
 }
});

  • Tap on Save to finish.

Using CSS

  • In the ` Assets field, tap on Add a new asset. A dialog will appear. Make sure to click Create a blank file. Then, name the file quickview and choose the file format .scss.liquid. Click Add asset`.

  • Copy the following code and paste it in the file you’ve created.


#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: #ff0000;
     }
   }
 }
 .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: #000;
 }
 .option-selection-title {
   display: none;
 }
 hr {
   border-top: 1px solid #f5f5dc;
   margin: 15px 0 20px;
 }
 .quantity {
   margin-bottom: 25px;
   span {
     text-transform: lowercase;
     display: inline-block;
     min-width: 100px;
   }
   input[type="number"]{
     width: 60px;
     text-align: center;
     -moz-appearance: textfield;
     margin-left: -4px;
     padding: 4px;
     border: 1px solid #d3d3d3;
     &:focus {
       outline: none;
       border: 1px solid #ff0000;
       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 {
     text-transform: lowercase;
     display: inline-block;
     min-width: 100px;
   }
 }
 .qv-add-button {
   display: block;
   background-color: #ff0000;
   text-transform: uppercase;
   letter-spacing: .1em;
   text-align: center;
   padding: 10px 20px;
   border: 0;
   width: 100%;
   color: #fff;
   &:hover {
     background-color: #ff0000;
   }
   &:focus {
     background-color: #3a3a3a;
     outline: none;
   }
   &:disabled {
     background-color: #ccc;
   }
 }
 .qv-add-to-cart-response {
   margin-top: 20px;
   display: none;
   font-family: 'proxima-nova-semibold';
   &.success, &.error {
     display: block;
     padding: 8px;
     border: 1px solid;
   }
   &.success {
     border-color: #008000;
     color: #008000;
     a {
       color: #000;
       text-decoration: underline;
     }
   }
   &.error {
     border-color: #ff0000;
     color:#ff0000;
   }
 }
 .qv-product-description {
   padding: 20px 0 30px;
 }
 .view-product {
   display: inline-block;
   text-transform: uppercase;
   letter-spacing: .05em;
   font-family: 'proxima-nova-semibold';
   span {
     color: #5a5a5a;
     border-bottom: 2px solid #5a5a5a;     
   }
   &:hover {
     span {
       color: #ff0000;
       border-bottom: 2px solid #ff0000;
     }
   }
 }
 @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;
   }
 }
}

Tap on Save to finish.

Using Liquid

  • In the ` Snippets field, tap on Add a new snippet. A dialog will appear. Then, name the file quickview. Click Create snippet`.

  • Copy the following code and paste it in the file you’ve created.


<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>

  • Tap on Save to finish.

Edit theme.liquid file

From the Layouts directory, open your theme.liquid file and paste the following code right before the closing tag.

theme.liquid


{{ '//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css' | stylesheet_tag }}
{{ '//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css' | stylesheet_tag }}
{{ 'quickview.scss.css' | asset_url | stylesheet_tag }}
{{ '//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js' | script_tag }}
{{ 'quickview.js' | asset_url | script_tag }}
<script>
 {% capture content %}{% include 'quickview' %}{% endcapture %}
 var content = {{ content | json }};
</script>

Add “Quick view” button

In this section, you can add Quickview button by adding the following code into product loop.


<div class="quick-view-button"><a class="quick-view" data-handle="{{ product.handle }}" href="javascript:void(0);">Quick View</a></div>

You should depend on the theme you are using to adjust accordingly. If it’s difficult, you can move to the next section to find a powerful supporter which is a suitable app.

Add “Quick view” feature with apps

How To Add A Quickview To Shopify Store

Technology and technology business trends are growing. As a shop owner, you will definitely need a lot of work to make sure your e-commerce store runs smoothly and grows better. Therefore, these applications will be a great tool to help you feel more relieved. With the Quickview feature - one of the important and beneficial features mentioned above, try to experience a great application. It will help you to be able to add this feature to your store effortlessly and effectively.

Let visit our post: 7 Best Quick view Apps for Shopify with key widgets and reasonable prices (including free ones) , you will definitely be able to make a great choice and feel satisfied.

Final words

In conclusion, we found Quickview to be a necessary feature and could be considered indispensable in the future of a growing e-commerce business. Therefore, this article has included effective ways including using code and using the application so you can add a Quickview To Shopify Store. Hopefully, you can take advantage of this awesome feature in the best way.

Themes

Shopify Theme Detector- Find out what Shopify theme a website is using Build a Shopify theme from scratch About Us page templates & examples Install Shopify theme Shopify blog featured image size Add Products to Drop-down Menu in Shopify Add Sliders in Shopify To Add A Quickview to Shopify Store To add affiliate links to your Shopify store How to Add Fonts to Shopify Theme Add About us page in Shopify Remove Powered by Shopify from your Shopify store Create a Landing Page Backup Shopify theme What Programming Language Does Shopify use Put Shopify store Under Construction Edit Checkout Page In Shopify Add Adsense to Shopify Change Shopify theme Remove Shopify Payment Icons from Store Footer Shopify Payment Icons Add a Logo to Shopify Store on all page Customize Shopify Themes Add Shop Now Button in Shopify Store Edit HTML Code Add Social Media Icons on Shopify store Edit Theme Code Change Language in Themes Register a Google Maps API Key Add Favicon Create Translation for Theme Choose Language for Theme Add Alt Text to Theme Image Edit the Code Templates for Password Page Hide Store Name on Password Page Hide Footer on Password Page Remove Content From Dynamic Section Add Google Maps API Key to Theme Edit Password Page Settings Remove Password Protection From Online Store Show Dynamic Checkout Buttons For Some Products but Not for Others Publish Themes from Theme Editor Publish Theme from Admin Add Password Set the Social Sharing Image Remove Dynamic Sections Rearrange Dynamic Sections Hide Dynamic Sections Add Dynamic Sections Add Google Translate Widget


Hailey
About Author: Hailey
I'm a detail-oriented, honest and hard-working of Shopify Expert, ready to work with you to find solutions to help you start your business or grow it. We offer fast deliveries without compromising quality. Fast and effective!
Recommend for you
Image Description
SEO Suite [FREE]

Auto-optimize website elements and structure in one-click.

Learn more
proofo
Proofo - Social Proof [FREE]

Use Social proof to boost sales

Learn more
Image Description
Size Chart [FREE]

Stunning size guide for great shopping experience

Learn more
Image Description
Free Shipping Bar [FREE]

Increase customers’ shopping cart size with free shipping offer

Learn more

Comments for To Add A Quickview to Shopify Store



Subscribe

Stay in the know

Get special offers on the latest news from AVADA.

40k subscribers has been joined!

Earn $10 in reward now!

comment
iphone
go up