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="lazy2" 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="lazy2" 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>
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>
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.
No comments:
Post a Comment