Best way 2 design Product Loop Item Skin with HTML/CSS

PRODUCT LOOP ITEM SKIN

In the blog post, I will be showing you how to design Product Loop Item Skin with HTML And CSS.

Whenever you design or develop a website for any online store, so you generally need to display the products in archive pages. So These archive pages display the products in a loop and all products items skins are always need to be displayed in a nice and professional look. So today this article will help you to design your own custom Product Item Skin using simple HTML And CSS.

Writing HTML Structure for Product Loop Item Skin

Very first thing that we need to do is to write down a proper HTML Structure for the product with all its essential elements to display inside this Product Block. So below is the example code that I wrote in the video. You can copy the below code and use it for your own product loop.

In this HTML Structure, I used some FontAwesome Icons, that you can use if your site has already FontAwesome Library included, otherwise these icons will not work.

<!-----Product Loop Item Block start below---->

    <div class="product">
        <div class="product-img">
            <img src="https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/6796b20c-9845-45ca-bd39-007d0f4945f4/air-jordan-xxxv-pf-tech-pack-basketball-shoe-T4GrDr.jpg" alt="Air Jordan XXXV " title="Product title">
        </div>
        <div class="meta">
            <span class="category"><a href="#">Footwear</a></span>
        </div>
        <div class="product-info">
            <h3>Air Jordon XXA - DNA</h3>
            <div class="price"><span class="base">$199.00</span><span class="discount">$149.49</span>
            </div>
        </div>
        <div class="product-btns">
            <ul>
                <li><a href="#"><i class="fa fa-cart-plus" aria-hidden="true"></i></a></li>
                <li><a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
                <li><a href="#"><i class="fa fa-search-plus" aria-hidden="true"></i></a></li>
            </ul>
        </div>
    </div>

    <!-----Product Loop Item Block End here---->

CSS Codes for Product Loop Item Skin

Its time to play a fun way to style your raw HTML Product Block structure and make it look great. So Below stylesheet is used in the video to design the Product Loop Item Skin. You can copy the below code and make required updates to match your requirements.

.product{
            display: block;
            width: 300px; /*Width Can be removed if you are adding this block inside a Bootstrap Column*/
            height: auto;
            background: #fff;
            padding: none;
            border: 2px solid #fff;
            font-family: TT Commons;
            transition: ease-in-out 0.6s all 0s;
        
        }
        .product .product-img img{
            display: block;
            width: 100%;
            height: 280px;
            object-fit: cover;
        }
        .product .meta{
            position: absolute;
            top: 6.4%;
            left: 21%;
        }
        .product .meta .category{
            background: rgb(248, 78, 78);
            padding: 5px 10px 3px 10px;
            border-radius: 30px;
        }
        .product .meta .category a{
            font-family: TT Commons;
            font-size: 15px;
            line-height: 20px;
            text-decoration: none;
            color: #fff;
        }
        .product .product-info{
            padding: 5px 15px 0 15px;
            text-align: center;
        }
        .product .product-info h3{
            font-size: 18px;
            line-height: 24px;
            margin: auto;
            color: #333;
        }
        .product .product-info .price{
            padding: 5px 0;
            font-size: 16px;
            font-weight: bold;
        }
        .product .product-info .price .base{
            text-decoration: line-through;
            color: rgb(145, 145, 145);
            padding-right:5px;
        }
        .product .product-info .price .discount{
            color: rgb(231, 79, 79);
        }
        .product .product-btns{
            display: block;
            padding:0 15px;
        }
        .product .product-btns ul{
            list-style: none;
            padding: 0;
            text-align: center;
        }
        .product .product-btns ul li{
            display: inline-block;
            list-style: none;
            padding-right: 10px;
        }
        .product .product-btns ul li a{
            font-size: 16px;
            color: #333;
            display: block;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 37px;
            border: 2px dotted #333;
            border-radius: 30px;
            text-decoration: none;
            transition: ease-in 0.6s all 0s;
        }
        .product .product-btns ul li a:hover{
            background: rgb(243, 82, 82);
            color: #fff;
            border: 2px dashed rgb(243, 82, 82);
        }

All Above HTML And CSS Codes are used only for demonstration purpose and there is no 100% surety that these codes will act same on your web page exactly as displayed in the demo. Because sometimes if the this demonstration CSS Classes match with your existing site classes then page layout or individual elements layout may break and mess with other parts of your website.

So I highly recommend you to make required updates in these HTML/CSS Codes to match your overall requirements.

If you face any issue from these codes, you can simply contact us by sending your message and I would be happy to help you.

If you have any requirement for Website Development. You can send your Project details to use and we will get back to you with a Proper Quotation as per your requirements and bring your Dream into Reality.

Get Your Quick Tasks Completed

Hire us today to get all your tasks completed with 100% satisfaction.

Leave a Reply

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

bg author

Manish Bajpai

I am a freelance Web Developer, Zoho One Expert, And Part time blogger. I love developing futuristic websites.

Fill Out this Form to Us

First Name
First Name
Field is required!
Field is required!
Last Name
Last Name
Field is required!
Field is required!
Email Address
Email Address
Field is required!
Field is required!
Phone Number
Phone Number
Field is required!
Field is required!
What you want me to Do?
Field is required!
Field is required!
Number of Hours Required
-
+
Field is required!
Field is required!
Total Cost
$0.00
Field is required!
Field is required!

Minimum Amount to Hire

$25

This is the minimum amount to hire us instantly. Remaining total amount will need to be paid as per the progress of work.