Compatibility: Compatible with any Shopify 2.0 FREE themes
If you're running a Shopify store, you know how important it is to provide your customers with an enjoyable and seamless shopping experience. One way to do this is by adding a quickview button to your product cards.
A quickview button allows customers to see a preview of a product without having to leave the current page they're on. This feature can significantly improve the user experience of your website, as it eliminates the need for customers to navigate away from their current location and wait for a new page to load.
By using Shopify's section rendering API, you can easily add a quickview button to your product cards without having to install any external libraries or apps. This means you can customize the functionality and design of the button to match your brand's aesthetic and needs.
With a quickview button, customers can easily view product information, add items to their cart, and continue shopping without interruption. By providing this feature, you're showing your customers that you value their time and want to make their shopping experience as enjoyable as possible.
It's worth noting that while some of Shopify's free 2.0 themes do offer a built-in quick view button, the features may be limited and not fully customizable to your preferences. By using our code, you'll have more control over the design and functionality of your quick view button.
Don't miss out on the opportunity to improve your store's user experience. Add a quickview button to your product cards today and watch your conversion rates soar.
Check DEMO store here 💻. Password: made4uo
What you are buying:
- Hide and show the quickview button with hover
- Mobile friendly with small button provided
- Previous and next navigation provided for easy collection view
- Thumbnail sliders available
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.
For Dawn Theme 2.5 and lower, follow same instruction above but paste the code below instead.
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. (",)