How to create an app like Giva

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

On the dashboard, click on "Layouts" in the left menu.

Click on "Create Layout" to create a new layout.

Clicking on “Create Layout” will open a popup. Name the layout "Giva". Click on "Create".

Further, you'll have the option to select from ready-to-use layout templates or a blank layout. We select "Blank Layout" since we have to create an app like Giva and click on "Create Layout".

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

You'll be taken to the layout dashboard with the default tab as "Theme Settings" and the sub-tab as "App Bar Settings". Basically, 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, uploads the brand logo or give a title 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, we can change some of the styling parameters for the app's theme such as app background color and font style & color. Click here to know more about theme style settings on Swipecart.

Here's the mobile preview of the Giva app with theme customizations completed.

Next, we move on to designing the Giva 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 right section of your screen.

Click here for more information about widgets on Swipecart.

Search Bar: We start with the search bar. Select "Search" from the drop-down widget list. Drag and drop the search bar displayed below the box inside the home screen.

Hover over the search bar and click on the "Edit Style" option. In the popup that opens, customize the styling parameters for the search bar.

Click here for information on the search bar widget.

Here's the mobile app preview with the search bar added below the app bar.

Collection Slider: We display the collection categories in a slider format at the top of the app.

Select "Collection Slider" from the widget list. Drag and drop a square-style variant into the home screen below the search bar.

Click here for details about collection sliders on Swipecart.

To add content to the collection slider, hover the mouse pointer over the widget and click on "Add/Edit Content". In the opened popup, add all relevant collection categories from the collection list to the slider.

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

To set the styling for the collection slider, hover again over it and click on "Edit Style". In the popup that opens, set the styling parameters to suit the brand.

Click here for details on styling widgets.

Here below is how the collection slider looks on the Giva draft app.

Carousel Banner: These are banners in rotating or slideshow format. You can add diverse information in them ranging from offers, product-specific discounts, new launches, and many more.

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

For more details on carousel banners, click here.

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

To customize the carousel banner, click on "Edit Style" to open a popup. In it, set the styling parameters for the carousel banner.

Here's the mobile preview of the carousel banner on the app's home screen.

Single Banner: It is used to highlight attractive schemes like discounts, sales, new product launches, or flash deals on the app.

Select "Single Banner" from the widget list. From among the different style variants offered by Swipecart, select one and place it on the app's home screen.

Click here for detailed information on single banners.

Add an image to the banner through the "Add/Edit Content" option. Disable the "Internal Linking" option if you don't want to link it to any product or collection. Set the styling elements for the banner through the "Edit Style" option.

Design your app on Swipecart. You can easily create apps like Giva to increase customer engagement.

Have the look at the app with the single banner on it.

Product Slider: To display specific products on the home screen, select "Product Slider" from the widget list. Place one among the style variants inside the home screen.

Click here for information about product sliders on Swipecart.

Add products to the slider from the product list through the "Add/Edit Content" option. Set the styling elements for the slider through the "Edit Style" option.

Have a look at the product slider added to the Giva app.

Keep adding carousel banners and product sliders to the app.

Banner Slider: Next, we add a banner slider to the app. Use this widget to showcase new collections or unique products.

Select "Banner Slider" from the widget list. From among the different style variants offered by Swipecart, select one and place it on the app's home screen.

Click here for detailed information on banner sliders.

Add images to the banner through the "Add/Edit Content" option. Link them to relevant collection categories or products. Set the styling elements for the banner through the "Edit Style" option.

Here's the mobile preview of the Giva app with the banner slider on it.

This completes our tutorial on how to create an app like Giva on Swipecart.

You can explore and add other widgets to your app like the Banner Grid, Banner Slider, Collection Grid, product grid, Product List, and timer.

Have a look at the final app here.