April 7, 2020
How to Design an eCommerce Website With Elementor, WooCommerce & Storefront

How to Design an eCommerce Website With Elementor, WooCommerce & Storefront

There’s a new way to create an
e-commerce website using Storefront, WooCommerce and Elementor. This way you
can create your own online store visually and with zero coding. This is
the default Storefront homepage which looks awfully simple and dynamic. In this
video I will be showing you how to make a much more impressive website including
a home page and a contact page. So let’s begin. Create a new page, call it the home
page, publish it and change the template to full width. Now I click on edit with
Elementor, which will bring me to the Elementor editor. I hide the title, begin
with a new section. This will be our header section. Set the min height to
100 VH, which means it’s gonna spread around the full height of our screen Now I added the content width so my
content will fit into a box shape. Drag in the first heading element. This will be
our main heading. Now I’m gonna adjust it and give it much more presence by using
size weight and color Now I’m gonna give it a shadow with the
darker shade of purple and I’m gonna set the blur level to zero, which will make
the shadows solid and it gives it this nice 3d effect. This will be our
secondary heading. now I will set an image to our background which will give
our background much more character and I play around with the position and the
size to choose an angle that will fit our header I used this code to hide the breadcrumbs
under the menu which we don’t need right now. Now on to the next section this will be our product section. So I
drag in the heading and adjust it Now I will drag in our Woo-products
widget. Here I can adjust the number of columns and the number of products on
display. I can reorder them by whichever way I choose. I can select featured
products or the ones that are on sale rearrange them by the rating or the
popularity. For now I will choose four columns I will duplicate this whole section and
just to display only a specific category in the section below and overall. This
widget gives me much versatility and makes it very easy to achieve the exact
goal I need. Now I can adjust the content width of the whole section, which will
determine the size of my products. This next section will be a ‘call to
action’ to view all the products on the website. I’m gonna duplicate the heading
and set minimum height Gonna drag in a button and call it ‘view all products’. Choose a solid color as our background for now and by adjusting the
style of every element I will make this section come to life I can also change the background to an
image. We’ll choose the position and the size until I will come up with an
interesting angle for the image and set it as fixed to get this nice parallax
effect now set the background overlay Choose gradient and this will make our
background more subtle and put the focus on the content. I can also choose to place
the video instead of an image. This will make our section much more interesting
and immediately grab the user’s attention Now I’m gonna save this section as
template for later use in our e-commerce website. Next up is the about us section
so I’m gonna start off with two columns Drag in an icon box. Adjust the
content and I will drag in another heading to put in a bit more details
about our business like the address Notice I keep using our orange and
purple colors and this is to be consistent and keep up with the overall
website design Now I’m gonna set some padding to our
column and duplicate it two times. This will give us this nice three of three
icon boxes. I’m gonna change the content and the icons. I’m gonna set the subtle
border for the sides which will further emphasize the separation between the
columns Now I will save this section as a
template as well. Now we’ve actually completed our first home page which
includes our products. Everything looks nice and beautiful we can move on. But before we do I want to make sure this page looks good on mobile devices
so I will switch to mobile view. Here I can adjust the settings of each
element only for the mobile device. I’m gonna start off with the header and
tighten everything up by adjusting the height, the padding and the margin and
the sizes of the heading For this section I will set a fall back
image because in mobile devices the video doesn’t play so we’ll have an image
instead Now our page is ready. It looks cool and
it is also mobile-friendly. Next up I’ll add a new page. This will be our
contact page. Again set the template to full width We’re gonna hide the title and I’m gonna
paste in our previously saved section This will be our starting point. I’m
gonna change the content, set an image as a background. Again I play around with
the positioning and the size to choose an interesting angle. And I’m gonna use
social icons instead of the button as you can see, saving templates and reusing
them later saves us a lot of time. We can make small iterations here and there
while remaining consistent with our design and still make everything look
unique and original. Not to mention that it’s much faster than starting from
scratch Again I’m gonna use the code to hide the
breadcrumbs and once more we’re gonna paste in a previously saved template.
Just change the icons in the content below. This will create a subscribe
section Now I’ll drag in a Form widget and
customize it quickly so it will fit our website perfectly Now our page is ready to go. All that’s left is adjusting it for the mobile device. Once again I’m gonna use padding, margins and sizes to tighten everything up Now our page looks awesome and it is
also mobile responsive. I hope you’ve enjoyed this tutorial. Please subscribe
for more awesome content. This was Ilya from Elementor

100 thoughts on “How to Design an eCommerce Website With Elementor, WooCommerce & Storefront

  1. Is the Storfront theme at wordpress.org same as at wordpress.com? does Elementor have woocommerce themes/tempates if I pay the Elementor pro version?

  2. How to get – "Woo – Products" widget ? how can i get it? i cant find ? need to download another plugin out of WooCommerce?

  3. @elementor Can you please make a tutorial on how to make a website like www.engadget.com or www.sneakernews.com. The thing is, this whole website is a blog and all the things show up in the homepage, but they also reside in their own pages. Thanks.

  4. I can`t edit or duplicate column or widget in mobile and tablet mode only in desktop mode, why? I mean if I want add something to the mobile version example I want to add video (widget) not video background like on desktop version, how do I do that?

  5. This video has the potential to be really helpful … but it's too fast for beginners and skips some important explanations. Would be great if it could be redone at a a slower pace with clearer directions. Many actions are done without explaining how things are being done. Thanks for what you've done so far though.

  6. hi i am getting this message when i go to preview my shop page on elementor pro: the preview could not be loaded. I am using woocommerce and storefront with the elementor pro. any ideas on how i can fix this??

  7. Hello, thanks for the help! I know Elementor has major potential! I am designing and developing continuously a website, and want to know – the background image. What dimensions should this be, and does it matter whether or not it is bitmap, jpeg, or png? The one I uploaded is very blurry when set as the background image.

  8. Great video Elementor! Please can you upload it live not only on your local server? I would like to see all your videos live 🙂

  9. When I try to add a second header to my box like you did "explore over 200 products" It keeps going outside of the box. Any suggestions?

  10. I liked it, thank you. I also like the way Adam from WP Crafter makes his tutorials for elementor. I think its easier for non-techies to follow. for one – what are the breadcrumbs? are there links explaining this? Thanks!

  11. Very good video…but share some of the views of the previous comments…too too fast……you make it look so easy….and it is…when you know how??!!….music unnecessary…..Great job though…:-))

  12. I see "WooCommerce products" in the menu, but no "Woo-Products." Do you know why I don't have this option? Also when I do use "WooComerce products" its displays by rows, and not column which make this option looking very ugly. Please help?

  13. This video is wonderful for me to design my first online store. However, on 3:05 when I drag the Woo/Product order the Featured Products, the featured products layout was wrong, the product picture is on the right and product description on the left. Please help me!!. Did I do something wrong?

  14. A good video, but ELEMENTOR PRO does NOT have the ability to populate your single product page (the page that shows the actual item once it is clicked). This has to be done in the customizer and there is little functionality doing it this way. When are we gonna be able to do this- Elementor Pro Team?

  15. Hi, when I dragged over the Woo Products Widget, I did not get the pictures. Anyone know why or how to remedy this please>?

  16. Omg I just put my brain on fast forward not helpful at all. Think about people who are not into technology but need help

  17. This is very fast but nice information. Does anyone know why I cannot recreate the second title , explore over 200 products, to insert into the original purple box? I am being forced into another box.

  18. Is this storefont pro…im currently using elementor on oceanwp, love elementor its brilliant but wondering how much customisability storefront has for the headers, please respond as im considering on purchasing storefont pro, also may just go with elementor pro as i like the oceanwp themes headers at the mo

  19. after creating individual products which you skipped over, when i drag "products" not "woo commerce products" in elementor into asection, they just get dumped oneon top of each other, even though 4columns is set in generate press, – i keep switching from elementor to generate press to figure out which one is in charge? confused ..

  20. So one needs 4 things: WordPress, Elementor, WooCommerce and a StoreFront to get all of this working or you can do it all without StoreFront?

  21. The Woo Products widget does not work correctly. The products are displayed vertically and not horizontally. This only happens when I use the storefront theme. Please advise what the cause could be.

  22. ELEMENTOR PRO does NOT have the ability to populate your single product page (the page that shows the actual item once it is clicked). This has to be done in the customizer and there is little functionality doing it this way. When are we gonna be able to do this- Elementor Pro Team?

  23. Great tutorial! How can I create a custom mega menu with this? is it possible to create this with free elementor?

  24. Why I am not able to add Text under Title( Under LUXURY Store- it is not giving the option to add text "Explore Over 200 Products") is this feature available in PRO version of elementor ??

  25. At 0:46 you go to page settings. I don't have that. I just installed the storefront theme and as expected, much of the work I'd done to my pages is undone, but I can't edit most of it. On my homepage in elementor, I can't click and edit my header and logo. There is also a "Private: Home" smack in the middle of my page with an "edit this section" button that does nothing when I click it.

  26. Thanks for the tutorial. I have just iinstalled Elementor, but I don't have the Page Settings that you show on the 0:46. What do I need to do to have it?

  27. I cant believe how fast this guy is going, what's the point of watching and trying to follow along when he's acting like that?

  28. Thanksa lot for the great tutorial , how can i create shop page to show all products listed ? also does it work for attribute product as woocomerce products ?

  29. Says you can create an e-comm site with zero coding. Within the first 2:30 minutes he's already tossed in some coding. LOL

  30. When I inserted Woo Product widgets, differently like yours, they come empty to me, how to insert produts please? Do you have a specific tutotial about it? Tks if you could help me.

  31. Goog preview (demo) of the capabiiitis of StoreF ront and Elementor. After looking at this demo I am sure I must spend some times with other tutorials and most import, play around with the proposed solution mix. Thank you,

  32. The Background Music is very pleasing. Wonder who or which band composed the same ? And the vid pace is too fast. And not exactly step-by-step……

  33. so yall just gonna pretend to learn anything from this … he was going so fast and not explaining 90% of what he did llol

  34. I have an issue after drug the woo-product widget which did not show the same outlooks like yours, my product image is next to the title instead upon of the product name, do you have any clue how to fix it?

  35. i tot its free, but its pro version hahahaha, no wonder cant edit CSS and i dont have that many widget for woocommerce

  36. you could write which css code is used so that the image is without space in the image and the header

  37. hi, when i want to drag widgets on the box. This appears "The style of this widget is often affected by your theme and plugins. If you experience any such issue, try to switch to a basic theme and deactivate related plugins". Does someone know how can I do? thks

  38. you are bit fast man, seems you are working for yourself, video should be slow so that we can understand each thing in detail. thanks

  39. what about the single product page, cart, checkout and how to make it all work? there are tens of videos like this and they show nothing new and nothing useful.

  40. Nice video, but why can`t I find WooCommerce in elementor like you did in the video. I have WooCommerce installed

  41. i also installed "WooLentor – WooCommerce Elementor Addons + Builder" plugin for it but still confused .

  42. Looking good mate, like The background music too. Pro tip for people finding the instructions too fast, use the pause button, on PC you can even use left arrow to skip 10 second back. If this video would be any slower, then I would fall asleep. Good job.

Leave a Reply

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