Welcome to Shopus

Shopus - Laravel & NextJS Multi-Vendor Ecommerce Script


Shopus is complete E-commerce system to easily start your online E-commerce business. If you have planned to buy a single or multivendor E-commerce shopping platform. You can choose Shopus is the most suitable platform for single or multivendor ecommerce. It has fully functional attribute management system. You can add unlimitade product variant and product variant options with variant wise price.

This system was made using the popular Laravel php framework. Strong security was maintained during the development and there is no sql injection, xss attack, csrf attack possible.

Shopus has the following features.

Key Features

  • Laravel 9 is used as PHP Framework
  • User friendly codes and easy to navigate
  • Strong security of codes
  • Search product by category, sub-category, child-category, brand, product variant or custom name
  • Registration verify with email
  • Product variant option
  • Variant wise product price
  • Coupon management
  • Product wishlist
  • Flash Deal
  • Courier area wise shipping charge setup option
  • Shipping module
  • Address Book
  • Order Tracking
  • Announcement system
  • Maintainance module
  • Multi Vendor System
  • Language change option

Payment Methods

  • Paypal
  • Stripe
  • Razorpay
  • Flutterwave
  • Mollie
  • Paystack
  • Instamojo
  • SslCommerz
  • Cash on delivery
  • Bank Payment

Admin Features

  • 100% secure admin panel
  • Category, Sub-Category, Child-Category management
  • Brand management
  • Product management
  • Seller Product management
  • Product variant management
  • Flash deal product management
  • Product reviews management
  • Product report management
  • Country, state and city management
  • Courier area wise shipping charge setup
  • Shipping management
  • Coupon management
  • Payment method management
  • Advertisement management
  • Seller payment withdraw management
  • Withdraw method management
  • Customer management
  • Seller management
  • Admin management
  • SEO Settings for all pages
  • Slider management
  • Home page management
  • Service management
  • Maintenance Mode management
  • Announcement modal management
  • Mega menu management
  • Dynamic website footer
  • SMTP server mail
  • Email configuration and template setting
  • Manage HTTP request Error Page
  • General Setting management
  • Dynamic Pagination option
  • Multi admin creation possible
  • Clear database option to start the website as fresh installation
  • FAQ create, edit and delete option
  • About Page management
  • Terms and Conditions, Privacy Policy Page management
  • Custom dynamic pages create, edit and delete option
  • Language change option for mobile app and admin panel
  • Subscriber manage with email to subscribers option
  • Profile information, photo, password change option
  • Forget and reset password option
  • Blog Category create, edit and delete option
  • Blog create, edit and delete option
  • Manage Blog Comments
  • Contact message management
  • And more...

User Features

  • Search
  • User registration system with email verification
  • User Login, forget and reset password option
  • Profile information, photo, password change option
  • See orders and details.
  • Order Tracking
  • Dashboard management
  • Product review management
  • Wishlist management
  • Address Book Management
  • Quick Add to cart
  • Product Quick View
  • Share product socail media
  • Print order invoice
  • Compare products
  • subscribe
  • Banner Ads
  • Review product
  • Enable/disable MultiVendor SingleVendor feature
  • Next SEO supported

Seller Features

  • Manage shope profile and user proile
  • Change password option
  • Order log
  • Product management
  • Product variant management
  • Product report log
  • Product review log
  • Manage withdraw request
  • Withdraw log

You will need to make sure your server meets the following requirements:

  • PHP >= 8.0.2
  • BCMath PHP Extension
  • Ctype PHP Extension
  • Fileinfo PHP extension
  • JSON PHP Extension
  • Mbstring PHP Extension
  • OpenSSL PHP Extension
  • PDO PHP Extension
  • Tokenizer PHP Extension
  • XML PHP Extension
  • Node.js 16.15.0 or later
  • Compatible Browsers (Firefox, Safari, Chrome, Edge)

The installation of this script is super easy. If you can install normal php based scripts on your server, you can install our script. We will tell you how to install this script step by step on a server.

If you extract the zip file, you will see that there are total 4 folders.

The folder names are: admin_panel, database, documentation, frontend_Website. The "admin_panel" folder is the main laravel source codes. The "database" folder contains the main database file "database.sql". The "frontend_Website" contains the website fronted.

Creating Database using Cpanel

1. Login to your hosting's cpanel using the login information. You will see an interface like this:

2. You will get a search section in the cpanel. Search there by writing the word "database". You will get some options. Click on "MySQL® Database Wizard" option.

3. Then in Step 1, you will have to create a database. In the text field, give your database name and click on next step.

4. Then in Step 2, you will have to create a database user. Give your username and passwords here. Then click on "Create User" button.

5. Now a permission page will come. Just check the tick mark on "ALL PRIVILEGES" and you will see all the options will be automatically checked.

6. Click on the "Next Step" button in the bottom.

7. Database and user creation step is done. Now go back to home and again search like before with the word "phpmyadmin". Click on the "phpMyAdmin" option.

8. Now the main phpmyadmin page will come. Click on the newly created database "websolu1_testdb" from the left side.

9. Click on the "Import" option from top and then select the file "database.sql" that is in the "database" folder of the script.

10. Then click on the "Go" button from bottom.

11. After the task is successful, you will get a success message.

12. All task related to database is done.

Uploading Files using Cpanel

1. In the search field of your cpanel, write the word "file". You will get a "File Manager" option. Click on that option.

2. We use mamunuiux.com as a test deployment folder

3. As we have used mamunuiux.com as our deployment folder and create a folder inside it named "admin" to install our backend

4. You will get an interface like this.

5. Drag and drop the zip file here or just click on the "Select File" and select the file from your computer. You will see a progress of uploading file. Wait until it is finished.

6. After finishing the upload, you will see a green bar. It indicates that upload is successful.

7. Extract the zip file we just uploaded.

8. Press on "Extract Files" button.

9. It will take only a few minutes. After finish, you will get a window like this.

10. Right click on ".env" file and click on "Edit".

11. Now edit this file and put the database_name, database_username and database_password you created previously here. And also put the app_name, app_url in this file. Then click on the "Save Changes" button.

Your task is done and you can use our script without any problem. :)

Uploading Files using FTP

1. Download any FTP client on your computer like "FileZilla". Search on Google by "FileZilla" or go to their website to download:
https://filezilla-project.org/

2. Use the first option to download

3. After download, install it and open. The interface will be like this:

4. You can collect your FTP information contacting your hosting provider. Or, going to cpanel, you can create your FTP. In cpanel, search for "FTP".

5. Put ftp username, password in the form. Become sure, you delete the marked box data in the following image.

6. Click on "Create FTP Account" button.

7. Your FTP information will be like this:
FTP Host: {your hosting provider will give you host name}
FTP Port: 21
FTP Username: testftp@Quomodosoft.com
FTP Password: {that you gave while creating the FTP}

8. Now in filezilla put those information and click on "Quickconnect" button.

9. If connection is successful, you will get an interface like this:

10. Now in the left side box, go to the location where you have extracted the script's file. And in the right side, go to public_html.

11. Then right click on the "admin_panel" from left side box and click on "Upload". All the files then will be uploaded into the "public_html" of the right side.

12. Search the ".env" file, right click on it and click on "View/Edit" option.

13. You will see an interface like this.

Change the database_name, database_username and database_password from here. Also set the app_url, app_name from here and try to click on close button. When you will try to close, it will ask you for save before closing. Click on save and you are done!

Before using and run this script, you must have to change the following information.
1. Open the .env file with a text editor and change the database settings
2. First, set up the APP_NAME,APP_URL, database name, database_username and database_password.

Make sure you have SSL Certificate , As this is mandatory to deploy PWA.

  • Step 1: Replace all files(icons & splash images) with your icons, splash images keeping the same resolution, name & extension.(root/public/images/icons)

  • Step 2: Configure manifest.json (root/public/manifest.json)

    Change those bold marked content with your app name & color theme

    "name": "Shopus"

    "short_name": "Shopus"

    "description": "Shopus progressive web app"

    "theme_color": "#F3EFE0"

  • Step 3: change .env

    1 means pwa (active) or 0 means pwa (inactive)

    NEXT_PWA_STATUS=1

  • Step 4: If you have node_modules and package-lock.json or yarn-lock.json then remove these and reinstall packages using npm install or yarn

  • Step 5: then run npm run build or yarn build and deploy

Vercel (Recommended)

The easiest way to deploy Next.js to production is to use the Vercel platform from the creators of Next.js. Vercel is an all-in-one platform with Global CDN supporting static & Jamstack deployment and Serverless Functions

Also More Useful Links.

https://www.digitalocean.com/community/tutorials/how-to-deploy-a-next-js-app-to-app-platform
https://www.netlify.com/with/nextjs/
https://scotch.io/tutorials/easily-deploy-a-fullstack-nextjs-app-with-vercel
https://vercel.com/solutions/nextjs

As we have created a sub domain for the deployment named mamunuiux.com and created a folder inside it named "admin". To install the admin panel. So followings are the admins or user structured.

The default credentials of the script are:

Admin Login

URL: https://mamunuiux.com/admin
Login Email: admin@gmail.com
Login Password: 1234

Seller Login

URL: https://mamunuiux.com/seller/login
Login Email: user@gmail.com
Login Password: 1234

➤ Now your baseURL is https://mamunuiux.com/shopus/api

To get started follow this steps:
 
  1. Install Node.js: First, you need to install Node.js on your computer. You can download the latest version of Node.js from the official website.

  2. Now go to Frontend_Website folder which was downloded from Codecanyon (Previously we unziped the main folder). you will see the bellow file structure. You dont need to move the folder anywhere else. keep the folder Standby, once we have the build file you will get the step by step instructions later part of this documentation.
    **if you need Video Instruction Click Here

  3. open .env file from your Frontend_Website folder in your code editor and Edit .env file and set your api base url

    For example your base url https://www.mamunuiux.com/shopus/api and you get your API

    JSON data. then remove "api" in this url and set this url as a NEXT_PUBLIC_BASE_URL in .env file
  4. Now open your terminal and run this command from your Frontend_Website folder or directory :

    npm install and npm run build
  • Step 1:

    After completing the installation proccess, proceed to step two.

  • Step 2:

    Select all files and directories then Compressed zipped.

  • Step 4:

    Upload zip file in your application server then extract application root directory. In that case for demo purpose we have used mamunuiux.com/shopus/api as our subdomin for the documentation demo.

  • Step 5:

    Upload the build file inside the subdomain we created for deployment purpuse named mamunuiux.com or in your root Folder.

  • Step 6:

    Setup nodejs application in your server panel

  • Step 7:

    Create Nodejs app

  • Step 8:

    Please follow the instructions below

  • Step 9:

    Firstly, stop your application then press run npm install button for package installation

  • Step 10:

    When successfully npm install then press Start app button and go to your side and enjoy :)

  • Step 1:

    Go to https://vercel.com/ and signup vercel

  • Step 2:
    npm i -g vercel
  • Step 3:

    When successfully install vercel in your system. then go to project directory and open your terminal and run this command

    vercel
  • Step 4:

    Follow the steps

  • Step 5:

    When successfully deploy then vercel provide your application url

  • Step 1: Build your Next.js app: Before you can deploy your Next.js app, you need to build it. To do this, navigate to your app's directory in the terminal and run the following command:
    npm run build

    This will create a production-ready build of your app in the ".next" folder.

  • Step 2: Install Nginx: If Nginx is not already installed on your VPS, you can install it by running the following command in the terminal:
    sudo apt-get install nginx
  • Step 3: Configure Nginx: Create a new server block in the Nginx configuration file by creating a new file in the "sites-available" directory. For example:
    sudo nano /etc/nginx/sites-available/myapp.conf
  • Step 4: Inside the file, paste the following configuration:

    Replace "example.com" with the domain name or IP address of your VPS.

  • Step 5: Enable the server block: Create a symbolic link from the "sites-available" directory to the "sites-enabled" directory by running the following command:
    sudo ln -s /etc/nginx/sites-available/myapp.conf /etc/nginx/sites-enabled/
  • Step 6: Restart Nginx: Run the following command to restart Nginx and apply the changes:
    sudo systemctl restart nginx
  • Step 7: Start the app: Start your Next.js app by running the following command in the terminal:
    npm start
  • Your app should now be accessible at the domain name or IP address of your VPS. Configure DNS: Finally, if you want to make your app available at a custom domain name, you will need to configure the DNS settings for your domain name to point to the IP address of your VPS.

Website General Setting can be set up from the admin panel. Go to "Setting" from the sidebar. You can setup your frontend app_url, default_currency, timezone etc from here. Also you can enable and disable multi vendor system from here. If you want to run this site as a single vendor you can disable the multi vendor system. See:

Logo and favicon can be set up from the admin panel. Go to "Setting" from the sidebar. See:

Google Recaptcha can be set up from the admin panel. Go to "Setting" from the sidebar. See:

To get your recaptcha keys, go to this link:
https://www.google.com/recaptcha/admin/create
Select version 2.

Add your website's domain name or subdomain name here and after submit you will get a site key and secret key.

Tawk Live Chat can be set up from the admin panel. Go to "Setting" from sidebar. See:

To get your tawk live chat link . goto this link https://dashboard.tawk.to/login add your website's domain name or subdomain name here and after submit you will get a tawk live chat link.

Google Analytic can be set up from the admin panel. Go to "Setting" from sidebar. See:

Custom Pagination can be set up from the admin panel. Go to "Setting" from sidebar. See:

Facebook pixel credential can be set up from the admin panel. Go to "Setting" from sidebar. See:

To get your facebook app id. Go to this link and create a new app:
https://developers.facebook.com/

SMTP Email can be set up from the admin panel. Go to "Emai configuration > Setting". See:

Email template can be set up from the admin panel. Go to "Emai configuration > email template". See:

Payment Method can be set up from the admin panel. You can setup gateway currency as your requirement. There are currency change option available. Go to "Ecommerce > Payment methods". See:

To get your paypal client id and secret id, goto https://developer.paypal.com/developer/accounts and create a new app and show app details See:

To get your razorpay credentails, goto https://razorpay.com/

To get your flutterwave credentails, goto https://dashboard.flutterwave.com/

To get your mollie credentails, goto https://www.mollie.com/

To get your paystack credentails, goto https://dashboard.paystack.com

To get your instamojo credentails, goto https://www.instamojo.com/

Clear Database setting can be manage from the admin panel. Go to "Clear database" from sidebar. If you want to use the software from scratch, you have to select this option. You do not need to remove the existing data one by one. See:

Website language can be set up from the admin panel. Go to "Language >>...." from sidebar. See:

SEO setting can be setup from the admin panel. Go to "Manage website >> SEO setup" from sidebar. See:

Contact Message can be manage from the admin panel. Go to "Contact Message" from sidebar. See:

Subscription email can be manage and send mail from the admin panel. Go to "Subscribers".See:

Order can be manage from the admin panel. Go to "Orders >>...". See:

Product Category can be manage from the admin panel. Go to "Manage Categories >> ..". See:

Product Brand can be manage from the admin panel. Go to "Manage Products >> Brands ..". See:

Product Create can be manage from the admin panel. Go to "Manage Products >> Create Product". See:

Product Review can be manage from the admin panel. Go to "Manage Products >> Product Reviews" from sidebar. See:

Product Report can be manage from the admin panel. Go to "Manage Products >> Product Report" from sidebar. See:

Location can be manage from the admin panel. Go to "Locations >> Country" from sidebar. See:

Flash Sale can be setup from the admin panel. Go to "Ecommerce >> Flash Sale" from sidebar. See:

Coupon can be setup from the admin panel. Go to "Ecommerce >> Coupon" from sidebar. See:

Specification key can be setup from the admin panel. Go to "Manage Products >> Specification key" from sidebar. See:

Shipping Method can be setup from the admin panel. Admin can setup area wise shipping charge depend of product weight, quantity and price. Go to "Ecommerce >> Shipping Rule" from sidebar. See:

Withdraw Method can be setup from the admin panel. Go to "Withdraw Payment >> Withdraw method" from sidebar. See:

Seller withdraw can be manage from the admin panel. Go to "Withdraw Payment >> Seller withdraw" from sidebar. See:

Customer can be manage from the admin panel. Go to "Users >> Customer List" from sidebar. See:

Seller can be manage from the admin panel. Go to "Users >> Seller List" from sidebar. See:

Slider can be manage from the admin panel. Go to "Manage website >> Slider" from sidebar. See:

Home page section title can be manage from the admin panel. Go to "Manage website >> Home page section title" from sidebar. See:

Home page popular category can be manage from the admin panel. Go to "Manage categories >> Popular Category" from sidebar. See:

What is popular category ? where will be shown popular category on the front end?. Please See:

Home page featured category can be manage from the admin panel. Go to "Manage categories >> Featured Category" from sidebar. See:

What is featured category ? where will be shown featured category on the front end?. Please See:

Service can be manage from the admin panel. Go to "Manage website >> Service" from sidebar. See:

Seller Terms and conditions can be manage from the admin panel. Go to "Manage website >> Seller Condition" from sidebar. See:

Website maintainance mode can be manage from the admin panel. Go to "Manage website >> Maintenance Mode" from sidebar. See:

Announcement modal can be manage from the admin panel. Go to "Manage website >> Announcement" from sidebar. See:

Mega menu category can be manage from the admin panel. Go to "Manage Categories >> Mega menu category" from sidebar. See:

Mega menu sub category can be manage from the admin panel. Go to "Manage website >> Mega menu" from sidebar. See:

Default avatar can be manage from the admin panel. Go to "Manage website >> Default avatar" from sidebar. See:

About Us page can be manage from the admin panel. Go to "Pages >> About us" from sidebar. See:

Contact Us page can be manage from the admin panel. Go to "Pages >> Contact Us" from sidebar. See:

Custom Page can be manage from the admin panel. Go to "Pages >> Custom Page" from sidebar. See:

Terms and Conditions Page can be manage from the admin panel. Go to "Pages >> Terms and Conditions" from sidebar. See:

Privacy Policy Page can be manage from the admin panel. Go to "Pages >> Privacy Policy" from sidebar. See:

FAQ Page can be manage from the admin panel. Go to "Pages >> FAQ" from sidebar. See:

Error Page can be manage from the admin panel. Go to "Pages >> Error Page" from sidebar. See:

Login Page can be manage from the admin panel. Go to "Pages >> Login Page" from sidebar. See:

Blog Category can be setup from the admin panel. Go to "Blogs >> Blog Category" from sidebar. See:

Blog can be setup from the admin panel. Go to "Blogs >> Blog" from sidebar. See:

Blog Comment can be manage from the admin panel. Go to "Blogs >> Comments" from sidebar. See:

The main Admin can add more admins into the system. Other admins can not delete the main admin. But the main admin can delete other created admins in this system. Go to "Admin List" from sidebar. See:

Admin can change personal information and password from topbar. See:

Go to https://your_website_domain/seller/login

Order can be manage from the Seller panel. Go to "Orders >>..." from sidebar. See:

Create product can be manage from the Seller panel. Seller product won't be display until admin approval. Go to "Manage Products >> Create Product" from sidebar. See:

Product can be manage from the Seller panel. Go to "Manage Products >> Products" from sidebar. See:

Seller can withdraw his payment from the Seller panel. Go to "My Withdraw" from sidebar. See:

From the topbar seller can manage profile information and change password . See:

From the topbar seller can manage shop profile information. See:

Demo

Admin Panel: https://mamunuiux.com/shopus/admin/login
Admin Panel Login: admin@gmail.com | 1234
Seller Panel: https://mamunuiux.com/shopus/seller/login
Seller Panel Login: seller@gmail.com | 1234

If you need any help from us, you can contact via our support email:
abdur.rohman2003@gmail.com

Our support will reply within 24-48 hours.

After download the script from codecanyon you can get a zip file. After unzip the file you can see total 4 folders. In the 'admin_panel' folder you can see 2 folders again. In the 'main_files' folder there are main laravel script available. In the 'all version' folder you can see version wise folder. See:

For update any version go to the version folder and you can see a "update.zip" file. See:

Now goto your server and root project directory. Create e new folder, the name of folder is "update". See:

Inside the 'update' folder you need to upload the "update.zip" file. See:

Now extract the zip file. See:

Now go to your "http://your_domain.com/update". See:

If your script version is 1.0 you have to add new code ".htaccess" file. The code is "RewriteRule ^update - [L]". For add this code go to project root directory, open ".htaccess" file and past this code. See:

Now you can see our version wizard. See:

In this page you need to click the update button step by step. After successfully update you can visit your site and enjoy latest version See:

Version 1.2

Overall:
- Product bulk import option added on the admin panel 
- Product bulk export option added on the admin panel 
- Country bulk import option added on the admin panel 
- Country bulk export option added on the admin panel 
- State bulk import option added on the admin panel 
- State bulk export option added on the admin panel 
- City bulk import option added on the admin panel 
- City bulk export option added on the admin panel 
- Shipping rule bulk import option added on the admin panel 
- Shipping rule bulk export option added on the admin panel 
- Product bulk import option added on the seller panel 
- Product bulk export option added on the seller panel 

Version 1.1

Overall:
- Wishlist remove issue fixed on the frontend
- Razorpay payment issue fixed
- Demo handler issue fixed
- API added for mobile app
- Frontend css optimized
- Frontend speed optimized
- Database generate featured added for version update
- Version auto update feature added

Version 1.0

Initial Release