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.
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 (the design 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.
Last updated
