Logo
Go to Rentech Digital

Advice and answers from the Rentech Digital Team

HomeSwipecartGetting StartedHow To Create A Mobile App With Swipecart

  • How To Create A Mobile App With Swipecart

    Step-by-step guide to building a mobile app on Swipecart. This guide has images and videos to help you at every step of app building.




    • Please click on “Start Now” button.

    • On the next screen, you will see the list of E-Commerce store Platforms. Choose Your Platform according to your store.

    • Here we go with Shopify. Click on Shopify and you will see a screen like this.

    • Click on “Add app” and log in with your Shopify store.

    • Once you log in with your Shopify store and add Swipecart App. you will see a screen like this.

    • Swipecart works with app design. A design is basically a copy of the app design. Please click on the “Designs” tab in the left-hand menu item.
    • A design is an app version. You can have as many designs as you want. The Designs page looks something like this.
    • We have multiple options in the design card. If you hover over any design card you will see features you have access to.
    • We can Duplicate, Publish, Preview, Delete or Edit a design.
    • To duplicate a design click on the “Duplicate button” and enter the name you want to provide to the duplicated design.

    • You can publish a design by clicking on “Publish Button”.
    • Once you click on the Publish design button a confirmation pop-up will come up. Publishing a design will update the current view of the app for all users.

    • You can Preview a design by clicking on the “Preview Button”. Clicking on the preview button will pop up a QR code. Use swipecart preview app to see the preview of the design.

    • You can delete a design by clicking on the “Delete Button”.

    • “Edit Button” will let you edit a design.

    Let’s create a new design

    • To create a new design click on the “Create Design” section.

    • Clicking on “Create Design” will open a pop-up. Please name the design something using the “Design Name” input box.

    • Once you provide a name for your design you will be asked to choose from “Blank design” or a “Default Design”.

    • Our design team has created default designs that are optimized for conversion. These are templates you can use to create your app. You can preview a default design but click on the “Preview Icon”.

    • Download the swipecart preview app to see a preview of the default design.

    Play Store: https://play.google.com/store/apps/details?id=com.rentechdigital.swipecart.swipecart

    App Store: https://apps.apple.com/in/app/swipecart-no-code-app-builder/id1617808786

    • Let’s go ahead and create a Blank Design for now.
    • The first screen you will come to is “Theme Settings”. Under Theme Settings, we have multiple options to set branding.

    App Bar Settings

    • Under Theme Settings, you can find “App Bar Settings”.

    Preview

    • The first thing we can notice is the preview. The preview shows the live preview of how the app bar will look like.

    App Bar Color

    • App bar color picker allows you to change the color of the app bar also, you can pick a color or can input its RGB or Hex code.
    • You can see the live preview of the change in the preview section.


    Font Color

    • Font color picker allows you to change the color of the font also, you can pick a color or can input its RGB or Hex code.
    • You can see the live preview of the change in the preview section.

    Icons

    • We can see four icons that we can enable or disable. Toggling status of each of the toggle buttons will update the preview as well.


    Bottom Radius And Elevation

    • You can change the Bottom Radius and the Elevation to your liking. A live preview is always available to guide you through the process.

    Select Logo/Title

    • You have the option to either show the logo or the title in the app bar. You can also adjust the alignment of the logo/title.


    • Once you are done with your edits please hit the “Save Button” to save your changes.

    Side Menu Settings

    • Lets you customize the side menu (often referred to as drawer as well).

    • You can choose the UI you like for the side menu from the six UI options that are provided.

    • You can add/edit/delete menu items from the “Menu Items” section on the right-hand side of the screen. We have a couple of menu items in the menu bar by default already.

    • Click on “Add A Menu Item” button to add a new menu item. For more details please visit Side menu settings.
    • You can drag and drop each menu item and change its order.


    • Hit the “Save” button to save your changes.

    Bottom Bar Settings

    • Bottom Bar Settings has multiple UI you can choose from and Select the UI variant you want to use with your application.

    • Once you select the UI variant you want please hit the "Save" button.

    Explore the Detail article on Bottom Bar Settings.


    Profile Page Settings

    • Under Profile Page Settings you will see multiple UI options you can choose from. Please select the UI that you like the most.


    • Hit the “Save” button to update the profile page on the live app.


    • Explore the Detail article on Profile Page Settings.


    Input Style Settings

    • Under Input Style Settings you will see multiple UI options. Select the UI you like the most and hit the "Save" button.


    • Explore the Detail article on Input Style Settings.

    Theme Style Settings

    • Theme Style Settings allow you to customize theme styles in the application.

    • Under Theme Style Settings you can choose the fonts and Font Scale (font size).

    • You can also adjust the font color using the light and dark color, color picker under "Font Color".

    • You can change app branding by changing the app "Primary Color" and
    • "Background Color"

    • You also have the ability to update the app loader. Please click "Upload GIF" to open a file selector.

    • Once you upload the gif, please click on the "Save" button to update the settings.

    • To edit the home page Design please click on the “Home” tab.

    • You can add a system-defined page or create a new page using the “Add Page” button.

    • Explore the Detail article on Pages
    • Let’s edit out home page design and start designing our app. On the right-hand side section, you will be able to see multiple widgets.


    • Drag and drop a widget into the page design section.

    • Now hover over the design section and see the button to “Add/Edit Content”.
    • Clicking on “Add/Edit Content” will open up a pop-up.

    • Add your content like products, collections, etc.

    • Once done, click on “Save”.


    • Once you’ve uploaded your content, there will be an “Edit Style” option below Add/Edit Image.

    • Here you can edit the style of the widget.


    • You can design the home page by adding additional widgets.

    • Explore the Detail article on Widgets.
    • You can customize the UI and content of the collection view from the “Collection View tab”.
    • Explore the Detail article on Collection View.

    • Now click on the next tab “Cart View”
    • You can choose the UI for the cart view using the “Cart View” tab.

    • Explore the Detail article on Cart View.
    • Now click on the next tab “Product list view” and choose one of the UI options for the product list view.

    • Explore the detailed article on Product List View.


    • Now click on the next tab “Product detail view”. Lets you customize the product page of your app.

    • Explore the detailed article on Product Detail View.


    • Now that we have content and UI selected for our app we can click on the "Save" button to save the design.

    • Now let’s click on the preview button and see our app preview on the Swipecart preview app.


    • Let’s look at our app preview.