How to create a simple Quick View without app usage to your Shopify store

Hura Product Showcase Builder

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.

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.

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.

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.

Add Quick View button

And now you need add Quick View button. You must add this code into product loop.

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.

  1. Quick View by Secomapp
  2. Quick View by WebContrive
  3. Smart Quick View
Hura Theme Blocks

You may also like...

38 Responses

  1. Mulik says:

    Great information very helpful and thanks for quick support.

    Thanks!

  2. Ahsan Kamal says:

    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)

  3. Hsien says:

    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!

    • Hsien says:

      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.

      • Shamim says:

        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 🙂

  4. Olly says:

    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

  5. Olly says:

    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

  6. Md. Nazmul Hassan says:

    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….

    • Kiet Huynh says:

      Hi,
      You must load jQuery library before my scripts.
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

  7. Band Design says:

    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.

  8. Kishore says:

    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

  9. MD Shuvo says:

    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 ?

  10. Varteq Singh says:

    How do I add codes in product loop?

  11. Mat Mel says:

    How can we update the count of cart on top without refreshing

  12. Tauseef Ahmad says:

    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

  13. Maria Ferraro says:

    Hey! Thank you so much for sharing this code, it worked great. But how can I do to add variations to it

  14. Rajesh says:

    It’s not working for Related products.

  15. Vishi says:

    It seems like this solution is not working anymore. Could you please provide the updated solution?

  16. LG says:

    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?

  17. Navin says:

    can we access the product metafield data on the quick view?

  18. Vishi Sood says:

    Could you please also make a code for color swatches?

  19. seema says:

    Hi,
    Product images thumbnails are not visible, how can we do that?

  20. naresh says:

    thanks a lot !!!

  21. carlvic says:

    Hello, How we change the image when we select a variant ??

    Example I select blue, the image will change to blue .

    • carlvic says:

      Hello some can help ??

      • Mario says:

        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);
        }

  22. Farhan Khan says:

    Hi,

    Where the ‘content’ is defined inside “$(‘#quick-view’).hide().html(content).css(‘opacity’, ‘1’).fadeIn(function ()”?

    Thanks,
    Farhan

  23. Sohil says:

    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?

  24. mehmood says:

    how i can change the select element with radio buttons and labels?

    • Kiet Huynh says:

      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.

Leave a Reply

Your email address will not be published. Required fields are marked *