Dittofi
  • Tutorials
    • Tutorial Index
    • Quick Start
    • Dittofi Essentials
      • Part 1: Frontend terms and concepts
      • Part 2: Backend terms and concepts
      • Part 3: Connecting frontend and backend
      • Part 4: Dittofi app structure
    • Dittofi App Design
      • 🏗️App architecture 101
      • ◼️Backend app development 101
      • 🟪Frontend app development 101
      • 🔰(optional) Web developer beginner series
  • Learn Frontend
    • 👨‍💻Getting Started
      • Welcome to Dittofi
      • Intro to the Dittofi Design Studio (Frontend)
    • 🟩Pages
    • 🟪Elements
      • Types
        • Button Element
        • Div Block Element
        • Form Block Element
        • Link Block Element
        • List Element
        • Modal Box Element
        • Tabs Element
        • Columns Element
        • Image Element
      • Partials
      • Prefabs
      • Custom
    • 🟧Variables
      • Array
      • Checkbox
      • Collection
      • Collection (Custom Model)
      • Collection (System Custom Model)
      • Custom Model
      • Date
      • Datetime
      • File
      • Json
      • Number
      • Number with decimal
      • Model
      • System Custom Model
      • Text
      • UUID
    • 🟨Events
      • 🟨External
        • HTTP Request
        • Run Endpoint
      • 🟨Flow Control
        • Condition
        • Run Action
        • Loop
        • Sleep
      • 🟨Maths
        • Add
        • Divide
        • Modulus
        • Multiply
        • Subtract
      • 🟨Navigation
        • Open Page
      • 🟨Notifications
        • Alert
        • Confirm
      • 🟨Other
        • Copy To Clipboard
        • Run Custom
      • 🟨Text
        • Concat
        • Contains
        • Ends With
        • I Contains
        • I Ends With
        • I Starts With
        • LTrim
        • RTrim
        • Text To Upper
        • Text To Lower
        • Trim
        • Starts With
      • 🟨Variables
        • Set Field
        • Remove Field
      • Validate
    • 🟦CSS Layouts
      • Holy Grail Layout
      • Side Bar Layout
      • Sticky Footer Layout
      • Sticky Header Layout
      • CSS Frameworks
    • 🔲CSS Frameworks
    • Component Libraries
    • Meta Attributes
  • Learn Backend
    • 🖥️Getting Started
      • Intro to Data
      • Intro to APIs
      • Build your first custom API
      • Actions & Events
    • 🟫Back-End Actions
    • 🟩Custom Models
      • 🟩Attributes
        • Array
        • Checkbox
        • Custom Model
        • Collection (Custom Model)
        • Collection (System Custom Model)
        • Date
        • Datetime
        • File
        • Number
        • Number With Decimal
        • Json
        • Text
    • ◼️Data Models
      • Database Fundamentals
        • Database relationships
      • ◼️Columns
        • Attachment
        • Auto Increment
        • Checkbox
        • Date
        • Datetime
        • Duration
        • Email
        • Long text
        • Link to another record field
        • Number
        • Number with decimal
        • Password
        • Phone number
        • Percent
        • Price
        • Rating
        • Single select
        • Single line text
        • URL
    • 🟥Events
      • 🟦Arrays
        • Append
        • Array Pop
        • At
        • Length
        • Prepend
        • Range
      • 🟦Conversions
        • Base64 Encode
        • Base64 Decode
        • Json Decode
        • Json Encode
        • Path Escape
        • Path Unescape
        • Query Escape
        • Query String Parse
        • Query Unescape
        • To Bool
        • To Float
        • To Int
        • To Str
        • Yaml Encode
        • Yaml Decode
      • 🟦Database Requests
        • Create
        • Create Or Update
        • Delete
        • Has Record
        • Read Event
        • Update
      • 🟦External
        • HTTP Request
        • SFTP Download
        • SFTP Upload
      • 🟦Files
        • CSV Reader Event
        • CSV Writer Event
        • File Read
        • File Save
        • File Size
        • File Type
        • JSON Reader
        • PDF Generator
      • 🟦Flow Control
        • Condition
        • Loop
        • Return
        • Run Action
        • Sleep
      • 🟦Notifications
        • Send Mail
        • Connect Websocket
        • Message Websocket
      • 🟦Maths
        • Add
        • Acos
        • Acosh
        • Asin
        • Asinh
        • Atan
        • Atanh
        • Cbrt
        • Ceil
        • Divide
        • Modulus
        • Multiply
        • Subtract
      • 🟦Security
        • Compare Password
        • JWT Decode
        • JWT Encode
        • Login
        • Logout Web User
        • Password Generator
        • Random Number
      • 🟦Time
        • Add Time
        • Day
        • Format Time
        • Minute
        • Nanosecond
        • Parse Time
        • Second
        • Time In
        • Year
        • Year Day
      • 🟦Text
        • Concat
        • Contains
        • Ends With
        • Execute Template
        • I Contains
        • I Ends With
        • I Starts With
        • Starts With
        • LTrim
        • RTrim
        • Replace
        • Regex Find All String
        • Regex Find String
        • Regex Match String
        • Trim
        • Text To Lower
        • Text To Upper
        • Text To Title
        • Url Getarg
      • 🟦Other
        • Assign
        • Run Custom
        • Redirect Web Page Event
        • Render Web Template Event
    • 🟧Variables
      • Array
      • Checkbox
      • Collection
      • Collection (Custom Model)
      • Collection (System Custom Model)
      • Custom Model
      • Date
      • Datetime
      • File
      • Json
      • Number
      • Number with decimal
      • Model
      • System Custom Model
      • Text
      • UUID
    • 🟪Webservices
  • Templates
    • Two sided marketplace template
      • Introduction
        • Part I: Installing and setting up the marketplace template
        • Part II: Understanding what features are included in the marketplace template
        • Part III: Customizing your marketplace frontend without coding
        • Exploring Dittofi's marketplace API
      • Listings
        • How to create a marketplace listing
    • How to build a CRUD app
  • Third Party APIs
    • OAuth 2.0 APIs
      • Introduction To OAuth 2.0
      • Google OAuth 2.0 - PART I
      • Google OAuth 2.0 - PART II
  • Dittofi Admin
    • Your Account
      • Workspace Admin
      • Manage Billing
      • Connect a custom domain
      • How to use a discount code to Dittofi Pro
  • FAQ
    • API Generator
    • How to write custom SQL?
    • Why does my image not display?
    • How can I set up Google Analytics?
    • Exporting and deploying my frontend code
    • What is a partial and what is a prefab?
    • How to set up a basic mulit tenant app on Dittofi
    • How to write a custom endpoint in Dittofi
    • How to integrate Font Awesome into Dittofi
    • How can I set up Dittofi to run on my own private server?
    • How to add roles such as Super Admin, Admin, Manager & User
    • How to prevent duplicate records being added to the database
    • What to do when relation cannot be created because their is violating data in the referenced table
  • Change Logs
    • Dittofi Change Logs
Powered by GitBook
On this page
  • What is Dittofi's two sided marketplace template?
  • Choosing a marketplace template
  • How to install your marketplace template
  • Setting up your marketplace template
  • What to do next

Was this helpful?

  1. Templates
  2. Two sided marketplace template
  3. Introduction

Part I: Installing and setting up the marketplace template

In this tutorial we will cover what is Dittofi's two sided marketplace template and how to choose, install and to set up Dittofi's marketplace templates.

PreviousIntroductionNextPart II: Understanding what features are included in the marketplace template

Last updated 1 year ago

Was this helpful?

What is Dittofi's two sided marketplace template?

Dittofi's marketplace template is an template can be used to as the foundation to build an entirely unique B2C or p2p marketplaces just like Amazon, Airbnb or Upwork. Marketplaces can be either:

Choosing a marketplace template

To choose a marketplace template, you need to first sign up to Dittofi and then go to the marketplaces page inside the platform. To do this you must first visit the sign up or login page @ . This is shown below.

If this is the first time that you've logged into Dittofi, you will then get a list of template applications to choose from. This includes full stack learning management systems, CRM solutions, directory apps and more. From this list, you can search for "Marketplace" in the search bar (as shown below) to return a list of the different marketplace solutions.

PLEASE NOTE: Not all of the templates are developed by Dittofi. Some are developed by our technology partners. However, as such some of the templates are full stack templates. This means that they are fully functional marketplace solutions. Other tempaltes, such as those developed by our partners are frontend only solutions.

Frontend only solutions can be combined with our backend marketplace template however, this will be more work to hook up the frontend to the backend.

Choose the marketplace that you're most interested in. To learn more about each template, click the "View Tempalte" button to view the individual marketplace template. This will bring up a details screen that tells you what features are included within each template. Below is an example of the Peer to Peer Rental Marketplace template.

How to install your marketplace template

This will then install your marketplace inside of Dittofi's visual development studio. This can take a few minutes however it saves you 3 - 6 months of custom development time, so it's worth the wait.

Setting up your marketplace template

Once your marketplace template has installed, the next step is to go through the guided onboarding for your marketplace. To do this click the "Build Code" button at the top of the marketplace screen.

Once the code has built, you can then click the "Preview" button and this will launch the marketplace template. This will load up an onboarding form for your marketplace template. This will allow you to enter key information such as the name of your marketplace, a description, the marketplace logo, your Stripe API keys and so on. Let's go through each of these steps now.

Build your marketplace's code

To build your marketplace code click "Build Code". This will generate your marketplace code and deploy this into Dittofi's prebuilt marketplace hosting model.

Go through the marketplace template onboarding

After the code has generated, click "Preview". Normally this will allow you to Preview your marketplace however, the first time you do this it will start a suite of forms to help configure your marketplace.

After clicking preview, you will see the following screen. Click "Get Started" to begin the onboarding process.

There are 10 steps to the onboarding process, let's go through each of these steps now.

Onboarding step 1. Give your marketplace a name

The first step in the process is to give your marketplace a name and description. Don't worry if you make a mistake here, you can change these at a later point in time.

Onboarding step 2. Create an admin of your marketplace

Step 2 is to enter an email and password for the admin of your marketplace. This can be changed later on and you have the option to add multiple marketplace admins.

Onboarding step 3. Input your marketplace logo

Next up, you need to input a marketplace logo. In this case we put in the name "Canal Hub" for my marketplace that will match canal boat owners with people who want to rent out canal boats.

You can change your logo later if needed.

Note. If you don't have a logo, you can use Google to search for a free logo generator on Google.

Onboarding step 4. Set your default currency

The default currency of your marketplace is the currency that you marketplace will default to. You can setup multiple currencies however there are certain best practices that you need to adhear to to make this work. For instance product, rental or service listings should only be in one currency. This will allow features such as the price filter to work well rather than comparing listings with different exchange rates such as the Yen vs the USD.

Onboarding step 5. Setting up payments

Now it is time to setup payments. To do this, you need to enter your Stripe API key. Stripe will give you two keys, a test key and a live, production key. It's best practice to enter your test key at this stage.

To find your test or production stripe key, visit your stripe dashboard and enter the developer section. You can then click to copy your stripe key, as shown below.

Once you have your Stripe key, you can come back to your marketplace and enter your Stripe key, as shown below.

Onboarding step 7. Publish

Congratulates, it is now time to publish your marketplace. Click "Publish" to finish setting up your marketplace. You now have a fully functional two sided marketplace that is backed by enterprise grade code written in React and Google Go.

After clicking the publish button, you will get pulled through to the homepage of your marketplace. Your marketplace logo will be in the top left of the screen and your marketplace name is set at the bottom left of the marketplace, as shown below.

What to do next

Now that you have your marketplace setup, in the next section we will give you a quick tour of the marketplace so that you can understand how it works.

Once you have chosen a marketplace template, the next step is to install the marketplace template. To do this click the install button, give your marketplace a name, choose a to install your marketplace into and click "Install". This will create the marketplace inside your Dittofi workspace.

Important. If you've not already done so, remember you will need to setup a account in order to accept payouts.

Please note. The defaults to a commission based business model. We will show you how you can change this later or, alternatively, you can work with our development team to quickly implement a custom marketplace business model.

Stripe Connect
marketplace business model
online marketplace
Product marketplace
Service marketplace
Rental marketplace
https://prod.dittofi.link/
Dittofi workspace
Step 1. Login / Sign up to Dittofi
Step 2. Search for marketplaces
Step 2. Review the details of the individual templates to learn what is includes.
Step 3. Click install to install your marketplace template
Step 4. Give your marketplace a name, choose a workspace and click "Create App"
Click the build code button to generate your marketplace code and deploy it
Clock "Preview" to load up your marketplace on a custom URL
Onboarding step 1. Enter the name and description of your marketplace
Onboarding step 2. Enter your marketplace operator details
Onboarding step 3. Input your marketplace logo
Onboarding step 4. Set your default currency
Onboarding step 5. Enter your Stripe key
Onboarding step 7. Click publish to finalize your marketplace setup.