Create a simple Quick View Without app usage to your Shopify store
Rameshwar Sah
Shopify Solution Specialist | Expert in Shopify Development, Customizations, and App Integrations | Helping Businesses Thrive Online
Quickview has become a popular e-commerce feature used by a large number of e-commerce stores. Using Quickview, site users can see product details and images through an overlay window while on a product listing page (PLP). This way, they can now see all the details of a product without having to clock on it.?
Benefits of Using Quick View In Your Shopify Store
By adding the Quick View option to your Shopify store, there are several benefits to gain. The first being that customers can now easily find basic and necessary information about products they are interested in. They can now make a quick decision on whether to buy this product by adding it to their cart or whether to find something else. Using the Quick View feature captures customers' attention, giving them smaller but detailed information about your store's products and removing obstacles preventing them from having to reload the site.
With the QuickView feature, your store is even more optimized as it reduces server load and?increases?checkout rates.?
Creating a Simple Quick View without App Usage on Shopify
Creating a simple Quick View without app usage on Shopify has never been easier; all you need to do is follow our step-by-step tutorial. Start by:
Logging 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 click onto Create a blank file to create a new javascript file.
Add the following code into the newly made quickview.js file:
//Quick View
$(document).ready(function () {
$.getScript("https://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': true,
'respondTo': 'min',
'useTransform': true
}).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',
fitToView: false,
width: '100%',
height: '50%',
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.css file
In the Assets directory, click Add a new asset. In the popup click Create a blank file to create a new css file.
Add the following code into the newly made quickview.css.liquid file:
#quick-view {display: block !important;height: 100vh;justify-content: center;flex-wrap: unset;padding: 0;margin: 0;overflow: hidden;-ms-overflow-style: -ms-autohiding-scrollbar;width: 100%;}
#quick-view .qv-product-images {width: 100%;height: auto;display: block;margin: 0;height: 50%;float: left;}
#quick-view .slick-prev {left: 0 !important;}
#quick-view .slick-next {right: 0 !important;}
#quick-view .slick-list, #quick-view .slick-track {height: calc(100% - 12px);}
#quick-view .slick-initialized .slick-slide {display: flex;flex-direction: column;justify-content: center;}
#quick-view .slick-slide {padding: 0 50px;height: 100%;position: relative;}
#quick-view .slick-slide 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%);}
#quick-view .slick-dots {right: auto;left: 50%;bottom: 10px;-webkit-transform: translateX(-50%);transform: translateX(-50%);}
#quick-view .slick-dots li {margin: 0 8px 0 0;}
#quick-view .slick-dots li button {background-color: #cacaca;width: 12px;height: 12px;}
#quick-view .slick-dots li.slick-active button {background-color: #f00;}
#quick-view .qv-content {width: 100%;display: block;float: left;}
#quick-view .qv-content>* {width: 100%;box-sizing: border-box;font-size: 14px;}
#quick-view .qv-product-title {text-transform: capitalize;color: #393939;font-size: 16px;text-align: center;width: 100%;}
.qv-add-to-cart {display: flex;width: 100%; margin: 20px 0 0 0;}
.qv-product-options {width: 100%;}
.quantity {width: 100%;}
#quick-view .qv-product-type {color: #a18466;font-family: 'proxima-nova-semibold';text-transform: lowercase;}
#quick-view .qv-product-price,#quick-view .qv-product-original-price {display: inline-block;color: #5a5a5a;margin-bottom: 0; font-weight: 500;font-size: 16px;}
#quick-view .qv-product-original-price {margin-left: 8px;text-decoration: line-through;color: #c0c0c0;}
#quick-view .option-selection-title {display: none;}
#quick-view hr {border-top: 1px solid #f5f5dc;margin: 15px 0 20px;}
#quick-view .quantity {margin-bottom: 25px;}
#quick-view .quantity span {text-transform: lowercase;display: inline-block;min-width: 100px;}
#quick-view .quantity input[type="number"] {width: 60px;text-align: center;-moz-appearance: textfield;margin-left: -4px;padding: 4px;border: 1px solid #d3d3d3;}
#quick-view .quantity input[type="number"]:focus {outline: none;border: 1px solid #f00;display: inline-block;}
#quick-view .quantity input[type=number]::-webkit-inner-spin-button,#quick-view .quantity input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none;margin: 0;}
#quick-view .qv-product-options>div {margin-bottom: 8px;}
#quick-view .qv-product-options span {text-transform: lowercase;display: inline-block;min-width: 100px;}
#quick-view .qv-add-button {display: block;background-color: #2a2828;text-transform: uppercase;letter-spacing: .1em;text-align: center;padding: 10px 20px;border-radius: 15px;width: 100%;color: #fff;margin: 10px 0 0 0;}
#quick-view .qv-add-button:hover {background-color: #000;}
#quick-view .qv-add-button:focus {background-color: #3a3a3a;outline: none;}
#quick-view .qv-add-button:disabled {background-color: #ccc;}
.qv-add-to-cart select, .qv-add-to-cart input{border: 1px solid #ccc;border-radius: 10px;width: 100%!important;height:40px;font-size: 13px;color: #3d3d3d;margin: 5px 0 0 0;}
.view_product{ width: 100%;text-align: center;color: #404184;text-decoration: none;font-style: normal;font-weight: 400;text-transform: uppercase;margin-bottom: 14px;display: flex;justify-content: center;font-size: 14px;}
#quick-view .qv-add-to-cart-response {margin-top: 20px;display: none;font-family: 'proxima-nova-semibold';}
.qv-add-to-cart-response.success,.qv-add-to-cart-response.error {display: block;padding: 8px;border: 1px solid;}
.qv-add-to-cart-response.success {border-color: #008000;color: #008000;}
.qv-add-to-cart-response.success a {color: #000;text-decoration: underline;}
#quick-view .qv-add-to-cart-response.error {border-color: #f00;color: #f00;}
.qv-product-description {padding: 20px 0 30px;}
.view-product {display: inline-block;text-transform: uppercase;letter-spacing: 0.05em;font-family: 'proxima-nova-semibold';}
.view-product span {color: #5a5a5a;border-bottom: 2px solid #5a5a5a;}
.view-product:hover span {color: #f00;border-bottom: 2px solid #f00;}
.quick-view-button {text-align: center;}
.quick-view-button a {
display: flex;padding: 12px !important;justify-content: center;align-items: flex-start;gap: 10px;color: #404184;font-size: 15px;font-style: normal;font-weight: 500;line-height: 22px;border-radius: 50px;border: 1.5px solid #b1b3e3;transition: all 0.2s ease-in-out;margin-top: 16px;width: 100%;background: #fff;text-transform: uppercase;}
.quick-view-button a:hover{background-color:#b1b3e3}
@media (max-width: 1200px) {
#quick-view .qv-product-images, #quick-view .qv-content {width: 50%;}
#quick-view .qv-content {padding-left: 60px;}
.slick-slide {padding: 0;}
}
@media (max-width: 900px) {
#quick-view {display: block;height: calc(100% - 40px);-webkit-transform: translateY(20px);transform: translateY(20px);}
#quick-view .qv-product-images {top: 0;left: 0;height: 50%;max-height: 350px;position: relative;width: 100%;}
#quick-view .slick-slide {position: relative;}
#quick-view .slick-slide img {width: auto;display: inline-block;max-width: 300px;}
#quick-view .slick-slide img {max-height: 300px;margin: 0 auto;position: relative;top: auto;left: auto;-webkit-transform: none;transform: none;height: 100%;width: auto;}
#quick-view .slick-dots {bottom: 0;}
#quick-view .qv-content {width: 100%;height: auto;padding: 0 10px 10px 30px;overflow: auto;-webkit-transform: none;transform: none;}
#quick-view .slick-initialized .slick-slide {display: block;text-align: center;}
}
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.
<h3 class="qv-product-title"></h3>
<div class="qv-product-images" style="opacity: 0"></div>
<div class="qv-content">
<div class="holder">
<h4 class="qv-product-type"></h4>
<h5 class="qv-product-price"></h5>
<h5 class="qv-product-original-price"></h5>
<div class="qv-add-to-cart">
<div class="qv-product-options"></div>
{% comment %}
<div class="quantity">
<span>Quantity</span>
<input type="number" class="qv-quantity" value="1" min="1">
</div>
{% endcomment %}
<div class="qv-add-to-cart-response"></div>
</div>
<a class="view_product" href="{{ product.url | within: collection }}"><span>View Product Details</span></a>
<input type="submit" class="qv-add-button" value="Add to Cart">
<div class="qv-product-description"></div>
</div>
</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 </head> tag. Right before the closing tag, paste the below code.
{{ '//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.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
And now you need add Quick View button. You must add this code inside grid item. Go to the sections directory and choose collections-template.liquid. Find this line????
<li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
And paste the following code on a new line right below it
<div class="quick-view-button"><a class="quick-view" data-handle="{{ product.handle }}" href="javascript:void(0);">Quick View</a></div>
In case you want to change or translate the Quick View button, you will do it here. Replace "Quick View" with the text you want.
In case this is not working
In case your Quick View button is not working, probably JQuery is not installed on your theme. Go to the theme.liquid in the layouts folder and add the following line into the head tag.?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>