I’m going to show you how to very quickly design your eCommerce website with Elementor.
Frontend View
From your website backend, mouse over to your website name on the top left hand panel. Right click on your website name and click “Open link in new tab”
You will be able to see your website front end in the new tab.
If your front end doesn’t look like this, it means you have previously used a kit design on your website.
Reset Website
If you prefer not to use that template, you can go back to your hosting backend (Under “Manage this Website”) and do a reset to your website.
Note that this means you will need to reinstall WooCommerce plugin again.
Elementor’s Kit Library
If you would like to explore Elementor’s collection of design options, you can simply mouse over “Templates” and then click on “Kit Library”.
You will see a variety of templates you can use.
There are a total of 5 broad categories for these templates, namely “Simple Website”, “Wireframe”, “Portfolio”, “Online Store” and “Blog or Magazine”
View Demo on Template
You can click on “View Demo” to see how the template website will look like. I’m showing you the demo page of a wireframe template.
Wireframes are just layout designs and do not come with image assets.
One thing I love about Elementor is that it can easily help you create a mobile responsive website. At the demo page, you can also check out how your website will look with tablet and mobile view.
Merchandise Shop Template for eCommerce Demo
For my tutorial, I’m going to use the “Merchandise Shop” template.
This is because it looks clean, suitable for any kind of products and caters to sellers who may not have many images to use.
To use the “Merchandise Shop” template, select the “Online Store” category. Then look for “Merchandise Shop” and click on “View Demo”.
Click on the Apply Kit pink button at top right hand corner.
Click on “Apply All” when a popup window appears.
Wait for Elementor to set up your kit.
It takes a while.
Once your kit is successfully installed, you will see this page.
Simply click on “Close” at bottom right hand corner.
In the next tutorial, I will show you how to set up your Site Identity.
