September 14, 2022

How to create an app like Trendyol

rendyol is the fastest-growing company invested in the shopping industry business through its e-commerce website and app. Alibaba is a prominent stakeholder in this company. It competes with other fashion retailers such as Zara and Macy’s and offers trendier clothes at lower prices. It serves 30 million shoppers worldwide and delivers over one million packages daily.

Trendyol app is a super-app as it is simple to use and has all the features to cater to a global audience. Let’s create an app like Trendyol using Swipecart, a drag-and-drop app builder without writing a single line of code. We'll talk more about Swipecart at the end of this tutorial. First, let’s start building the app.

How to create an app like Trendyol:

Swipecart is available on the Shopify app store or the WordPress plugin. Install and activate it. You'll be taken to the dashboard. Let's now start designing the app.

  • The first step is to create a new blank layout for the app. Click on "Layouts" on the left menu.

    Create An App Like Trendyol
  • To create a new layout, click on the “Create Layout” icon.

    Create An App Like Trendyol
  • Clicking on “Create Layout” will open a popup. Let's give a name to the layout.

    Create An App Like Trendyol
  • Type the layout name as "Trendyol" and click the "Create" button.

    Create An App Like Trendyol
  • Swipecart has two options. You can select any one from the readymade default templates. Else, you start designing the app with an empty layout. For our task, we select the second option. So, highlight the "Blank Layout" icon and click on "Create Layout".

    Create An App Like Trendyol
  • You’ll be taken to your layout dashboard with the default tab as “Theme Settings”. The primary function of “Theme Settings” is to customize the app's look. It has multiple options to set branding elements for your app.

  • First, let's customize the app's bar. Stay on the "Theme Settings" tab and click on "App Bar Settings" in your blank layout's left menu list.

    Create An App Like Trendyol
  • Here, you customize the look of the app bar such as app bar color, font color, bottom radius, and elevation. Next, you either enable or disable the displaying of notification, search, cart, and favorite icons on the app bar. We have enabled the search bar. Upload the logo or title and set the alignment to complete customizing the app bar.

    Create An App Like Trendyol
  • Next, let's move on to customize the theme. Click on "Theme Style Settings" on the layout's left menu bar. Here, change the font style, scale, and color. Also, change the app's primary and background colors. Upload a loader GIF for your app. Ensure the GIF meets the specifications mentioned here. Save the changes after completion.

    Create An App Like Trendyol
  • Similarly, customize the side menu, bottom bar, profile page, and input style settings. It's simple. You just have to choose one from among the different options and save the changes.

  • Here's a glimpse of the Trendyol app with the customized app bar with search included, bottom bar, and theme.

    Create An App Like Trendyol
  • Next, we move on to customize the home screen of the app. Click on the “Home” tab to edit the home screen layout. The app's home screen layout opens up with only the app bar above and the bottom navigation bar.

    Create An App Like Trendyol
  • Let's add a single banner. There's a drop-down box to the right of the home screen layout. Click on the drop-down icon and select "Single Banner" from the list. Various options for single banners are displayed below the drop-down box. Click on one, and drag and drop it into the home screen layout.

    Create An App Like Trendyol
  • Let's add an image to the widget. Hover the mouse pointer over the dropped widget. Spot the "Add/Edit Content" option to the right of the widget. Clicking on it will open a popup. Add a title to the single banner. Click on the upload icon to add an image from your product or collection list.

    Note:Ensure that the size of the uploaded image matches the aspect ratio specified in the single banner widget.

  • Checking on "Internal Linking" will link the banner to the specific product/collection page. Click on "Save Banner" after you're done with the uploading task.

    Create An App Like Trendyol
  • You can also edit the style of the single banner box. To do this, again, hover the mouse pointer over the widget. Now, you'll see an "Edit Style" option below the "Add/Edit Content" option. Click on it to open a popup screen. Here, edit the container radius and padding. Save the changes and update the app layout.

    Create An App Like Trendyol
  • The Trendyol app with the added single banner now looks as in the image below.

    Create An App Like Trendyol
  • We'll add a collection banner grid to the home screen layout. Select "Banner Grid" from the drop-down list. You have various size and style formats for the banner grid. Here, we have selected a Rectangular Banner with Radius. Drag and drop this into the home screen below the single banner.

    Create An App Like Trendyol
  • To add images from the collection to the grid, hover over the widget and select "Add/Edit Content". Give a name to the collection grid.

  • Next, click on the upload icon and start adding images from your collection list. Save the changes.

    Create An App Like Trendyol
  • To customize the grid style, hover over the banner grid widget and select the "Edit Style" option to open a popup. Here, adjust the image radius, padding, and container padding. Set the image layout inside the container as "Fill". Swipecart gives you options to add a background image or color to the grid box. There are options for title alignment and font color change. Do the changes and save it.

    Create An App Like Trendyol
  • Below is the app's home screen now with the single banner and the collection banner grid.

    Create An App Like Trendyol
  • Continue using "Single Banner" and "Banner Grid" widgets on the home screen to attract users with offers. The more variety you give to the users, the more engaged they are in your app.

  • When done, let's add a collection slider next. Click on the drop-down list and select "Collection Slider" from the list. We have opted for Round Collection Slider With Title. Drag and drop this into its position.

  • To change position, simply click on the dropped widget. Keep it pressed and move it up or down to any position you want it to be placed on the home screen. Now release the mouse.

    Create An App Like Trendyol
  • We do the same process to add images to the collection slider from the collection list. Hover over the widget and click on "Add/Edit Content". On the popup, add a title to the widget and start uploading images from the collection. The collection list is dynamically pulled from your e-commerce store. Add and save the changes.

  • Edit the style of the collection slider by selecting "Edit Style". Save the changes and update the app layout.

    Create An App Like Trendyol
  • Your Trendyol app's home screen now has single banners, a banner grid, and a collection grid.

    Create An App Like Trendyol
  • Follow the same process and continue adding the single banner, banner grid, and collection slider. Here's a screen recording of the app.

  • We'll populate the app's home screen with more visual content. Let's add a product grid to it. Select "Product Grid" from the drop-down list. We select one from among the many style formats. Now, drop this into the home screen layout.

    Create An App Like Trendyol
  • Add products to the grid by selecting "Add/Edit content". Save when your task is completed.

    Create An App Like Trendyol
  • Select "Edit Style" to customize the grid style. Here, we enable the visibility of the product title, price, and favorite icon. When we disable the visibility of the add-to-cart option, the "+" sign gets removed from the product images. Now, save the changes.

    Create An App Like Trendyol
  • Here's what we have designed until now in our Trendyol app.

    Create An App Like Trendyol
  • We continue to add products to the home screen under different titles using the "Product Grid" widget.

  • The completed Trendyol app now looks like this.

This completes our tutorial on how to create an app like Trendyol. Wasn't it very easy? When you use Swipecart, all you have to do is select UI components from the picklist options and drag and drop them into the app layout. You can further customize them for branding. If you are curious about Swipecart, begin with this amazing tutorial.

To know more about how to create apps with Swipecart, watch this video.

If you need any further assistance, we have a team of implementation specialists ready to resolve your query. Install Swipecart and create an amazing app for your store today.