Initial Setup & Plugin Configuration
In this video, I'll show you the easiest free way of creating a shop page using just one plugin. You can create aesthetic horizontal filters like this. Also, don't worry. If you don't like this, then you can create a vertical filter section using the same plugin, which will have all the standard filters. Also, we will add a recent product section like this, too. So, without wasting any time, let's get started.
Make sure you have these two plugins installed. First, our star, ShopLenter. Second, Elementor. Once done, let's make sure we have turned on these settings in the ShopLenter plugin. Then go to WooCommerce template tab at the top. Then down here, choose this from template options. The reason for choosing select template is that we will create everything from scratch. Don't worry, it's a simple drag-and-drop process.
Then go to elements and modules and turn on all the features you want on your shop page, like filters, sale badges, etc. In the style tab, you can customize the elements on your shop page, but let's skip it for now as we will do this later.
All right, let's build our shop page. I'll show you two ways of adding filters to your shop page. A horizontal filter like this. And a vertical filter like this. The best part about horizontal filter is that they appear when you click on the filter icon like this. Cool, right?
Building a Horizontal Filter Layout
Okay, let's build this. So, open up a fresh page on Elementor and add a container like this. Make sure the container settings are set to this. Then go to the left, scroll down till you find ShopLenter widgets. Here they are.
I look for a horizontal filter and drag it into my first container. Woah, the basic layout itself looks neat and pretty. To customize this filter according to our need, we'll go to the left panel and select price range. From here, I add price ranges depending on my products.
Let's say I have products ranging between $0 to $200. So, I'll just put zero here and 200 here. Likewise, to create multiple price ranges in the price filter drop down, I'll duplicate this and put a new price range. Awesome. Now, if my customer selects one of these range, they will see the relevant products.
Once a range is set, we'll go to the pricing filter. Here, I can change the filter name, placeholder, and dimensions of the filter. Same for sort by filter. Here, I can choose my sorting type. It can be anything. I can sort by price, colors, categories, and more. Order by filter is pretty much the same thing.
All right. Now, if you want to add an icon, make the filter text clickable, then select it, and you can change the text, make it clickable by adding a link here, change placeholder text of this, and more. These are basic things, so I won't get into it.
Quick Tip: Improving Site Speed
Next, let's add a vertical filter now. But before that, whenever I'm doing some design work for clients, I make sure to install this free plugin Airlift because... Okay, let me actually show you this. So, that's my site speed before and that's after. It does a lot of optimizations automatically and keeps stuff fast. So, you should definitely try this and I'll leave the link in the description below.
Let's add a vertical filter now. To do this, add a two-column container and make it full width. I want my column width to be accurate, so I'll select the left side column and change the width to 25%. Select the right container and change the width to 75%. I'll select the main container and remove the margins. Then, I'll select the left container and add these values.
Then, go to layout and change the direction to column vertical. Look for the product filter from the widget section and drop it here. Begin by setting the filter type to price. This allows users to narrow down their options based on the budget, which is one of the most common ways people browse products. Once you've configured the filter, move on to styling it. Add padding of 15 pixels to the button. Then add another product filter widget, but this time set the filter type to search form. This feature lets users to quickly find specific products by typing in the keywords.
To wrap things up, include a heading widget in your sidebar. Use it to label or introduce the section, making it clear what users can expect from the filters below. Don't forget to add some margins to the heading to maintain proper spacing and alignment with the rest of the sidebar elements. This small touch enhances readability and ties the design together.
Next, we will add categories filter. So, look for it in the sidebar and drag and drop this widget like this. From here, choose style one to keep the layout minimal. Set the columns to one for a clean, uncluttered look that emphasizes each category individually. Don't forget to enable the all categories option, which ensures your customers can see every available product category at once. This setup helps guide shoppers to the section they're most interested in.
Next, include another widget to introduce the next section of the sidebar like this. Below it, place a product query widget for showcasing specific items. Set the columns to one for a streamlined design. Under the query option, select recent products and limit the count to three products. This feature highlights fresh arrivals or trending items, creating interest and encouraging customers to add more items to their carts. With the sidebar complete, move on to designing the main content area.
Designing the Main Product Grid
In the right container, add a new container. Now, insert a heading widget.
All right, for the main product area, I'll drop in WooLentor's Universal Product Layout widget because it has pre-built templates and will save time. Now, I'll turn on same height box so that all the product cards are in equal sizes. From here, I can change the number of columns. And in query section, you can select what kind of products you want to display here.
Then, let's increase the number of products to be shown from here. I'll choose this number for now. And add as many categories as possible from here. Totally up to you.
Now, let's see how we can change the layout. So, just go here and you can choose one of the styles from the drop-down. It's pretty basic, so try it out and choose a style which suits your brand. Now, do you see these action buttons? The search and the cart button? You can customize that, too. Just go to action settings and choose a theme from here. Okay, this looks good. I'll choose this. All right, just go ahead, tweak these settings. I'll do mine, and this is how it will look.
Saving Your Design as a Reusable Template
Once you finalize the layout, it's time to publish the page. All right, I'll do that. After publishing, save the entire design as a template. So, go here. Then, here. And save the template.
This setup is a huge time-saver for future products, allowing you to apply the same design to other pages or sites quickly.
Applying the Template & Final Review
Finally, let's apply the template using ShopLentor settings. Open the settings menu. Look at the drop-down and select your newly saved template. Once done, hit save to confirm your selection. Let's check it. Mhm. Looks fine to me.
Your shop page is now beautifully designed, fully functional, and optimized for a smooth shopping experience. Comment below if you have any questions and I'll help you out. Click this video if you want to triple your site speed in just 1 minute. You're really going to thank me for this. So, click here and I'll see you there.
