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

Enercos - Single Product eCommerce Shopify Theme

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

You may also like...

8 Responses

  1. Mulik says:

    Great information very helpful and thanks for quick support.

    Thanks!

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

  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

Leave a Reply

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