Geek Culture
Published in

Geek Culture

Make beautiful eCommerce card

Make best vertical and horizontal e-commerce cards

So cards are one of the most important components of websites that must be included because using cards you can show data in the way you like it.

You have all code in my Github repository which link I gave in the last of this article.

So without any further due let get started.

Today we will create 2 different types of beautiful eCommerce cards that you can include in your eCommerce project.

One card is vertical and the other is horizontal.

1.Product cards(Vertical):

This type of card can be used in eCommerce websites, usually, you see them showing products and their descriptions.

So let make one!!!!

Let start with the vertical one, our card should look like this:

Hope you like the design so let get started,(I will provide you GitHub link to all card designs)

And know how to code it.

First, create a div and assign it the class name “card”.

Then create two different div tags inside it named “up” and “down”

Now add an image in “up” div.

Now add a heading, type, product name, and price in “down” div.

Here we created a “product-info” div inside “down” and inside “product-info” div we add “product-name” or we can call it a heading.

And under “down” another div named “details” is created under which product type, product category, price after discount, and price before discount.

Now create two lists that will show price and color options.

Now finally just add buttons:

Without CSS design should look like this:

So we created Skelton now let go to the beauty part.

First import a really cool font :

Now let add CSS for the card, up, up the image, and down:

We created a card with flex and its direction column and add some style to up and down so you can just copy-paste mine or play with it your choice.

Then add CSS for “product-info” :

Now let add CSS to our heading:

.dis is before discount price so don’t confuse, and again you can copy my CSS or you can tweak some more things.

Now let add CSS for our color and size list.

So our list is completed and we just need to some hover effects on the size list and color effect on the color list.

Let start with the size list:

Now let go with the color list:

We just created a colored ellipse and add hover effects, nothing else special.

Now only buttons left and let add their CSS too.

Their CSS are as follow:

So finally we created this beautiful card and ready to use in our project, if you want then you can reduce the size and play with it and implement it in your project.

Hope this will help you now let go of our 2nd card design.

2.Product card(Horizontal):

So let create another card and this time it is horizontal so let get started.

Our end result will look like this:

So, let get started.

First, create a div and assign it to class “card” and create two more div named “left” and “right”.

Now add image and image caption in left div:

We added a caption because on hovering the image a description will slide from the left.

Now

Now add two div in right div which include title,rating,badges,small description:

Now lastly let add a feature section and two buttons:

We are all done now let add our mate CSS.

I am giving card margin only to keep it in the center and for the tutorial purpose, you may not need to do that.

Now add CSS to our left div and image:

Now add CSS to our caption div:

Now let add our hovering effect that is most important:

Ya, that’s it, only this is needed to add.

Now let jump to our right div and add CSS to it and title and small description :

Now CSS to our badge:

Now add CSS to our list of size :

Now adding hovering effect:

Now add CSS to our color list:

Now time for adding CSS to our price section and buttons:

Now only hovering effect left, so let do that too:

Button wrap is just for adding a margin so don’t worry about it.

So today you saw how to make a product card for an e-commerce website in an easy way, I know I don’t explain CSS but I think the code is self-explanatory, I take inspiration from some code pens so these components are not 100% mine.

Hope today I helped you with your project and hope you like it.

Code for the project:https://github.com/ath34-tech/Best-ecommerce-card-vertical-and-horizontal-

Follow me on Instagram:https://www.instagram.com/ath_t1/

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Athtripathi

Athtripathi

I am ath Tripathi. I am now a freelance blogger |full-stack devloper| Teenager | game developer | AR/VR,metaverse enthusiast| owner of https://nerdsculture.com