Create a Joomla E-commerce Website using JSN PageBuilder 4’s J2Store elements - Step-By-Step
We all know that J2Store is the perfect solution for your Joomla e-commerce website. However, do you want your website to stop just there, why don’t put it to the next level?
Creating beautiful and stand out product pages can be difficult and time consuming.
Luckily, we have come up with a solution for that. With JSN PageBuilder 4 latest version, you can beautify your web page using J2Store elements. With simple drag and drop features, the user experience will be stress-free and save you lots of time designing and modifying.
If you take a look at the JSN PageBuilder 4 demo, beside having able to create and modify elements of Joomla articles, EasyBlog and K2, you can see what the PageBuilder can do with J2Store elements. This blog is going to introduce you to How to build your product pages for your Joomla e-commerce website using JSN PageBuilder 4’s J2Store elements.
Let’s begin!
Download JSN PageBuilder 4
First thing first, you need to have JSN PageBuilder 4 installed into your Joomla site.
Go to JSN PageBuilder 4 details page to download the extension.
Download J2Store
In order to use J2Store elements in JSN PageBuilder 4, we need to set up J2Store to our Joomla site.
Go to J2Store.org and download the extension.
Install JSN PageBuilder 4 & J2Store to your Joomla website
Go to Extensions -> Manage -> Click Install 
Drag the downloaded file to the Upload & Install Joomla Extension section.
Define a content layout
Before getting into anything serious, we need to set yourself up with a plan in order to save time and create professionalism. And in this case, a well-planned layout will guide us on the right track.
I recommend that you should have a thorough thought process on how we want the product page to be displayed and draw a draft layout on paper. It may not be pretty but feasible.
Create "Products"
Before getting your hand on the Product Pages, we need to have the "Products" first.
You can check out J2Store documents for a step-by-step guide on how to create products.
Create product pages
The first step for every section below, we need to create a new article for your product page.
Go to Content -> Article -> Click Add New Article.
Afterward, a blank article will appear on your screen and on the Editor tab, choose JSN PageBuilder 4. And in the middle, there is an orange button that says “Create a new page”, click on it to open the editor mode of JSN PageBuilder 4.
Create a single product page
Go to Add Third Party Elements -> J2Store Product Details. There, you will find 2 styles for your preference. In this case, I choose the first style.
Then, I will go to the Content Source field on the right column and select the Product that I want to show the details.
After selecting the item, my product will appear in the JSN PageBuilder 4.
Now it’s time to customize the product detail. If you go to Add Third Party Elements again and then scroll down to J2Store Product section, you will find multiple options for you to customize J2Store’s elements:
- Product Image
- Product Title
- Product Price
- Product Quantity
- Product Add To Cart button
- Product Description
- Product View Details
You can add more elements to your Single Product Page by dragging and dropping, or remove unwanted elements by clicking on the delete button.
On the right column, in the styling tab, there are more options for you to modify each element.
After finishing to style your product details and satisfy my expectations. Let’s hit save and put this single product page online.
You can repeat the steps above for your other products.
Create a product list page
To create a new page for the product list, you simply go to Add third party elements -> Click on J2Store Product List. A sub menu will appear and you can choose out of 3 layouts the display you want your product list page to be. In this case, I choose the third option.
As you can see on the image, it only shows 3 products. However the total products that I got so far are 6 items. Therefore, the next step I do is increase the limit number to 6.
In order to do this, go to the Limit section on the right column and type 6.
You also have options to change the number of items per Row and Spacing between items.
As a result, the number of items on the list has now increased to 6, just as I want.
Note: Don’t forget to save your progress constantly to avoid any unwanted problems that may cause you to lose what you have edited.
I now have a product list page. It still looks plain and simple though. To impress the audience, I might need to spice things up a little bit. In the Styling tab on the right column, you will find numerous settings that allow you to adjust the style of your product list section. You can play around with them and find the best design for your preferences.
Don’t forget that your site needs to be responsive to every device. After finishing styling your page, click on the button on top that says All Devices. There, you can check to see if the layout of the page shows accordingly to different devices.
The page seems to work perfectly now, let’s click on Save and Publish on site.
Tips to Build an outstanding product pages
During the time building my own product pages, I have learnt from the experience and come up with some tips:
- Elements should be aligned in a geometric shape in order to improve the design
- Colour are picked and combined in a harmony way and should be related to your brand
- A suitable template will boost your website generally and your product pages specifically to a next level.
You can check out JoomlaShine templates that are fully compatible with J2Store extension
To Sum Up
We have come to the end of this tutorial on How you can build your product pages using JSN PageBuilder 4 and J2Store elements. Hope that you guys will find this blog valuable and the new feature of JSN PageBuilder 4 supports a lot during your making process.
If you have any recommendations for the new J2Store elements of JSN PageBuilder 4 or regarding this blog, feel free to leave comments below and thank you in advance for your feedback.
