Creating your First Admin Portal Plug-In

This guide covers

  • What Plug-Ins are
  • How to upload your very own Plug-In
  • Introduction to Arcadier's APIs
  • Introduction to the three interfaces on Arcadier's Marketplace Platform
Runtime: 3:49

Download Code (7.4KB)


By downloading this file, you agree that its use is subject to the applicable Terms of Service and You can only use and modify the content in these exercise files with the following agreements: That these files are for Your own personal use for education purposes and to practice the skills to develop on Arcadier. That by using or altering these samples codes, You understand that Arcadier is not responsible for any effects these codes may have on your application, software or environment, both positive or otherwise.

Guide Article


Plug-Ins are additional features or functionalities that a developer can create and implement on Arcadier’s Marketplaces, enabling Marketplace Administrators to add more features or functionalities to their marketplace. A plug-in would be needed when you're dealing with huge, extremely segmented code, which might include calls done in PHP (secure code/information). Any customisation created via a plug-in cannot be altered or damaged because the Marketplace Administrator does not have access to plug-in codes. 

Each plug-in is an application on its own - you can create a simple plug-in for user interface edits, to more complex features such as discount coupons or report generators. You can find public plug-ins that have been created on the Arcadier Platform available on Arcadier’s Plug-In Marketplace. Plug-Ins can only be installed and enabled by Marketplace Administrators on the Admin dashboard, but the features they implement can be used by all the users on a marketplace. They are essentially add-on applications that enhance very specific aspects, customizable by the Marketplace Administrator. 


Let's begin:

To upload your very own plug-in onto your marketplace, you will need:


  • To open up your Admin Dashboard 


  • To set up a Developer’s account. If in any case you do not have a Developer’s account, drop us an email at and we will send your login details to you! A developer’s account will give you access to a Developer’s Dashboard, an interface that allows you to upload your plug-ins’ co des as well as customize the Custom Fields and Custom Tables unique to each plug-in.


How to upload your very own plug-in


Before trying to produce your own plug-in, you can take a look at some of Arcadier’s actively working plug-ins to help the user to better understand developer flow, input implementation processes, and front to back-end connections. Once you are familiar with how plug-ins are incorporated, you can test various limits by browsing our modern APIs. You can find sample codes and coding guides on Arcadier’s GitHub page


  • In your Developer’s account under the Plug-In tab, you will see all the established plug-ins you created. A package is used to describe an individual plug-in. To create a new plug-in, click on the Add Package icon. You will then be asked to fill in a Package Name and Package Description for your plug-in



For the coding of the plug-in, we highly recommend that the specific structure of your root folder complies with Arcadier’s Plug-In structure. In this example, we have the “Hello World” root folder with two subfolders called Admin and User. The difference between these two folders is that code inside of the Admin folder affects only the Admin’s interface, whereas code inside of the User folder affects the User’s interface such as Merchants and Buyers.


Additionally inside of each subfolder, there are an additional three subfolders called csshtml, and scripts - the three main coding languages that comply with Arcadier’s platform. For this guide, we will only focus on the Admin interface side, so leave the three subfolders under User interface side completely empty.


  • Once you have the structure of your folder set up, open up any coding editor app of your choice and initialize the three files called style.cssindex.html, and script.js. These three files under your Admin folder should be placed in the css, html, and scripts subfolders respectively. These three files combined will create our “Hello World” plug-in

The style.css code refers to the styling of the page, such as how the elements will be displayed


The index.html code refers to the contents of the page


The script.js code refers to the function and purpose of the different elements



You can find these codes on Arcadier’s GitHub page.


Important Note


Each developer’s account is unique to a specific type of platform on Arcadier’s servers (i.e. Test platform, Sandbox platform, Staging platform, etc). This interface allows the developer’s plug-In code to be uploaded onto Arcadier’s Sandbox servers. Developers who build public plug-ins can go through the Developer Dashboard to submit their plug-ins for approval to Arcadier. Once approved, they will be made live on the Plug-In Marketplace for Marketplace Administrators to install and use.


  • To upload the newly-created plug-in onto your sandbox marketplace, zip the Admin and User file together. Go back to your Developer’s dashboard and find your newly created package. Click on the Edit button


  • Upload the Zip file and once the page reloads, this will indicate that your Plug-In has been successfully uploaded. Click on Enable for your plug-in to be seen by all users



  • Go to the Plug-Ins tab in your Admin dashboard. As this is a new marketplace, you will not have any plug-ins installed at this point in time. Click on the Available tab and you will see all the available plug-ins for you. Scroll through the page until you see the plug-in you have created, and click on the Install button to install your plug-in into your marketplace


  • Test out your the plug-in you have created to see if it functions the way it is supposed to. You have successfully created, installed, and used your first plug-in! You are now ready to explore the many features that your marketplace can offer



In the next guide, we will cover how to alter the User Interface through the use of Plug-Ins