Skip to main content

How to Add A Quickview to Your Shopify Store

Last updated: November 21 2024

Written and researched by experts at Avada Learn more about our methodology

Adding a Quickview feature to your Shopify store can improve your customers' browsing experience. With Quickview, shoppers can get a closer look at your products without leaving the current page. 

This comprehensive guide will walk you through the steps of adding a quick view feature to your Shopify store using either the built-in theme editor, custom code, or Shopify apps. We'll also explore the benefits of quick view and address common questions to help you optimize your store's user experience.

Let’s get started!

What Is A Quick View In Shopify?

A Quick View in Shopify is a feature that allows customers to preview product details without leaving the current page. It provides a popup or overlay showing key information like product images, price, and an "Add to Cart" button, enabling shoppers to make faster purchase decisions.

Why Should You Add A Quickview To Your Store?

Shopify Quick view feature offers several benefits that can enhance your store’s performance and user experience:

  • Faster browsing: Quick view Shopify lets customers see product details in a pop-up window without leaving the collection page, making the shopping experience easier and quicker.
  • Improved UX: By eliminating the need to load a new page, you reduce waiting times and keep users engaged.
  • Increased conversion rates: The quicker a shopper can access product information, the faster they can make a purchase decision.
  • Mobile-friendly: Quickview functionality works well across devices, improving user experience on mobile and desktop alike.

How to Add A Quickview to Your Shopify Store

There are two primary methods to add a Quickview feature to your Shopify store:

Using Shopify Theme Editor

Some Shopify themes come with built-in Quickview functionality. If your theme supports it, follow these steps to enable it:

Step 1: Log in to your Shopify Admin and go to Online Store > Themes.

Log in to your Shopify Admin and go to Online Store > Themes.

Step 2: Find the theme you’re using and click Customize.

Find the theme and click Customize.

Step 3: Navigate to Theme Settings section and click Product Tiles.

Toggle the Quickview option to Enable it.

Save your changes and preview your store to make sure Quickview is working as expected.

Navigate to Theme Settings section and click Product Tiles

Tip: Not all themes support Quickview out of the box. If your theme doesn’t have this feature, you can either switch to a theme that supports it or try another method.

Using Code

If you prefer a custom solution or your theme doesn’t support Quickview, you can add this functionality by editing your theme's code. Here’s how:

Step 1: Backup Your Theme: Before making any changes, it’s crucial to duplicate your theme to avoid any errors.

Go to Online Store > Themes, click “...” Icon> Duplicate next to your current theme.

Go to Online Store > Themes, click “...” Icon> Duplicate

Step 2: In the dropdown of this icon, select Edit Code.

In the dropdown of this icon, select Edit Code

Step 3: Adding your Code

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.

{{ '//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>

Using Shopify Apps

Shopify’s app store offers a variety of apps that provide quick view functionality without any coding.

To install a quick view app, follow these steps:

Step 1: Go to the Shopify App Store and search for “Quick View.”

Go to the Shopify App Store

Step 2: Choose an app that fits your needs and click Install.

Choose an app that fits

Step 3: Follow the app’s installation instructions and customize the quick view button, layout, and behavior as needed.

Step 4: Once the app is set up, test the quick view feature to ensure it works seamlessly with your theme.

Bottom Line

Adding a quick view to your Shopify store is a great way to enhance the customer experience by simplifying the product browsing process. You can choose one of the three methods: use the Shopify Theme Editor, custom code, or third-party app, depending on what you're comfortable with.

FAQs

1. What is a Quickview feature?

A Quickview feature allows customers to preview product details in a pop-up window without leaving the current page. This helps them browse faster and make quicker purchasing decisions.

2. Can I add Quickview without coding?

Yes! Many Shopify themes come with Quickview built-in. You can easily enable it through the theme editor without any coding knowledge.

3. What if my theme doesn’t support Quickview?

If your theme doesn’t support Quickview, you can either add the functionality through custom code or install a Quickview app from the Shopify App Store.

4. Are Quickview apps free?

Some Quickview apps are free, while others may require a subscription. Always check the app's pricing before installation to find one that fits your budget.

5. Will Quickview slow down my store?

A well-implemented Quickview feature should not noticeably affect your store’s load time. However, always test your store performance after adding any new functionality to ensure it’s still running smoothly.

Related Posts:

 

Sam
linkedin
Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.