November 17, 2022

How to create an app like Sendo

Sendo is Vietnam’s leading e-commerce portal that sells almost anything that you may need. Vietnam has a high internet penetration rate, paving the way for brands like Sendo to take a lead in the market which has a lot of room to grow rapidly.

With the help of our no-code app builder Swipecart, you can create an app like Sendo and carve yourself a niche in the market. In this tutorial, we’ll demonstrate how you could do so in a few easy steps. Let’s start-

Here’s a detailed video tutorial for creating your mobile app with Swipecart.

With Swipecart, you can catapult your sales to unimaginable levels as we take care of your mobile app development completely. With the drag-and-drop app builder Swipecart, you can develop a mobile app yourself and compete with established players in the market like Sendo.

Steps to create an app like Sendo

To create an app like Sendo, download and install Swipecart on your existing Shopify or WordPress e-commerce website. You can get Swipecart from the Shopify App Store or WordPress Plugin Center.

  • Once done, sign up and activate Swipecart on your website’s backend. On the Swipecart dashboard, click on ‘Layouts’ from the left menu.

    sendo
  • To create a new layout, click on the “Create Layout” icon.

    sendo
  • A popup would appear asking you to name the layout. Let’s name this layout ‘Sendo’. Click ‘Create’. We can now start creating our app.

    sendo
  • A popup would appear asking you to choose from a blank layout or several pre-made layout templates

    sendo
  • As we’re creating an app from scratch, let’s select ‘Blank Layout’. Click on ‘Create Layout’. This will take you to the layout dashboard. We commence our app design from here.

Theme Setting

  • On the dashboard, you’ll see the ‘Theme Settings’ tab by default. Here, you can customize the app’s look and set branding elements to it.

  • Let’s start with the ‘App Bar Settings’ on the left of our Sendo layout dashboard.

    sendo
  • App Bar Settings- Here, you can customize the app bar that remains constant wherever you go on the app. To know what you can do with this, click here.   

    sendo
  • Next, customize the look of the  side menubottom baruser profile page, and  input style (welcome/sign-in page). For all these, go to the respective tabs on the left menu. A set of readymade templates are available for each. Select an option from the variants and save it to the app.

  • Theme Style Settings- Here, you can manage and edit the fonts, colors, and app loaders for a universal app usage experience. To know more about this, click here.

    sendo
  • Here’s what the draft app would look like after these settings. 

    sendo

Designing the home page

  • Once you’re done with the theme settings, go to the ‘Home’ tab. Here, you have the app pages list to the left, the draft app to the center, and the widget library to the right.

    sendo
  • Search Bar- No matter how many pages your app has, your app needs a search bar for easy and efficient navigation. In the widget library drop-down, select the search bar.

  • Drag and drop the search bar just below the App bar. Once done, adjust the way it looks with the ‘Edit Style’ option that appears upon hovering on the search bar in the draft home page layout.

  • For more information regarding the search bar, click here.

    sendo
  • Here’s a preview of the search bar on a mobile layout.

    sendo

Adding pages to the app

  • On the app pages list, you’ll find an ‘Add page’ option. A popup would appear upon clicking on this. Here, name the page as required. For more information about creating a new page, Click here.

    sendo
  • Collection grid- Next, you can set up a collection grid where you can add links to a set of images for easier navigation. Choose ‘collection grid’ from the widget library drop-down. Select the Round Collection grid. For more details, please click here.

    sendo
  • Upon hovering on the dropped Collection Grid widget, you will find an 'Add/Edit Content' option. Use it to add your images and links. To know how to use this option, click here.

  • Once you're done with adding the required links and images, you'll find an 'Edit Style' option below Add/Edit Content. Use it to customize the Collection Grid widget. To know more about using this option, click here.

    sendo
  • This is how the round collection grid will look on mobile.

    sendo
  • Single Banner- You can use a Single banner whenever you’d want to showcase a promotional campaign or discount offer. Choose a single banner from the widget library and drop it into the desired position.

  • To know more about the single banner, click here.

    sendo
  • Use the Add/Edit Content option to upload your image and link. ·After doing so, use the Edit Style option to customize the single banner’s look.

    sendo
  • Here's what the Sendo app would look like with the single banner.

    sendo
  • Product slider- Let's add a product slider to the home screen layout. Locate a drop-down box next to the home screen.

  • Select "Product Slider" from the widget list. Different variants are displayed just below the drop-down box.

  • Drag and drop the one you like into the home screen layout. To know more about product sliders, click here.

    sendo
  • Use the Add/Edit Content option to upload your image and link. After doing so, use the Edit Style option to customize the product slider’s look.

    sendo
  • This is how the app would look with the product slider.

    sendo
  • Product Grid - You can showcase some of your star products using a product grid. Choose a product grid style from the widget library and drop it into your draft home page layout. For more details about this, click here.

    sendo
  • Use the Add/Edit Content option to choose the products/ collections you’d like to showcase.

  • Once done, you can customize the product grid with the Edit Style option.

    sendo
  • Just as we did here, add the respective widgets to all other pages.

    sendo
  • Besides this, you could add widgets like a  Banner GridBanner SliderCollection GridProduct ListSearchsingle bannerCarousel Banners, and  Timer.

  • After you’ve added all the widgets, links, and images to your app, here’s what the draft Sendo app would look like.

Wasn’t that easy? With the help of Swipecart, it is quite easy to make an e-commerce app, just as we did here for Sendo. By using Swipecart, you eliminate the need for investing resources in conventional mobile app development.

If you have any queries regarding Swipecart, please feel free to Contact Us.