How to create an app like Trendyol

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

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

Clicking on “Create Layout” will open a popup. Let's give a name to the layout.

Type the layout name as "Trendyol" and click the "Create" button.

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".

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.

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.

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.

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.

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.

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.

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.

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.

The Trendyol app with the added single banner now looks as in the image below.

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.

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.

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.

Below is the app's home screen now with the single banner and the collection banner grid.

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.

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.

Your Trendyol app's home screen now has single banners, a banner grid, and a collection grid.

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.

Add products to the grid by selecting "Add/Edit content". Save when your task is completed.

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.

Here's what we have designed until now in our Trendyol app.

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.