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
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
Navigation
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
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
- 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.
Советник по проектированию, 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.
Code
You can see below, our project’s folder structure.
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»
search
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
Now create links below the navbar.
home
women
men
kids
accessories
Above code is inside navbar element.
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.
Now, let’s make its header.
Home. css
Now, we have to make product card slider. For that code this.
Note- we are inside index.html file.
Now make product card.
// inside product section.
50% off
add to whislist
brand
a short line about the cloth..
$20 $40
+7 more cards
We’ll make these product cards with JS and database dynamically later.
Now make, pre and next button of course.
// before product-container element.
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.
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.
Make info elements inside footer.
Footer. css
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
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.
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’)
Make details section in the right now.
// image slider
calvin klein
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
$99
$200
( 50% off )
select size
s
m
l
xl
xxl
add to cart
add to wishlist
Now just a simple section we have to make. A detail description section. Make is outside product-details
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.
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
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.
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.