Compatability: Dawn 3.0 and earlier version. 

Add a quick view button with no app or external library. We will utilize Shopify's section rending API in this code. 

NOTE: If you have the latest version of Shopify 2.0 FREE themes, you have an option to have a quick view button, but features are far different to our code. See What you are buying section and demo store for more information. 

Check DEMO store here 💻. Password: made4uo

What you are buying:

• Quickview button is hide and show with hover
• Mobile friendly with small button provided
• Previous and next navigation provided for easy collection view
• Thumbnail sliders works

What makes our code better:

• We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
• We do not leave or add codes use to advertise for our website
• Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away. 

To start:

1. Go to Admin Shopify store > Themes > Actions > Edit Code

2. In Section folder, create a new section, name it "quick-view", then replace the default code with the code below.

3. We need to create another section for our template. We are using Section Rendering API from Shopify. Name this newly created section "quick-view-template." Then paste the code below.

4. Next, find the Asset folder, and create a new CSS file. Name it "quick-view." Then open the newly created file and paste the code below.

5. Next, open the global.js file under the same folder, Asset and add the code below. 

6. We need to call this quick-view in the product card. Go to Snippet folder, if you have Dawn Theme version 2.5 above, open the card-product.liquid. Find the class "card-wrapper", then paste the code, after the line.

7. Last thing, go to the theme.liquid folder on top. Then find the  {% section 'announcement-bar' %},  paste the code above it. 

That's it. You can customize the the quick-view section if you go to Theme Editor. The Section should be at the very top. (",)