How To Design an eCommerce Product Details Card

Product details cards are the most important content on an eCommerce site. 

Every eCommerce site use product details cards for providing product information. 
It is used to display product description in a decent way and to 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>';}
});

Leave a Reply

Your email address will not be published. Required fields are marked *