How to make an e-commerce website with HTML, CSS and JS

ith the comfort of browsing inventory in your pyjamas and the convenience of having your order shipped directly to your front steps, there is no doubt that online shopping has become the norm for many people. With the rise in popularity of e-commerce, there is an increased demand from stores to create an online presence. This guide will walk through the process of designing an e-commerce website in Adobe XD, from product page to checkout.

Defining the structure

How to make an e-commerce website with HTML, CSS and JS

The key pages, or views that will be covered in this guide are the:

  • Product landing page; where customers can browse and search available products
  • Checkout page; where customers enter shipping and billing information


Start by drawing out a rectangle the width of the artboard (1366px) and 64px in height. Set the background fill of this rectangle to white. If you’re using the provided UI kit, copy and paste the logo onto this navigation bar and position it to the left about 60px from the edge of the artboard.

Next, using the provided icon components from the UI kit, or a plugin like Icons 4 Design, add in the Search, Log-in and Bag icons to the right side of the navigation bar, spaced about 60px from the right edge of the artboard. Place the icons in a group and enable Stack to easily control the spacing and arrangement.

Select all these elements, including the background rectangle and place them in a group titled Navigation Bar. Convert this group to a component using the right click menu. Now simply just drag this component out of Document Assets to use it on other artboards.

Product landing page

Using this artboard we’ll continue building out the Product landing page using the navigation created in the previous step. Since the navigation element is a component it can be used on additional pages, and any changes made here, to the Main Component, will pass through to the other instances.

Secondary navigation

To create the secondary navigation, draw another full-width rectangle, this time with a height of approximately 90px, and a background color of #FFE0C3.

Next, locate the components Lighting, Table, Chair, Sofa, and New-in from the UI kit components, and paste them onto the artboard. These components include a hover state which enlarges the icon on mouse over. Distribute these icons evenly in the center of the navigation bar. The secondary navigation bar can also be converted to a component for reusability.

Product section

  • Product photo
  • Product title
  • Favorite heart
  • An Add to Cart button

How to make an e-commerce website with HTML, CSS and JS

Start by drawing a rectangle on the artboard in the top left of the section below the navigation. Make this rectangle about 400px wide, this can all be adjusted later. Next, draw another rectangle, with a slight grey fill across the top of the card to create a placeholder for the product image. An additional rectangle can be added as a background element.

Next, draw out a rectangle below the title, give it a fill and add a text layer on top for a button label. Make sure the button label is centered in the rectangle with a text alignment of centre, and then group the text layer and rectangle together to create a button element. To complete the button, make it a component. Lastly, group all the elements of the card into a group called Product Card.

With all the elements in place, enable Repeat Grid in the top right of the property inspector, and drag the green handles to the right and down to create as many cards as needed for the page. The space can be adjusted between them to fit within the page. All the cards will remain in sync now so changes that need to be made, like adjustments to the background can be done on a single card. Add a heart icon from the assets panel to create a like button.

Читать также:  В области международного налогового права

Add interactions

A state can be added on the Main Component to add interactivity when mousing over on hover. To do this, ensure the Main Component is selected, and click the + button in the top right of the component menu. Click Hover State to add a pre-configured hover state to the card.

With the Hover state selected, properties can be edited to define how the card should look when being hovered. In this case, simply changing the color of the button will create a clear indicator. Preview the page and hover over the cards to see the hover state in action.

The final interaction will be to link over to the shopping cart or product page. Since this guide is covering the creation of the product landing page, and the Check out page, a link can be added from the Add to Cart button and treated like a Buy Now button, but you can expand on this and add additional pages using the elements in the UI Kit.

Start by creating a blank artboard for the checkout page (this will be developed next). In this case, all of the Add to Cart buttons will go to the same place, so we can apply the interaction to the Main Component. However, if these were to go to unique pages as part of a flow, set the prototype links to the individual instances instead.

Checkout page

The checkout page will be a simple page containing a few form elements allowing customers to confirm their order, enter billing details, and process payment. Some elements are pre-built in the UI Kit making this page simple to create.

Checkout form

The checkout form has two sections, Shipping information and Payment information. This guide will focus on the Shipping information section, but the same principles apply to the other.

Start by drawing a rectangle on the page about 720px in width, and 600px in height. This will define the background of the section. Set the border radius and style as desired.

Next, open Document Assets and drag the Form component onto the artboard. This component contains several states that will be helpful for building the form. Position the input field, and copy and paste it until all form fields are represented. Common fields to consider are:

  • Name
  • Email
  • Phone Number
  • Address, City, Post code (Zip)

Edit the labels for each input, and if you’re using the states, ensure the labels are edited on each state accordingly.

To make the section collapsable when proceeding to the payment step, group the background, all form fields and the submit button into a group called Shipment section. Convert this group to a component, and add a new state called Collapsed. This will make the Default State the expanded state. In the Collapsed state, the form elements can be deleted (or hidden with opacity) and the background resized to just encapsulate the title of the card. The state can now be toggled between open and closed.

Repeat these steps with the payment section by duplicating this newly created component and overriding the desired fields to collect payment information.

Order preview

The final important piece to this page is to show a preview of the order that the customer will be submitting. This is shown on the right hand side of the page just above a Confirm button to ensure clarity.

Creating this is simple. To start, draw a square on the left side of the section, and add a title to the right side. This will be used to create a row that can be repeated with a Repeat Grid for the appropriate number of rows.

The same approach can be used to create the text-only table rows. Add a title to the left, and a value to the right using the text tool. Ensure text alignment is left on the left, and right on the right so that overrides resize in the appropriate direction.

Читать также:  Саммит стран Азиатско-Тихоокеанского экономического сотрудничества (атэс) и перспективы сотрудничества со странами еаэс в области торговли, инвестиций и цифровой экономики

Drag the Repeat Grid down to create the appropriate number of rows, and override the text accordingly.

Finally, group these two Repeat Grids into a new group and enable Padding and Stacks in the property inspector on the right so that as one grid is resized, the other will adjust accordingly.

How to make an e-commerce website with HTML, CSS and JS

How to make an e-commerce website with HTML, CSS and JS

Советник по проектированию, Adobe XD

Designer Advocate, Adobe XD

Hello, Today in this article, we’ll learn to create an e-commerce website using HTML, CSS and JS. This is a part of full stack e-commerce website. In this part we’ll only create front end page’s UI. We’ll create 4 pages in this tutorial — Home page, Product Page, Search Page and 404 page.

To see demo or you want full coding tutorial video for better understanding. You can watch the tutorial below.

Video Tutorial

I appreciate if you can support me by subscribing my youtube channel.


You can see below, our project’s folder structure.

How to make an e-commerce website with HTML, CSS and JS

Download Images, Get Source Code

So let’s start coding.

Home Page

Write basic HTML 5 template in index.html. And link home.css file to index file. Now, create navbar.

«search brand, product»

Enter fullscreen mode

Exit fullscreen mode

Open home.css file. And inside it before start styling. As we’ll have same navbar and footer in all pages. I thought of making their styles as a separate file. So import nav.js file inside home.css.

And do navbar related styles inside nav.css.

Nav. css

How to make an e-commerce website with HTML, CSS and JS

Now create links below the navbar.


Above code is inside navbar element.

How to make an e-commerce website with HTML, CSS and JS

Great! but as we want navbar in all pages. I am don’t like to copy the code. So let’s make this navbar with JS dynamically. Open nav.js file. And make a createNav function inside it.

If you see the above code, Inside the function first I am selecting nav element using querySelector method. And then writing its HTML using innerHTML. And the value of innerHTML is the same HTML elements that we have made in index.html file. You can now remove the HTML elements from there and also import nav.js.

How to make an e-commerce website with HTML, CSS and JS

Now, let’s make its header.

Home. css

How to make an e-commerce website with HTML, CSS and JS

Now, we have to make product card slider. For that code this.

Note- we are inside index.html file.

How to make an e-commerce website with HTML, CSS and JS

Now make product card.

// inside product section.

50% off

add to whislist

a short line about the cloth..
$20 $40

+7 more cards

We’ll make these product cards with JS and database dynamically later.

How to make an e-commerce website with HTML, CSS and JS

Now make, pre and next button of course.

// before product-container element.

How to make an e-commerce website with HTML, CSS and JS

Now, let’s make the slider working. Open home.js file. And code this.

In the above code, I am simply selecting all product containers, next buttons, pre buttons using querySelectorAll method. And then just looping through each container. And adding click event to next button and pre button.

Import the home.js file inside index.html.

We are done with product cards also. Let’s make collections section now.

How to make an e-commerce website with HTML, CSS and JS

Now you can copy the product section 2 more times after collection element. And you can also change the images and data. Don’t worry we’ll make the cards dynamically with database in future.

After done copying product section. The only thing left in our page is footer. So let’s make it.

As we did for navbar. Import footer.css inside home.css file.

How to make an e-commerce website with HTML, CSS and JS

Make info elements inside footer.

Footer. css

How to make an e-commerce website with HTML, CSS and JS

Great Work. As we did for navbar. Let’s make this footer also with JS dynamically. Open footer.js file and do the same thing, that we did for navbar.

Читать также:  Цифровая экономика и ее роль в управлении современными социально-экономическими отношениями

Now you can delete the footer elements from the the index file. And import the footer.js file.

Index. html

How to make an e-commerce website with HTML, CSS and JS

Great! We are done with homepage. Now, let’s create product page.

Product page.

In product page. Write HTML 5 template. And link home.css, product.css file.

And import these JS files.

And now you can just make a navbar and footer by adding nav and footer element inside body.

How to make an e-commerce website with HTML, CSS and JS

Isn’t that simple. You can also copy the product container element from home page to here. After done copy the cards. Let’s make product detail section. Make it after navbar.

«img/product image 1.png»
«img/product image 2.png»
«img/product image 3.png»
«img/product image 4.png»

Product. css

url(‘../img/product image 1.png’)

How to make an e-commerce website with HTML, CSS and JS

Make details section in the right now.

// image slider

calvin klein
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
( 50% off )

select size






add to cart
add to wishlist

How to make an e-commerce website with HTML, CSS and JS

Now just a simple section we have to make. A detail description section. Make is outside product-details

How to make an e-commerce website with HTML, CSS and JS

Now make the image slider working, and size button toggle-able. Open product.js file.

// selecting all image thumbs
// seclecting image slider element

// default slider image

// loopinh through each image thumb
// adding click event to each image thumbnail
// removing active class from current image thumb
// adding active class to the current or clicked image thumb
// setting up image slider’s background image
// updating the image slider variable to track current thumb

And then code this.

// toggle size buttons

// selecting size buttons
// current selected button

// looping through each button
// adding click event to each
// removing check class from the current button
// adding check class to clicked button
// upading the variable

Great Work! we are done with product page also. Now we have to make search page which is very simple.

Search Page

As we made navbar and footer in the product page. Do the same for this page also. Link these files to it.

Now make the product cards. First make the heading.

search results for product

Search. css

For cards, we’ll use the same card we made for homepage. Just copy the product-container element from homepage and paste it inside search-results.

But we are using flex box which will make the cards go side by side. But we don’t want that for our search page. So just over write the product-container elements property.

How to make an e-commerce website with HTML, CSS and JS

Now, we are almost done. The only page we have to create is 404 page.

404 Page

Do the same for this page also to make navbar. I didn’t made footer in this page but if you want you can make it too. After making navbar. Link 404.css file. And let’s code the page.

look like you are lost. Head to beack to our homepage

How to make an e-commerce website with HTML, CSS and JS

I hope you understood each and everything. If you have doubt or I missed something let me know in the comments.

Articles you may find Useful

I really appreciate if you can subscribe my youtube channel. I create awesome web contents.

How to make an e-commerce website with HTML, CSS and JS

Source Code, Donate me on Paypal

Your donation really motivates me to do more amazing tutorials like this. Support me on patreon, Buy me a coffee, Donate me on paypal

Thanks For reading.

Below you’ll find my favourite examples of ecommerce websites for 2023, compiled from our entire ecommerce website database.

But before that, here are our top rated ecommerce website builders that most of these shops below are using in order to deliver high quality UX and UI:

Ecommerce Design Examples – Table of Contents

Below each website we have listed one unique key takeaway from each website that you can implement on your store today.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *