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 your marketplace tech stack?
  • What is your marketplace architecture?
  • Customizing your marketplace in Dittofi
  • What next?

Was this helpful?

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

Part III: Customizing your marketplace frontend without coding

In this section, we cover how you can customize your marketplace using Dittofi's visual development studio.

PreviousPart II: Understanding what features are included in the marketplace templateNextExploring Dittofi's marketplace API

Last updated 1 year ago

Was this helpful?

Dittofi allows you to customize your marketplace aesthetics and functionality 10x faster than traditional coding, with total flexibility and without having to write any code.

In this tutorial we will cover how you can customize your marketplace frontend and then launch your marketplace onto a custom URL using Dittofi's visual development studio (). In Part IV, we will look at how you can customize your marketplace backend.

Before you can start editing your marketplace, you first need to understand what is your marketplace tech stack and what is your marketplace architecture.


What is your marketplace tech stack?

Marketplace tech stack refers to the different tools and technologies that are used to make your marketplace work. It includes things like the programming languages used to build the your marketplace site, where the data is stored, and how the site is hosted online. In Dittofi your marketplace tech stack includes the following. This is known as a "full stack" marketplace.

Diagram currently under construction

As you can see here, there are four primary components to your marketplace tech stack:

  • Frontend UI: Built using a programming language called React, this is the interface where users engage with your marketplace. Its role is to present data in an attractive manner.

  • Backend Application: Written in Google Go, this handles the marketplace's core functionality. Invisibly to users, the backend applicaiton governs how your marketplace works controlling features such as signup, login, payments, and integration with external systems.

  • Database: Using a database called PostgreSQL, this stores crucial marketplace data like user profiles, listings, and transaction history. A well-designed database ensures security, efficiency, and adaptability.

  • Marketplace Hosting: Powered by Amazon Web Services (AWS), this is where your marketplace is hosted. Dittofi offers a secure, resilient and scalable hosting model. When you start to scale, the marketplace hosting is responsible for approximately 70% of your scalability.


What is your marketplace architecture?

Marketplace architecture refers to the how your marketplace software is organized. It explains how the different components in your marketplace tech stack interact. Below is a high level diagram that explains how your marketplace is constructed on Dittofi.

Diagram currently under construction

Looking at the diagram, you can see that on the frontend you have all of your React code. This is used to create all of the frontend pages and user interactions. The frontend code is also able to send data to the backend of your marketplace using something called frontend actions and frontend variables. Frontend actions connect to backend actions and pass data which is stored in frontend variables to the backend. The backend actions then perform some logic, using the variable data, connect to the database (if needed) and then send the result back to the frontend.

An example of this can be seen when a buyer signs up to your marketplace. In this case the buyer is going to fill in a sign up form. When the buyer types their username and password into the form, the form takes this data and pushes it into frontend variables. These variables will store the username and password for the particular user.

Next the buyer will click "Sign up". At this point, this click will trigger a frontend action. The action will collect up the frontend variables that store the buyers username and password and send this to the backend action. The backend action will then take the frontend variable data and map this data into what are called backend variables The backend variables are then sent to the database which will be used to store the buyers username and password.

Once the data has been successfully inserted into the database, the backend action will send a response to the frontend action. This response is to let the frontend action know that the operation has completed successfully and to direct the user to the next page.

Each time a user loads up a page or clicks a button, a frontend action will be triggered and this will interact with the backend of your marketplace in order to perform a new workflow like the one we just went through.


Customizing your marketplace in Dittofi

Open up your marketplace inside Dittofi's visual development studio (the design studio), as shown below.

The design studio is split up into several different tabs which are listed down the left hand side of the application. Each of the tabs corresponds to a differnt part of your marketplace tech stack, as shown below.

You can navigate between different tabs by clicking on them. Then, under each tab you will be able to edit the design and functionality associated with that part of your marketplace.

Customizing your colour pallet

To set your marketplace colour pallet, open up the Dittofi Page Builder and click on any element. From here you can then click on the Global Styles button on the right hand side of the page, as shown below.

This will open up a set of Theme Variables. You can use these Theme Variables to set the colors of elements used within your marketplace. Changes made to the colors will propagate throughout the marketplace and apply to all elements that are tagged a particular property. For example, below I change the primary color throughout my marketplace to the color #4f772d.

Note. You can change other colors from within this view also.

Adding new components to the page

Once you have setup your color pallet, you can then start to add new elements to the page. Let's start by navigating to the "Home" page. This will be the landing page for buyers looking to sign up to your marketplace.

To add new components to the page, you can click on the elements tab on the left hand side of the screen. This is shown below.

There are five different types of Elements.

  • Elements: a list of basic elements that you can drag and drop onto the page.

  • Partials: a list of reusable elements that you will create.

  • Prefabs: a list of reusable elements that you will create.

  • Custom: a list of custom elements that you can import into Dittofi.

  • More: libraries of prebuilt elements that you can use to speed up your marketplace development.

Click on the "More" button to bring up a list of prebuilt components and then click on "Core Components", as shown below.

This brings up a list of prebuilt, Core Components. At the top, you can then search for "Background Image". This will return a hero section with a background image. You can then drag and drop this onto the page, as shown below.

Gif in construction

You can browse through the rest of these prebuilt components to decide which other elements you would like to add to the page.

If you need any help customizing your marketplace frontend, you can schedule a call with one of our marketplace specialists and they will set you up with a Dittofi Developer who can help develop your marketplace frontend for $65 per hour.

Note. Trained Dittofi Developers can help you build up to 5 pages per 8 hour day for $520.

Changing the copywriting

To change the copywriting for a specific text element. Double click on the text element. You can then use your computer or laptop keyboard to make changes to the text.

Gif currently under construction.

Launching your marketplace to a custom URL

Once you have your marketplace looking the way you want it to look, the next step is to launch your marketplace to a custom URL.

What next?

At this point you should have a full stack, fully functional two-sided marketplace which is styled according to your brand guidelines and deployed to a custom URL. The next step is to customize your seller onboarding forms. This will require you to understand a few new concepts which we will get to in Part IV: Customizing your marketplace backend, without coding.

.

the design studio
Schedule a call now
Dittofi's visual development studio
The Dittofi Design Studio
Click on the "Global Styles" button.
Click on the "Elements" button to bring up the elements panel.
First click on "More" and then click on "Core Components".