Modal
Overview
The Quick View modal is used on the Shop Cards to allow the user a preview of the product. For
quick view modal to work it must call the quick-view.js included in the theme
files.
Santosha
Pranayama YOGA PANTS – women’s
$59.99 $89.99
Save 25%
Select Color:
Select Size:
X‑Small
Small
Medium
Large
X‑Large
<!-- Modal -->
<div>
<div class="quick-view">
<button type="button"
class="btn btn-brand-primary-reverse btn-xl text-12 text-nowrap rounded-pill shadow">Quick
View</button>
</div>
<!-- Quick View -->
<div class="viewContainer d-none">
<div
class="qview d-flex align-items-center justify-content-between shadow-lg rounded-5">
<button type="button" class="btn close-qview" aria-label="Close">
<i data-feather="x" class="stroke-w-1"></i>
</button>
<div id="carouselExampleIndicators"
class="carousel slide carousel-fade my-5 ms-5 w-50 rounded-3 overflow-hidden">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide-to="0" class="active rounded-1" aria-current="true"
aria-label="Slide 1"><img
src="../img/shop/yoga-pants-5-close-up-1.jpg"
class="img-fluid d-block mx-auto" alt=""></button>
<button type="button" class="rounded-1"
data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
aria-label="Slide 2"><img
src="../img/shop/yoga-pants-5-close-up-2.jpg"
class="img-fluid d-block mx-auto" alt=""></button>
<button type="button" class="rounded-1"
data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
aria-label="Slide 3"><img
src="../img/shop/yoga-pants-5-close-up-3.jpg"
class="img-fluid d-block mx-auto" alt=""></button>
<button type="button" class="rounded-1"
data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"
aria-label="Slide 4"><img
src="../img/shop/yoga-pants-5-close-up-4.jpg"
class="img-fluid d-block mx-auto" alt=""></button>
<button type="button" class="rounded-1"
data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4"
aria-label="Slide 5"><img
src="../img/shop/yoga-pants-5-close-up-5.jpg"
class="img-fluid d-block mx-auto" alt=""></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../img/shop/[email protected]"
class="d-block w-100 img-fluid" alt="yoga pants">
</div>
<div class="carousel-item">
<img src="../img/shop/[email protected]"
class="d-block w-100 img-fluid" alt="yoga pants">
</div>
<div class="carousel-item">
<img src="../img/shop/[email protected]"
class="d-block w-100 img-fluid" alt="yoga pants">
</div>
<div class="carousel-item">
<img src="../img/shop/[email protected]"
class="d-block w-100 img-fluid" alt="yoga pants">
</div>
<div class="carousel-item">
<img src="../img/shop/[email protected]"
class="d-block w-100 img-fluid" alt="yoga pants">
</div>
</div>
</div>
<div class="d-flex flex-column align-items-center my-5 me-2 w-50">
<h2>Santosha</h2>
<div class="mb-3">
<p class="card-text text-10 text-uppercase letter-spacing-01 my-1">
Pranayama YOGA
PANTS
– women’s</p>
<p class="text-brand-primary text-18 fw-semibold text-center mb-0">
$59.99 <span
class="text-brand-mid-gray text-decoration-line-through">$89.99</span>
</p>
<p class="text-center text-14">Save 25%</p>
</div>
<!-- Color -->
<p class="text-center mb-2 text-12">Select Color:</p>
<div class="d-flex">
<div class="form-check select-color color-select-grey">
<input class="form-check-input" type="radio" name="flexRadioDefault"
id="flexRadioDefault1">
</div>
<div class="form-check select-color color-select-turquoise">
<input class="form-check-input " type="radio"
name="flexRadioDefault" id="flexRadioDefault2" checked>
</div>
<div class="form-check select-color color-select-salmon">
<input class="form-check-input " type="radio"
name="flexRadioDefault" id="flexRadioDefault3" checked>
</div>
<div class="form-check select-color color-select-sky-blue">
<input class="form-check-input " type="radio"
name="flexRadioDefault" id="flexRadioDefault4" checked>
</div>
</div>
<!-- Size -->
<p class="text-center mb-2 mt-4 text-12">Select Size:</p>
<div class="d-flex">
<div class="select-size">X‑Small</div>
<div class="select-size">Small</div>
<div class="select-size">Medium</div>
<div class="select-size">Large</div>
<div class="select-size">X‑Large</div>
</div>
<!-- Quantity -->
<div class="d-flex flex-column align-items-center mt-3">
<label class="form-label text-12">Quantity:</label>
<input type="number" name="quantity" value="1"
class="form-control w-25 pe-0">
</div>
<button type="submit" class="shadow btn btn-brand-primary btn-xl rounded-pill mt-5">Add
to
Cart</button>
<button type="submit" class="btn rounded-pill text-14 d-inline-block favorites mt-4">
<i data-feather="heart" width="18" height="18" stroke-width="1"></i>
Add
to Wish
List</button>
<a href="../product-single.html" class="text-14 mt-0">View Details</a>
</div>
</div>
</div>
</div>