How to Add A Quickview to Your Shopify Store
Last updated: November 21 2024
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.
Step 2: Find the theme you’re using 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.
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.
Step 2: 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.”
Step 2: Choose an app that fits your needs and click Install.
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:
- How to Add Social Media Icons on Shopify store?
- How to Add About Us Page on Shopify?
- Change Language in Themes Shopify