How To Design an eCommerce Product Details Card?

Product details cards are the essential content on an eCommerce site. 

eCommerce websites generally use product details cards for providing product information. It is used to display product descriptions positively and make customers interested in buying the product.

Here, I’ve shown how to design a product details card step by step. I have created it using Slick.js, HTML, CSS, and JavaScript.

It supports all browsers and responsive to all devices. It is quite user-friendly, and the design is easy to customize.

Step-1 : HTML Code

<div class="shop-details-image">
	<ul class="shop-details-image-slides">
		<li><img src="assets/images/products/products-details-view1.png" alt="Images"></li>
		<li><img src="assets/images/products/products-details-view2.png" alt="Images"></li>
		<li><img src="assets/images/products/products-details-view3.png" alt="Images"></li>
		<li><img src="assets/images/products/products-details-view4.png" alt="Images"></li>
	</ul>
	<div class="slick-thumbs">
		<ul class="shop-details-image-slides">
			<li><img src="assets/images/products/products-details-view1.png" alt="Images"></li>
			<li><img src="assets/images/products/products-details-view2.png" alt="Images"></li>
			<li><img src="assets/images/products/products-details-view3.png" alt="Images"></li>
			<li><img src="assets/images/products/products-details-view4.png" alt="Images"></li>
		</ul>
	</div>
</div>

Step-2 : CSS Code

<!-- Slick CSS -->
<link rel="stylesheet" href="assets/css/slick.min.css">
.shop-details-image {
	margin-bottom: 30px;
	img {
		width: 100%;
		background-color: #f0f2f9;
		padding: 20px;
	}
	.slick-slider {
		position: relative;
		padding: 0;
		margin: 0;
		list-style-type: none;
	}
	.slick-dots {
		padding: 0;
		text-align: center;
		list-style-type: none;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		margin-left: -5px;
		margin-right: -5px;
		margin-top: 0;
		margin-bottom: 0;
		li {
			display: block;
			flex: 0 0 25%;
			max-width: 25%;
			position: relative;
			padding-left: 5px;
			padding-right: 5px;
			padding-top: 10px;
			button {
				padding: 0;
				outline: 0;
				display: block;
				border: none;
				margin: 0;
				cursor: pointer;
			}
			img {
				transition: 0.5s;
			}
			&:hover img, &.slick-active img {
				opacity: .4;
			}
		}
	}
	.slick-thumbs {
	  display: none;
	}
}

Step-3: JavaScript Code

<!-- Slick JS -->
<script src="assets/js/slick.min.js"></script>
$('.shop-details-image-slides').slick({
	dots:true,
	speed:500,
	fade:false,
	slide:'li',
	slidesToShow:1,
	autoplay:true,
	autoplaySpeed:4000,
	prevArrow:false,
	nextArrow:false,
	responsive:[{breakpoint:800,
		settings:{
			arrows:false,
			centerMode:false,
			centerPadding:'40px',
			variableWidth:false,
			slidesToShow:1,
			dots:true
		},
		breakpoint:1200,settings:
		{
			arrows:false,
			centerMode:false,
			centerPadding:'40px',
			variableWidth:false,
			slidesToShow:1,
			dots:true
		}
	}],
	customPaging:function(slider,i){return '<button class="tab">'+$('.slick-thumbs li:nth-child('+(i+1)+')').html()+'</button>';}
});