Kreezalid: Create your Fiverr-like marketplace

hi welcome to this tutorial today I'm gonna show you how to use queasily to easily create a service-based marketplace like Fiverr first let me quickly show you what the final result will look like so here's how our service marketplace looks like we have a search fill where people can enter keywords to search for listings we also have this hero section with a nice background image and then we have some descriptive features and of course we have feature listings so these are you know a few examples of what can visitors expect to find on your marketplace so it's good to have those and so you can see the face of the fuel answers because it's service marketplace anyway let's see the listing details page so on that page you have the listing description of course and you also have the listing price and some options that users can choose from if they want and of course it can purchase the gig by pressing the button or send a message to the seller you also have a login form for users account and a signup form for users to create their account we also have a specific landing page for sellers interesting in joining the platform and they'll have their very own signup form which is different from the regular user signup form so the first thing we want to do is to configure the order types so the order types basically they are the the spine of the of how we process transactions and how our marketplace works to configure the order types go to settings and then to order types and here you'll have all the parameters that you can modify to customize the way the transactions will behave on the marketplace so here is the main configuration screen for your order types and the first thing you want to do is to make sure that you select booking rental as the transaction type next we want to show prices on each listing page so make sure that enable price on the listing is on yes and then we won't bother with the next two configuration options as they mostly for product marketplaces so we don't need them so we can skip that and leave it to no next up we have the text that will appear on the purchase button on listing pages just let me show you what I'm talking about quickly so when you go on a listing you will see a big green button here and this is this text right here so we want to customize this text to whatever we want but we'll get too fancy so we'll just put by this gig next you can is the text that will appear on free listings if you ever have the case where a seller provides free service so this is text up will appear in place of the purchase button and then of course you want to make sure you enable payments because you want to be able to have processed payments on your marketplace and the last option of this panel is the price units which is a way to say what's the time frame with which the freelancers will bill you know their time so usually it's per hour per day per night per week or per month so for our service marketplace we'll simply pick two first so per hour and per day and if you have a very specific price unit that's not here you can of course add a custom one next up are the booking rental options since we're not a booking rental marketplace but a service marketplace here the options don't apply so we can leave all the options to no next the product selling options don't apply so we move on next is the sample preview section and for our marketplace we want to allow our sellers to provide external links to maybe their previous work or some portfolio so make sure to enable this parameter and you can customize the label for this section but we'll just live it to live preview next head over to the Images tab and we'll make a few simple tweaks here first we want to use the suppliers avataras listing cover so when visitors will browse the listings they'll see the sellers pictures we set the next parameter to yes to enable our users to upload images and then select the number of images that can upload and we'll choose the maximum here which is three and we set the last parameter to no so users don't have to upload Elias one image next we'll quickly go over the quantity tab just to make sure that everything is set to know since we're not dealing with any products next head over to the fees tab and this is where we'll be able to specify the type and amount of fees that we want to have on each transaction so you can choose between two fixed fees or percentage fees so either a fixed amount or a 10% 15% 20% on each transaction and the parameter in the middle is simply when you're dealing with quantities but we're not dealing with quantities here so just leave it on this option no apply the fix of you wants per order it doesn't matter the next important configuration will have to take care of now is the user groups in attributes on your marketplace you will have two types of users you will have the sellers sometimes called the providers or the suppliers and the customers the buyers so right now we're going to go and create two user groups and then we'll take care of the attributes so from the settings page click on users and here there are some basic parameters but the first thing you want to do is create new groups so to do that we click on user groups and here you will see the list of your groups but we have known so far so we add a new group by clicking on add user group and we'll create our first group which will be the seller group so we give it the title of seller and of course we authorized them to post listings the next field is to define the type of entity most of you users will be if you're dealing mostly with individuals then select individual and if you're dealing with companies mostly then select companies it's required this info is required by the payment processors like stripe and mango pay but don't worry you're not tied to a specific type of entity if a later stage you want to work with one or the other you'll be able to the next parameter is public group what this parameter does is on the different sign of form it allows users to change groups themselves which we won't be using so we're just simply going to set this parameter to no because we're gonna have separate forms but one the specific form for the sellers and another one for the customers the next parameter is how you want to display the name of the users this group on the different listing pages and you have many options here but we'll just keep it simple and display only the first name next specify the URL to which the users of this group will be redirect to right after sign up so it can be any URL you want but a good thing to do is to redirect the seller since the seller groups or redirect them to the new listing creation page and the URL for this page is a slash listing slash new so every time a new user signs up then we'll be redirected to the new listing creation form and finally of course we want this group to be active so we said yes and click Save all right so we have our seller group here now and the next thing is to add the customer group so we're just gonna do the same thing so for the title we'll use customer and so the customer budget won't be allowed to post listings so we say no and usually the type of account is often individual but sometimes it can be agencies but it's up to you but again also the time customers are individuals again for the next parameter we don't want the users to have to specify which group they want to signup to because we'll have separate forms one for the customer world etc so we set it to no for the next parameter we use the same setting as with the sellers and for the URL to redirect the users to we're simply going to redirect every user that signs up to the main browsing page so it's slash listings again you could use any URL you want but this one is the most straightforward and then finally we want this group to be active so we simply select yes and click Save you now have your to user groups customer and seller and at anytime you can come back to the forum just by clicking on the name of the group and the most important formation here is at the top of the forum here is the direct link to the registration form this is the URL you will use wherever you want to link the forum for this group so here is the seller registration form so the most important part is this part at the end and usually in the menu for example this is the path that you'll use you don't have to use the full URL so for instance if I go to the customer forum I can select the URL and enter in my address bar and here it is the form is ready for people to sign up entering their info and this is good for our customers but what about our sellers we would like to have a little more of information about our sellers when they sign up so what we would like is to add more fields to the signup form and this is done via user attributes user attributes are a way to collect more info about specific groups so to add a user attribute go back to the user settings and then click on user attributes and here is the least of your user attributes the list is empty so let's add some right now so for instance a user attribute for a seller could be their level of experience whether they are a beginner intermediate or an expert so we're going to add that right now you can formulate it as a question so how many years of experience do you have next choose the type of field for the sign up form so here repeat the number type we want this field to be required and we don't need to display this information on the user profile next is the visibility and we're gonna choose to display this field both on the signup form and on the profile Edition form and lastly the sort priority parameter lets us configure the order of appearance of the fields in the signup form so the lower the number the higher this field will appear on the signup form so right now we only have one user attribute so we can live it to that now that the sort priority only concerns the user attributes you can place a user attributes field above the default fields and then just like the user groups seller and save now let's add another user attribute for our seller group this time we would like the sellers to give us the info whether they agree to work on premises or if they do remote work only or both so we're just gonna put that next let's choose the type of form input that will appear so it can choose either drop-down or check box and then we are able to list the different options that will appear on the signup form so the first option will be remote job and for the second option it will be if they prefer to work on premises and let's hide a third one which is a way for them to tell but they have no preference and they came to both at any time you can change the order of these options or add new ones or remove one next let's make this field required and we wanted to display on the user's profile and we keep the same settings as the first user attribute here the sort priority if we leave it to zero it will simply go after the first user attribute we created but of course you can put any number anyway then let's assign this user attribute to the seller group again and click Save and here we have our two user attributes that are linked to the seller group and now let's check out our seller signup form now that we've added these user attributes so to see the URL remember we go to the seller edit form copy the link here let's open it and here's how our cellar signup form looks like as you can see it has the same fields as the customer signup form but it also has two additional fields that correspond to the user attributes that we just created so the number years experience and the mission move preference so what we want to do now is to create a page specifically for sellers that will act as a landing page for them so they'll be able to sign up from this page so let me quickly show you how this page would look like it's a nice little landing page with a short explanation about what it means to become a seller on the platform and the benefits and of course a call to action that will redirect your future sellers to the signup form so let me show you how to create a page to create a page simply go to pages and here you have the list of all your marketplace pages so by default we create two pages about us and contact us to create a new page simply click on add page and here we'll simply add the page name so for instance become a seller and just note that this is the internal name the one you'll see in the dashboard it's not a page child just for your own organization you can specify the page title here and this is the text that the unusual your visitors will see and then the rich text editor to edit the content of your page and you can even add a featured image to make it even nicer you can also switch the rich text editor to source code mode and it's very useful if you know a little bit of HTML because it allows you to really customize the layout just as you wish internally we use the bootstrap framework so if you know how to use it you can create complex layout with columns and rows and buttons so for the example here we'll actually use some custom source code using a simple two columns layout made with bootstrap so we'll simply copy and paste some code here so it's a pretty simple layout with two columns click ok once you save the code you can directly edit any element simply by click on it here we can change the URL of the call to action so even if you used source code mode first you can still use the rich text editor right after to continue editing your content below you'll find the search engine optimization options and you can change the URL of this page if you want and the meta title and description here it's really up to you so we won't be filling those fields right now and of course you want this page to be visible online and finally we'll add a nice featured image to the page and now just click Save and your page is created if you want to see what your page looks like well you just have to copy the URL here in your address bar so copy the domain and then the path and here you go here's your page just created what you're seeing right now is our homepage we haven't customized it yet we'll get to that in a few minutes but just before that let's see how we can add a link to our menus so here's the main menu of the website and here's the footer menu so for instance let's add a link to the page we just created to the main menu right here to do that head over to your dashboard and go to navigation and here you have the two menus I just talked about so click on main menu here you have the devil' menu items so to add a new menu item click on add menu item on the left and enter the title of the menu item and in the drop down list select the page that we just created click on Save Changes and now if we go back and refresh we can see our new menu item appear so here we added the link to the main menu but if you also want to add it to the footer menu all you have to do is click on footer menu and simply repeat the process the next thing we want to do is to create our listing categories and attributes so to do that in the settings panel go to listings and then click on the button listing categories and we're gonna add some digital service categories like marketing development or design so to create a category click on add new category and here enter title so I'll start with web development and remember it's just like the pages here you have a name just for you and a title that will appear to the public next we can enter a category description and the text will enter here will appear at the top of the category page when users will browse by category so here we'll enter something really simple today next we'll add a nice featured image for the category page and then let's quickly review these options here so if you just display this category in the mega menu as the name say well it will show in the mega menu if you enable that mega menu in the settings and you can also choose whether you want this category to show up on search results page and finally you can use this category as a filter when visitors browse this Tings and just like pages since it's a category page you have the option to customize the su parameter like the URL the matter tunnel and Meta Description okay let's save this category an actually web development is kind of a broad categories of what we want is to have it act as a parent category and create subcategories that are more specific so let's do that right now so for instance we could add a specific language in web development so PHP next let's add a nice little description and now we can select the category we created previously as a parent of this one and let's save so now that I showed you how to create a category I'm gonna go and create a bunch of other ones and see you when it's done eight hours later alright now we have our main parent categories and their sub categories it's time to add some listing attributes listing attributes are two listings the same as user attributes are two users they are additional custom fields that can be used to add more information to your listings so let's see how to add a listing attribute go back to the general settings for listings click on listing attributes and then click on add new attribute so for instance here we can add an attribute to indicate where the sellers are going to deliver their services are they going to perform on premises or is it remote work only or can they do both so let's give it an explicit title and for the type we'll choose a drop-down list so the users can select from our options you can provide a help message if you want to make things more clear you and so we can now add our options so we're going to add remote work and on premises and we're going to add another option for a case where they wanted to both so now that you have your options the cool thing is that you can also use these listing attribute as a filter for when the the visitors browse the listings and if you select yes here a new filter will appear on the left side column of the listing pages and will allow visitors to filter the listings and for instance find all the listings that are remote only next we choose not to display the unselected option and the services it's usually important to know this info so we'll make it required we want it visible for everyone and sort priority here is just like the user attributes so it's the order in which the fields are going to appear in the form so we can leave it to zero here and it's sorted automatically and this listing attribute is rather relevant to all categories so we'll simply select all the categories and click Save all right let's quickly add another one this attribute will be used to indicate the sellers experience level for this field we could use the short text type or even the number type but I think it's a good thing to keep answers consistent so we'll go for drop-down and offer the beginner option from 0 to 2 years an intermediate option from two to seven years and finally we are the last option which is expert seven years or more you we'll use this attribute as a filter this time we won't make this attribute required and was simply assigning to all the categories to okay now let's just add one final example of an attribute and this one will be specific to a category so for instance let's add an attribute that would be specifically linked to the design category so it would be for instance the specialty in design domain so for the type we're gonna pick checkbox this time because we want to let users select one or more specialties so for instance one specialty could be Photoshop another one could be illustrator and another one yet could be Adobe Premiere we won't use this attribute as a filter and we'll leave the other option to no and we also won't make it required and make it visible to everyone but this time we'll assign this attribute only to the design categories so when a user will create a listing they will be able to indicate their specialty and there we have it our three listing attributes that will on one side allow our sellers to provide more relevant info when they create a listing and on the other side allow visitors to filter the listings using these attributes and now here comes the cool stuff adding useful features to enhance your marketplace in just a few clicks with apps so simply go to the App Store and there you'll find tens of apps that will make your marketplace a lot easier and more fun to use for instance you can give your users the ability to have a wish list so they can save their favorite listings you can have a full-blown messaging system so your users can talk to each other or you can add a Google map to the listings so let's do that right away we'll start off by installing the wish this plugin so users can maintain a favorite list to install this plugin simply click on the install settings I'm pretty straightforward here enable the plugin and then you can change the title that it used to identify the customers was just link so you could say for instance favorites or maybe save for later and then you can change the text of the button that will be used to add a listing to the wish list so we use the same thing as the field above and you can change the button icon if you want it to be hard I can restore icon the plus icon or even no icon so we'll keep it as a plus icon you can change the button background color in the button text color so we'll make it red with the white background and if you want you can customize the confirmation messages that I just played to the user after an action hit save and we're done now at the top of the app store you will see all your installed apps next let's install the messaging system it's called inbox click on install and with this plugin the settings are even more simple all you have to do is enable the plug-in customize a title if you want and customize the contact button that will appear on the listings but we'll leave it like this and now let's go back to the App Store alright now that it's done let's not another useful app the add an app the add an app comes in handy when you want to allow your sellers to offer extras on top of basic listing for instance on our digital services marketplace say a seller has a logo design offer the basic listing price includes one single logo well with this app the seller could add an extra offer like two other variants or unlimited revisions at an additional cost so a buyer can come on the listing and decide a purchase only the basic version or add the extra options on top so let's configure it and see how it looks like so we enable it and next you have a few options to control how the add-ins will look like on the listing page for the first setting will select the sidebar position we want it to look like this you can see an example of a done in the sidebar here and the rest of the settings here are for the listing creation form so you can customize the sections title in the form you can also add a little description to help your users next can customize the different labels that will appear in the form and for the last setting since we're dealing with digital services and not products will simply choose no quantity click Save and we're done configuring this atom now let's go and install the next atom the next atom we're gonna install is Google Maps so when a seller creates a listing they will be able to provide their location information so let's go over and click install so enable it and then provide your Google Maps API key you will find your Google Maps API key on the Google developers support website now the next settings are for the map is going to display by the phone so the default latitude and the default longitude and you can also specify the default zoom level the next settings allow you to configure what will be suggested when the seller start typing their location in the forum field so you can choose the suggestions to be see these regions full addresses or geo codes and finally the last setting allows you to choose specific countries from which the suggestions will be retrieved so for instance if your users are only in the United States just pick United States you can select one or several countries and if your marketplace is global simply leave the field blank let's save our changes and we're done the next app will install is the more pictures app and you guessed it this app will allow sellers to upload more pictures when they create a listing so let's go over and install it and all you have to do here is to enable the app once it's enabled the users will automatically have the ability to upload more pictures now let's go ahead and click Save Changes and now go back to the App Store the next thing we want to do is to enable our visitors to share the listings on a marketplace so the best way to do that is to install the social share app so the configuration is pretty straightforward you just have to enable the app and then you can customize the sharing section title so we'll use share this gig and you can select different sharing icon sizes small normal or big the family simply select which social networks you want to have share buttons for here by default we have Facebook Twitter and email share buttons let's add Google+ now I'm just kidding no one uses it anymore but we could add LinkedIn and maybe read it too all right now let's take save and we're good with the social share app the last app we want to install is the listing tags app there's literally no configuration and once you just enable the listing tags app when creating a new listing users will be able to specify tags and with the help of this tags just like Twitter or Facebook tags the visitors will be able to find this things more easily now it's time to customize your theme and your homepage so let's do that right away by clicking on theme and your marketplace comes with the king shirt theme that you'll be able to customize just like you want let's see how it looks by default so when you haven't customized anything your marketplace looks like this but of course we're gonna change that so go back to the admin dashboard click on customize and here we'll select general we're going to upload a header image so I'm going to show you what I'm talking about about the header image it's right here instead of a simple text we can have a nice logo image so let's upload it right now and we're also going to customize the favicon to make it even more personalized okay click Save and now you can see your uploaded images and let's have a quick look refresh and here you go you have your favicon and header logo great the next part is customizing theme colors and I'm not gonna go over each and every color customization possibility here because they are way too many just know that you can pretty much customize anything on your marketplace you can customize the color of the body tags the links the buttons labels and you can customize the color the background color and the border color you're really free to do whatever you want and for each section you can customize the colors so for the the pages and every type of content inside them you can customize everything in the blog section or the footer so really have a lot of control for every section even the header the home page listing etc also remember it's time to make a modification and forget to hit the Save button the next section allows us to edit our footer and we can select the number of columns we want to have in the footer so right here will go for three columns and right away we're presented with three rich text editors and inside those editors you can basically put whatever content you want so it can be links text images but most of the time you'll want to stick with links I'll just go ahead and fill this quickly all right now that our footer columns are filled let's get to social media links all you have to do is to enable it and insert your user names for each social media so here we'll use Facebook Twitter and YouTube and let's not forget to save our changes and if we go back to our home page let's see how it looks now we have our three columns footer and the social media links perfect here's our homepage and it's not very personal isn't it so let's go and customize it so first head over to your dashboard and go to theme and customize and this time click on homepage your homepage is divided into six different blocks and the first of them is the welcome block you see right here alright let's customize our welcome block and just a side note the blocks are all toggled on by default but if you don't want to show a block on the home page you can simply turn it off by toggling it off here so we're going to upload a nice background image for our welcome block and we can choose the background alignment so we'll keep it to middle you can even have a background video if you want just have to put the link here and it'll show on your home page next you can change the title of course here you want to put your headline and change the text under the headline usually it'll be your value proposition you next you can control the height of the section of the whole welcome block and we'll choose large here and here you set the text of your call-to-action so if you leave it feel empty you want to have any button but it's good practice to have a call to action on your home page so we'll fill this film and our coal traction will simply link to the listing browsing page the last setting of the welcome block allows you to control what kind of search you want to let your users perform so you can let them perform a search by keyword location or category so if we leave the field empty we don't have any search field we'll just have the text and the call to action but of course it's more useful for users to be able to search by keyword so let's just do that and now you see the search bar and people will be able to enter keywords and search gigs on your marketplace next is the featured categories block and it allows you to show three categories right under the welcome block so you can customize the title and you can customize each column separately and note that although it's called featured categories doesn't have to be categories you can actually link to anything you want to any page and change the image but we won't be using this blog on our home page so let's disable it and click Save the next block is the custom section and just as the name implies it's a part of the page that you'll be able to fully customize it's this part that you see right here so you have a lot of flexibility here and to obtain this result you can either use the rich text editor that's provided here or you can provide your own HTML source code and that's what I'm gonna do here I'm gonna paste a little snippet of code that I prepared and when I click OK you can see that the issue HTML is instantly displayed in the rich text editor and what's nice is that you can actually edit the text right here in the editor without having to go back to the source code so I'm saving it and let's go back to the page and refresh and here's our custom section note that the underlying styling is done with the framework bootstrap so if you know how to use it you can leverage the layout utilities of bootstrap and you can see that you have a little problem of CSS here but we'll take care of that in just a few minutes I'll just finish with the blocks first and then we'll take care of the CSS so the next section is the featured listings and as the name says it's a simple way to display feature listings on your home page so you can select the number of listings you want to show and you can customize the title so for instance let's change this to featured gigs and save and right away if we refresh the page we can see the title and the number of listings have changed of course these are our placeholder listings since known has been created yet now let's change the number listings to eight for a good measure when the next section is the home page editorial section and it allows you to add some extra content to your home page like a featured article or a special offer or any content that you want promoted on the home page but in our case we will be using this section so we simply disable it and save and the last block is the featured block post block it will allow you to display the latest blog articles that you wrote you can select the number of posts you want to display on the home page but we won't be using it either there is one little last thing that we need to do and it's to take care about this little messy CSS problem here so we have our blocks and we need to customize the CSS so to do so what we have to do is to go into our HTML and to identify the classes that need styling so we're now example it's the city class that we can see for each of our blocks and the ID of the section is cities so now all we have to do is to go into customize and customize CSS and here's a little snippet of code that I prepared in advance so we paste the CSS code SAVE and if we go back and refresh here we have our nice little layout and this is how our marketplace looks like at the end here you can see some example listings and if you go to the listing page you will see the list of a listing so we just created a few of them and you can click on any of them to open its details to see the ratings in the title and you can filter the list on the left side and you can filter by price or you can filter the results by using the listing attributes that you previously created you and there you have it a fully functioning service marketplace in under 45 minutes how cool is that

Channel: Kreezalid

Views: 5,563

Keywords: marketplace, saas, kreezalid, sharetribe, arcadier, fiverr, service marketplace, build a marketplace, develop a marketplace, create an online marketplace, marketplace cms

Id: 3G-IhSU4ers

Length: 43min 33sec (2613 seconds)

Published: Tue Apr 23 2019