How to create an app like Hepsiburada

The first step to building an Hepsiburada-like app is to create an app layout. In the Swipecart dashboard, click on "Layouts" in the left menu.

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

Clicking on “Create Layout” will open a popup. We have to enter a name for the layout.

Let's name the layout "Hepsiburada". Click on "Create".

Further, Swipecart gives you two choices. You can either select from the available ready(default) themes or create an app on a blank layout. Let's select a blank layout for our task. Click on "Create Layout". Your app layout has been created successfully.

You'll be taken to your app layout dashboard with "Theme Settings" as your default tab. In this section, you make changes to your app's theme. Let's start it one step at a time. We'll take the app bar customization first. On your layout's left menu, click "App Bar Settings" (usually, you're in this section by default).

Here, change the app bar color, font color, bottom radius, and elevation of the app bar. Make the notification, cart, search, and favorite icons visible/invisible on the app bar. For this app, we have disabled all the icons. Select the logo image or text. Upload the image if you've selected that option. Align the logo, and save the changes.

Let's now add a bottom bar to the app's layout. To do this, click on "Bottom Bar Settings" in your layout's left menu.

Swipecart gives you various styled options in the bottom bar. Select one from among the choices and click on "Save". It gets added to your app's layout.

Repeat the same process for the side menu, user profile page, and input style (welcome/sign-in) page settings and save changes. Now let's do some changes to the app's theme. For this click on the layout's "Theme Style Settings" in the left menu while still staying in the "Theme Settings" tab.

Here, change the theme's font style, font size, font color, and the app's primary and background colors. Upload your loader GIF ensuring it meets the given specifications.

Note:The changes made in the theme are reflected in the entire app.

Your Hepsiburada app with the app bar, bottom bar, and customized theme now looks as in the screenshot below.

Okay, now that we are done with the theme settings, let's start designing the home screen for the app. The first step here is to click on the "Home" tab on the top menu next to "Theme Settings". The app's home screen is displayed with the app bar and bottom bar. It's time to fill content into the home screen.

Swipecart has various visual UI components known as widgets accessible from the drop-down list. Locate the drop-down box to the top right just next to the home screen layout. Click on the drop-down icon to access the widget list. Click on "Search" from the options. A search bar is displayed below the drop-down box. Simply drag and drop this search bar widget onto the home screen layout.

The app with the search bar on the home screen looks as in the image below.

Let's place a product collection in grid format below the search bar. For this, again access the widget list from the drop-down box and select "Collection Grid". Variants in collection grid styles are displayed below the drop-down box. We have selected a square collection grid (4x4). Drag and drop this into the home screen layout below the search bar.

To add collection categories, hover the mouse pointer over the dropped collection grid in the layout. Spot the "Add/Edit Content" option to your right next to the widget. Click on it to open a Collection Grid popup screen. Click on the upload icon. Access the collection list from your e-commerce store. Select an image from the drop-down list and click on "Add". Repeat this process till you complete adding images to the square collection grid. Save the changes when done.

To edit the style of the collection grid, hover over the widget again and this time spot the "Edit Style" option below the "Add/Edit Content". Click on it to open the Edit Style screen. Make changes to the container radius, padding, image position inside the container, and so on. Save the changes and update the layout by clicking on "Update" on the top right corner of your screen.

The app with the collection grid now appears as in the screenshot below.

To create an app like Hepsiburada, we now add a carousel banner below the collection grid. Select "Carousel Banner" from the drop-down widget list. Drag and drop the one you have selected into the home screen layout.

Next, we add images to the carousel banner. Hover over the widget and select the "Add/Edit Content" option. Add products to the carousel banner by selecting images from your product list. Click on "Save Banner" when done. See to it that the uploaded image sizes match the aspect ratio specifications of the carousel banner widget.

Edit the style of the carousel banner by clicking on "Edit Style". We have selected the round indicator variant for the carousels.

The app with the collection grid and the carousel banner appears like in the image below.

Let's add a product carousel slider. Select "Product Carousel Slider" and drag and drop one from among the variants into the home screen layout. Note that you can change the placement of widgets inside the layout by clicking on that particular widget and moving it up or down to the desired position.

We'll start adding product images to the slider. Hover the mouse pointer over the widget and click on "Add/Edit Content". A popup screen will open. Give a title to the widget. Click on the upload icon and start adding product images to the carousel slider. Save when done.

Click on "Edit Style" to change the carousel banner style. We have disabled the visibility of add-to-cart and favorite icons on the product carousel slider.

Note:You have to click on "Save" to save the changes you have made once you are done uploading all the images to the banner or editing its style. Similarly, click on "Update" to update the changes you have made to the app.

So, here's how the app looks after placing the product carousel slider on the home screen.

We now add a single banner to the home screen. Select "Single Banner" from the drop-down list. Drag and drop that one that you like from among the variants displayed below the drop-down box into the home screen.

Click on "Add/Edit Content" to add a product/collection image to the single banner. Add an attractive title to engage users in the app.

Click on "Edit Style" to make changes to the banner style. Click on "Save" when done. Click on "Update" to update the layout changes to the app.

Now, your home screen is populated with a collection grid, carousel banner, product slider, and a single banner.

Let's add a collection slider to the app. Select "Collection Slider" from the drop-down list. We have selected a small rectangle collection slider to be displayed on the home screen.

Click on "Add/Edit Content" to start adding category images from your store's collection list. Save when the task is completed.

Click on "Edit Style" to make changes to the slider style. We have placed the images in the cover position inside the slider container here.

Notice the collection slider at the bottom of the app's home screen layout screenshot here.

Repeat the process to add as many widgets as you want on the home screen of the app. Here's the final look at the Hepsiburada-like app we have created with Swipecart.