How to create an app like Tiendeo

Install Swipecart to start using it. It is available on the Shopify app store and WordPress plugin center. You'll be taken to the dashboard after signing up for Swipecart.

Click on "Layouts" in the left menu of your Swipecart dashboard.

Click on the “Create Layout” icon to create a new layout for the Tiendeo app.

Clicking on “Create Layout” will open a popup. Type the layout name "Tiendeo" and click "Create".

Now, Swipecart allows you to choose between pre-made layout templates and a blank layout. Since we need to design an app like Tiendeo, we choose "Blank Layout". Now, click "Create Layout."

A blank layout with the name Tiendeo is formed. For more details about creating layouts on Swipecart, click here.

You'll be taken to the app layout dashboard with the default tab as "Theme Settings" and the sub-tab as "App Bar Settings". The theme settings allow you to set the theme and customize it for your brand.

App Bar Settings: Set your branding element on the app bar or the action bar because it stays on the top throughout all pages of your app. Here, we upload the Tiendeo logo to customize the app bar. For more details on app bar settings, click here.

We then go to Side Menu Settings, Bottom Bar Settings, Profile Page Settings, and Input Style Settings. Here, we select our choice from the style variants and save it to the app.

Theme Style Settings: In this section, we set the theme for the app. The changes made here are reflected throughout the app.

Here, change some of the styling parameters for the app's theme such as app background color and font style & color.

Click here to learn more about theme style settings on Swipecart.

Here's the draft app with theme customizations completed to match the Tiendeo app.

Next, we move on to designing the app's home screen. Click on the "Home" tab. A blank home screen is displayed with only the app bar and bottom bar.

We add content to the home screen by dragging and dropping style variants of widgets. These are accessible in the screen's drop-down box panel at the right section.

Click here for more information about widgets on Swipecart.

Banner Grid: We start with the banner grid widget. Through it, you attract attention to specific products, categories, or even offers such as sales and discounts.

Select "Banner Grid" from the widget list. Place one among the style variants inside the home screen layout.

For more details on banner grids, click here.

To add images and links to the banner, hover over it and click on "Add/Edit Content". In the popup that opens add images and link them to relevant products, collection categories, other pages in the app, or external website links.

Click here for details about adding and editing content on widgets.

To set the styling for the banner grid, hover over it again and click on "Edit Style". In the opened popup, you can set the styling parameters for the banner grid to suit the app theme.

Click here for details on styling widgets on Swipecart.

Here's the mobile app preview of the banner grid added to the app's home screen.

Product Grid: Just like how we show banners in a grid format, we now display specific products in a similar style through the product grid widget.

Select "Product Grid" from the widget list. Place one among the style variants inside the home screen layout.

For more details on the product grid, click here.

To add content to the product grid, click on "Add/Edit Content". Add all relevant products from the product list to the grid in the opened popup.

Set the styling elements for the product grid through the "Edit Style" option.

Have a look at the product grid on the Tiendeo app

We keep adding product grids on the app's home screen following the above-mentioned process.

Product List: Another innovative way to display products on the app's home screen is in a list format one below the other. Let's try it with the product list widget on Swipecart.

Select "Product List" from the drop-down widget list. Place one variant from among the options inside the app's home screen.

For information on the product list widget, click here.

Adding products is similar to that of a product grid through the "Add/Edit Content" option. Customize the style of the product grid through the "Edit Style" option.

Have a look at the products displayed in a list format through the product list widget.

We are done designing the Tiendeo app on Swipecart.

Meanwhile, you can have a look at other widgets on Swipecart such as the search bar, banner slider, carousel banner, collection grid, collection slider, product slider, single banner, and timer.

Have a look at the final Tiendeo app here.