Many website owners want their site to have a beautiful and stylish look in order to compete with other websites, therefore, they need to use Page Builder, and SP Page Builder is seemed to be one of the most well-known Page Builder in Joomla community.

Integrating J2store with SP Page Builder, you can show your site product in the layout you designed through using SP Page Builder, as well as allowing you to insert product shortcode to any custom widgets.

Notice: J2store SP Page Builder add-on plugin is fully compatible with SP Page Builder version 2 and 3.


Step 1: Download J2store SP Page Builder add-on here and go to Joomla installer to install it

Step 2: When the installation is finished, please access Extensions > Plugins and check if the plugin “J2Store – SPPageBuilder” has been enabled or not. If it is not, please enable it.

Use cases

Do you want to display product by SP Page Builder? You can do this with both J2store Product shortcode and Product display module.

Publish Product display module by using SP Page Builder?

Notice: please enable and configure the Product Display module by going to Extensions > Modules.

Sp Modj2Prod

Step 1: Going to SP Page Builder > Pages and click NEW to create a new page

Step 2: Set the page title and click Add New Row.

Sp Add New Sp Add Newrow

Step 3: Click on Add New Add-On

Sp Newaddon

Step 4: From Addons list > Joomla Module.

Sp Joomod

Step 5: There is a popup window showing, please set Admin title and label, then move to Addon Options to choose Module to the type as well as choose mod_j2products as the Module.

Step 6: Click Apply

Sp Prodmod

You can see the result in frontend:

Sp Prodmodfront

Use J2Store product shortcode by using SP Page Builder?

Step 1: Go to SP Page Builder > Pages and click NEW to create a new page

Step 2: Set your page title > Add New Row.

Step 3: Click on Add New Add-On

Step 4: There is a popup window appearing, then you will see J2store in the left side menu panel. Click it to see J2store Add-on.

Sp J2Addon Sp J2Store

Step 5: Click J2store Addon will show you a popup screen with general settings and style configuration.

Step 6: Set the title and scroll down till you see the option dropdown “Product shortcode tags”. Choose it and type Product ID which you want to show, at the provided textbox beside the Product shortcode tags)

 Sp J2Addonsettings Sp J2Shortcode
Step 7: Click Apply.

That’s it! If you have any other question, please let us know by leaving a comment below, we will reply as soon as possible!

Image Credit: J2store

5/5 - (1 vote)

Joomla! 5 update How to Upgrade Joomla! 4 to Joomla! 5? Read our blog
Happy Lunar New Year Grab 50% Off for everything on today, don't miss it. Coupon code: LUNARNEWYEAR50 Redeem Now