If you are building an e-commerce website and want to add a quick view of product on the product listing page, then keep your close attention in this post as I am going to share how to create product quick view popup using HTML CSS Bootstrap.
As per the survey, the product Quick view increased 10% to 15% of your sale. Follow the below steps to create product quick view popup using HTML, CSS, and Bootstrap framework.
Step 1) Include the below JS & CSS file inside the HEAD TAG.
|
1 2 3 4 |
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> |
Step 2) Add the HTML code in your web page after the BODY TAG start.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 |
<div class="container"> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <img src="Apple_iPhone6_Reuters.jpg" alt="" class="img-responsive"> <div class="caption"> <h4 class="pull-right">$700.99</h4> <h4><a href="#">Mobile Product</a></h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div> <div class="ratings"> <p> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> (15 reviews) </p> </div> <div class="space-ten"></div> <div class="btn-ground text-center"> <button type="button" class="btn btn-primary"><i class="fa fa-shopping-cart"></i> Add To Cart</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#product_view"><i class="fa fa-search"></i> Quick View</button> </div> <div class="space-ten"></div> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="Apple_iPhone6_Reuters.jpg" alt="" class="img-responsive"> <div class="caption"> <h4 class="pull-right">$700.99</h4> <h4><a href="#">Mobile Product</a></h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div> <div class="ratings"> <p> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> (15 reviews) </p> </div> <div class="space-ten"></div> <div class="btn-ground text-center"> <button type="button" class="btn btn-primary"><i class="fa fa-shopping-cart"></i> Add To Cart</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#product_view"><i class="fa fa-search"></i> Quick View</button> </div> <div class="space-ten"></div> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="Apple_iPhone6_Reuters.jpg" alt="" class="img-responsive"> <div class="caption"> <h4 class="pull-right">$700.99</h4> <h4><a href= "#">Mobile Product</a></h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div> <div class="ratings"> <p> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> (15 reviews) </p> </div> <div class="space-ten"></div> <div class="btn-ground text-center"> <button type="button" class="btn btn-primary"><i class="fa fa-shopping-cart"></i> Add To Cart</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#product_view"><i class="fa fa-search"></i> Quick View</button> </div> <div class="space-ten"></div> </div> </div> </div> </div> <div class="modal fade product_view" id="product_view"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <a href="#" data-dismiss="modal" class="class pull-right"><span class="glyphicon glyphicon-remove"></span></a> <h3 class="modal-title">HTML5 is a markup language</h3> </div> <div class="modal-body"> <div class="row"> <div class="col-md-6 product_img"> <img src="5613060_sd.jpg" class="img-responsive"> </div> <div class="col-md-6 product_content"> <h4>Product Id: <span>51526</span></h4> <div class="rating"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> (10 reviews) </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <h3 class="cost"><span class="glyphicon glyphicon-usd"></span> 75.00 <small class="pre-cost"><span class="glyphicon glyphicon-usd"></span> 60.00</small></h3> <div class="row"> <div class="col-md-4 col-sm-6 col-xs-12"> <select class="form-control" name="select"> <option value="" selected="">Color</option> <option value="black">Black</option> <option value="white">White</option> <option value="gold">Gold</option> <option value="rose gold">Rose Gold</option> </select> </div> <!-- end col --> <div class="col-md-4 col-sm-6 col-xs-12"> <select class="form-control" name="select"> <option value="">Capacity</option> <option value="">16GB</option> <option value="">32GB</option> <option value="">64GB</option> <option value="">128GB</option> </select> </div> <!-- end col --> <div class="col-md-4 col-sm-12"> <select class="form-control" name="select"> <option value="" selected="">QTY</option> <option value="">1</option> <option value="">2</option> <option value="">3</option> </select> </div> <!-- end col --> </div> <div class="space-ten"></div> <div class="btn-ground"> <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-shopping-cart"></span> Add To Cart</button> <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-heart"></span> Add To Wishlist</button> </div> </div> </div> </div> </div> </div> </div> |
Step 3) Add the below CSS code in your web page after the HEAD TAG start, inside STYLE tag.
|
1 2 3 |
.product_view .modal-dialog{max-width: 800px; width: 100%;} .pre-cost{text-decoration: line-through; color: #a5a5a5;} .space-ten{padding: 10px 0;} |
After following the above steps.
I hope this tutorial helps you, if you have any questions regarding WordPress, then feel free to put your comments in below comment section. Do you like & share this article with your friends, and don’t forget to follow us on Facebook and Twitter to learn cool tutorials.
If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.
Article Tags: bootstrap product quick view, bootstrap product template, bootstrap template, product quick view