Vitaility Towels

<div class="product-grid">
<!-- Product Item -->
<div class="product-item">
<a href="/products/product-handle" class="product-link">
<div class="image-container">
<img src="IMAGE_URL_HERE" alt="Product Name" class="product-image">
</div>
<h3 class="product-title">Product Name</h3>
</a>
<p class="product-price">$19.99</p>
<button class="add-to-cart-btn" data-product-id="PRODUCT_ID">Add to Cart</button>
</div>

<!-- Duplicate Product Items as needed -->
</div>

<!-- Custom CSS -->
<style>
/* Grid Styling */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 30px;
padding: 40px;
background-color: #f9f9f9;
}

/* Product Item Styling */
.product-item {
background-color: #fff;
padding: 20px;
border: none;
border-radius: 12px;
box-shadow: 0 10px 15px rgba(0,0,0,0.1);
transition: all 0.3s ease-in-out;
text-align: center;
}
.product-item:hover {
transform: translateY(-10px);
box-shadow: 0 15px 25px rgba(0,0,0,0.2);
}

/* Image Container Styling */
.image-container {
overflow: hidden;
border-radius: 12px;
transition: all 0.3s ease;
}
.product-image {
width: 100%;
height: auto;
display: block;
transition: transform 0.5s ease;
}
.image-container:hover .product-image {
transform: scale(1.1);
}

/* Product Title Styling */
.product-title {
font-size: 20px;
font-weight: bold;
margin-top: 15px;
margin-bottom: 8px;
color: #333;
transition: color 0.3s;
}
.product-link:hover .product-title {
color: #000;
}

/* Price Styling */
.product-price {
font-size: 18px;
color: #777;
margin-bottom: 15px;
}

/* Add to Cart Button Styling */
.add-to-cart-btn {
width: 100%;
padding: 12px 0;
background: linear-gradient(135deg, #000, #444);
color: #fff;
border: none;
border-radius: 12px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
}
.add-to-cart-btn:hover {
background: linear-gradient(135deg, #444, #000);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
</style>

<!-- JavaScript for Add to Cart -->
<script>
document.querySelectorAll('.add-to-cart-btn').forEach(button => {
button.addEventListener('click', function() {
const productId = this.getAttribute('data-product-id');

// Shopify AJAX Add to Cart
fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
items: [{ id: productId, quantity: 1 }]
})
})
.then(response => {
if (response.ok) {
alert('Added to cart!');
} else {
alert('Failed to add to cart. Please try again.');
}
})
.catch(error => console.error('Error:', error));
});
});
</script>