To get started with swipecart please visit Rentechdigital.com

Please click on “Launch App” 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.

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.

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.

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

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

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.

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

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.

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

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.

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