How to create a simple Quick View without app usage to your Shopify store
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.
While the QuickView feature provides customers with a faster way to check out products, the feature could become useless when added incorrectly. So it is important that you add the Quick View feature to your site properly for the best effect. You'll find the benefits of using Quick View in your Shopify store and a detailed tutorial on how to add a simple Quick View to your Shopify store without app usage in this article.
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("//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 class="lazyload" data-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 class="lazyload" data-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.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: flex;
height: 100%;
justify-content: flex-end;
flex-wrap: wrap;
position: relative;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
#quick-view .qv-product-images {
width: 60%;
height: auto;
display: inline-block;
position: absolute;
margin: 0 auto;
left: 30px;
top: 0;
height: 100%;
}
#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: 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;
}
#quick-view .qv-content > * {
width: calc(100% - 25px);
box-sizing: border-box;
}
#quick-view .qv-product-title {
padding-right: 20px;
text-transform: lowercase;
margin-bottom: 0;
color: #575757;
}
#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;
}
#quick-view .qv-product-original-price {
margin-left: 8px;
text-decoration: line-through;
color: #000;
}
#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: #f00;
text-transform: uppercase;
letter-spacing: 0.1em;
text-align: center;
padding: 10px 20px;
border: 0;
width: 100%;
color: #fff;
}
#quick-view .qv-add-button:hover {
background-color: #f00;
}
#quick-view .qv-add-button:focus {
background-color: #3a3a3a;
outline: none;
}
#quick-view .qv-add-button:disabled {
background-color: #ccc;
}
#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 {
width: 100%;
display: block;
padding: 10px;
background: #000;
color: #fff;
margin-bottom: 10px;
}
@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.
<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 </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/slick-carousel@1.8.1/slick/slick.css' | stylesheet_tag }}
{{ 'quickview.css' | asset_url | stylesheet_tag }}
{{ '//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/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>
Make your Add to card shaky
In case you want to boost your Quick view button little more, you can animate it with this small trick.
Step 1: Add CSS code
- From your Shopify admin, to to Online Store > Theme.
- Find the theme you want to edit and then click Action > Edit code.
- In the Assets section, find to CSS file (ex: theme.scss or style.scss…) and open that file in the online code editor.
- Go to end line and paste the below code
.btn-shake:hover {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
- Click Save
Step 2: Add a new class for the buttons
Go back to the code you added In the collection-template.liquid file. Replace this line of code:
<div class="quick-view-button"><a class="quick-view" data-handle="{{ product.handle }}" href="javascript:void(0);">Quick View</a></div>
With this one
<div class="quick-view-button btn-shake"><a class="quick-view" data-handle="{{ product.handle }}" href="javascript:void(0);">Quick View</a></div>
Click on Save.
This step-by-step tutorial would help you add a simple Quick View without app usage to your Shopify store. Be sure to check out our other liquid code tutorials.
Need some help optimising your site speed, contact us today for site optimisation services to get your Shopify site speed up to 90+.
Guides
- How To Create CUSTOM PRODUCT OPTIONS on Shopify 2.0
- How To Open External Links In A New Tab - Easy Shopify Tutorial
- How To Add Before And After Slider To Shopify - Easy 2022 Tutorial
- How To Add a Background Video To Shopify For Free
- How To Embed TikTok Videos To Any Shopify Page For Free
- Create Product Bundles Without The App - 2022 Easy Shopify Tutorial!
- Add Back to Top Button on Shopify Using Code: Detailed Tutorial
- How to Add A Custom Cart Icon on Shopify Using Code: Detailed Tutorial
- How to Add Breadcrumb Navigation to Your Shopify Store: DIY Tutorial Using Code
- How to Add Sales Countdown Timer to Your Shopify Store
- Cumulative Layout Shift Optimization: Causes and How to Measure It
- Ask How Customers Heard About Your Store On The Cart Page - 2022 Shopify Tutorial
- How to create a simple Quick View without app usage to your Shopify store
- Add A Multiple Currency Selector to Your Shopify Store Using Code Tutorial
- How to Create A Page of Collections on Shopify Using Code
- Show The Number of Products Left in Stock on Your Shopify Product Page
- Change the Number of Products in the Collection Page- Shopify Tutorial
- DIY Guide to Embed A YouTube Video in Shopify Product Page Tutorial
- Add a Message to the Shopify Product Pages by Using Product Tags - 2022 Easy Tutorial
- How to Add a Delivery Date Picker to Your Cart Page - Easy Step-By-Step Shopify Tutorial
- How To Create A Stunning Parallax Scrolling Section In Your Shopify Store Tutorial
- 6-step Tutorial on How to Add Wholesale To Shopify Store Without Shopify Plus
- How to Add Banner Image to Product Pages Without The App - Quick Shopify Tutorial
- How to add Hover Effect on Main Navigation Bar In Shopify
- How to Add A Gallery Page to Your Shopify Store without the App
- Disable Right-click to Protect Your Images on Shopify Using Code - Tutorial
- How to Auto Hide Sold Out Products on Shopify: DIY Tutorial
- DIY Code: How To Add Continue Shopping Button To Your Shopify Cart Page
- How to Create Custom Product Options on Shopify Without the App in 2022
- How to Select Variants By Clicking Their Images on Shopify
- How to Create a Custom Note Field on Your Shopify Cart Page
- How to Enable Custom File Upload Product Options on Shopify
- How To Show An Alternate Product Image On Your Shopify - Easy Step-By-Step Tutorial
- Step-by-Step Tutorial to Set Up Facebook Messenger Chat On Shopify Without App
- DIY Code To Add a Size Chart to Shopify Product Pages
- How To Redirect Shopify Customers After Login, Logout & Account Creation
- 4 Steps to Create a Sticky Header on Shopify: DIY Code
- How to Add Featured Product Slider To Your Shopify Store: Step-By-Step Tutorial
- Shopify Product Description Tabs: 5 easy steps to create your own collapsable descriptions
- Shopify Quick ADD TO CART Button On Collection Page Without The App
- How To Add a CUSTOM FONT To Your Shopify Store
LEARN MORE
Get ahead with the latest in e-commerce and Shopify Plus
How Headphones.com Mobile Speed Score Went From 21 to 76 In 48 Hours
How Headphones.com Mobile Speed Score Went From 21 to 76 In 48 Hours
