How to create a simple Quick View without app usage to your Shopify store
It’s easy to create Quick View on your Shopify store. Follow the steps below to learn how.
Log in to your Shopify store. From your Shopify admin, go to Online Store > Themes. Click Actions > Edit code.
Create quickview.js file
In the Assets directory, click Add a new asset. In popup appear: click onto Create a blank file to create a new javascript file.
And the below text is content for this file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 | //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'); } }); |
Create quickview.scss file
In the Assets directory, click Add a new asset. In popup appear: click onto Create a blank file to create a new scss file.
And the below text is content for this file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 | #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; } } } |
Create quickview.liquid file
In the Snippets directory, click Add a new snippet. In popup appear: Give your snippet the name quickview and click Create snippet.
In the online code editor, paste the content from the below text.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <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> |
Edit theme.liquid file
In the Layouts folder, locate and click on your theme.liquid file to open it in the online code editor. In the online code editor, scroll down a bit until you see the closing tag. Right before the closing tag, paste the below code.
1 2 3 4 5 6 7 8 9 | {{ '//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css' | stylesheet_tag }} {{ 'quickview.scss.css' | asset_url | stylesheet_tag }} {{ 'quickview.js' | asset_url | script_tag }} <script> {% capture content %}{% include 'quickview' %}{% endcapture %} var content = {{ content | json }}; </script> |
Add Quick View button
And now you need add Quick View button. You must add this code into product loop.
1 | <div class="quick-view-button"><a class="quick-view" data-handle="{{ product.handle }}" href="javascript:void(0);">Quick View</a></div> |
Actually, each theme has a different structure. So depending on the theme you have to adjust accordingly.
If you feel too difficult, you can use one of these Shopify App.
Great information very helpful and thanks for quick support.
Thanks!
Hey Hi, Nice guide. But after implementing everything as you mentioned I’m getting the following error:
quickview.js?6069:108
Uncaught TypeError: $.fancybox is not a function
at HTMLAnchorElement. (quickview.js?6069:108)
Hi,
I just updated code for quickview.js file. Please update your file via new source-code and try again.
Greetings,
Yaaaye! It worked. Thanks alot 😀 you’re a life saver.
Hello bro where is the updated file kindly tell me fast.
Thanks!
where is the updated file..?
Hi, thanks for sharing code, it’s very helpful! But it somehow couldn’t catch the correct info for options other than color, could you maybe look into it? I wonder if there’s a way to change the radius of select box into no-radius? thank you so much!
Hi again, I found out that if the option value is more than one word (e.g. “color & shade” instead of “color”) than it will fail to capture the value. Is there a way to include more words? Thanks again.
Find this portion in quickview.js below
$(options).each(function (i, option) {
var opt = option.name;
var selectClass = ‘.option.’ + opt.toLowerCase();
$(‘.qv-product-options’).append(‘‘ + opt + ‘‘);
$(option.values).each(function (i, value) {
$(‘.option.’ + opt.toLowerCase()).append(” + value + ”);
});
});
Replace it with below…
$(options).each(function (i, option) {
var opt = option.name;
var selectClass = opt.toLowerCase();
var res = selectClass.split(/\s/).join(”);
$(‘.qv-product-options’).append(‘‘ + opt + ‘‘);
$(option.values).each(function (i, value) {
$(‘.option.’ + res).append(” + value + ”);
});
});
now that problem is solved 🙂
Hi, Implemented this into my shopify site – just not sure where to put a piece of code for it to work correctly.
We have a piece of code that only lets you view prices once you are signed in as a customer. How exactly would i put this into the code? I cannot seem to figure it out without breaking the entire thing.
Any help is appreciated.
Thanks! Olly
Hi,
I’ve put this code in my shopify site. We have a piece of code that only lets prices be seen to customers that have created an account and signed in.
How exactly would i implement this into the code as I cannot figure out how to do so?
Any help is greatly appreciated!
Thanks
Hi.. thanks for the great post.
I have added the code with following your instructions.
https://erba.co/collections/all
when i a clicking on quick view button it is showing white space..
http://prntscr.com/pm0yss
can you please fix the issue….
Hi,
You must load jQuery library before my scripts.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>Hi there,
Thanks so much for the source. Having troubles getting to work with FancyBox 3.5.7 and jQuery 2.2.3. On click, div#quickview is appended to the body, but div is empty and popup doesn’t display. No console errors either.
Appreciate any help getting to work. Cheers.
Hi
I am using this following theme
https://themes.shopify.com/themes/boundless/styles/black-white
I have 3 questions
1. Edit theme.liquid file
“In the online code editor, scroll down a bit until you see the closing tag. Right before the closing tag, paste the below code.”
Do you mean before ??? or any other tag?
2. Add Quick View button
I am really lost here. I am new to this shopify. If you dont mind, can you be bit elaborate, treat me like a school kid
– Which file to edit, and where to paste the code?
3. One of your answers to a question, you said
“You must load jQuery library before my scripts.”
Again, I am lost here, Whic file to edit? where to paste the code?
Thanks a lot in advance
I have configured everything successfully. But it can not show me product data in my Quickview here is just a button ‘ADD TO CART’ and quantity text. How can I access or show product data in my quickview.liquid ?
How do I add codes in product loop?
How can we update the count of cart on top without refreshing
There are two errors
1. jQuery is not defined
at slick.min.js:1
at slick.min.js:1
2. $ is not defined
at VM34 quickview.js:3
Hey! Thank you so much for sharing this code, it worked great. But how can I do to add variations to it
Custom variations from apps like “Best Custom Product Options
” I mean.
It’s not working for Related products.
It seems like this solution is not working anymore. Could you please provide the updated solution?
Working great. Any way to display on the popup specific product tags, using a for loop to see if the tags exist on the products, and displaying it if it does?
can we access the product metafield data on the quick view?
Could you please also make a code for color swatches?
Hi,
Product images thumbnails are not visible, how can we do that?
thanks a lot !!!
Hello, How we change the image when we select a variant ??
Example I select blue, the image will change to blue .
Hello some can help ??
if (v.featured_image.src){
var stringvariantsrc = v.featured_image.src.split(‘.jpg’)[0];
var stringvariantsrc = stringvariantsrc.split(‘.png’)[0];
var stringvariantsrc = stringvariantsrc.split(‘https://’)[1];
var pos = $(‘.qv-product-images’).find(‘img[src*=”‘+stringvariantsrc+'”]’).parent(“.slick-slide”).attr(“data-slick-index”);
$(‘.qv-product-images’).slick(‘slickGoTo’, pos,true);
}
Hi,
Where the ‘content’ is defined inside “$(‘#quick-view’).hide().html(content).css(‘opacity’, ‘1’).fadeIn(function ()”?
Thanks,
Farhan
Got it 🙂
Just one thing that’s not working as of now is “var v_inv = v.inventory_management;” when you request product json. That’s why “Sold out” or “Unavailable” does not work for product variants. Do you know the other way of getting it?
v.available?
I have the same problem any solution for that?
how i can change the select element with radio buttons and labels?
Oh yes! You can change the select element to radio buttons. You rewrite the code from line 52 in the quickview.js file. Hmm, I think you need to know programming to do that.