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 layout. A layout is basically a copy of the app design. Please click on the “Layouts” tab in the left-hand menu item.
A layout is an app version. You can have as many layouts as you want. The Layouts page looks something like this.
We have multiple options in the layout card. If you hover over any layout card you will see features you have access to.
We can Duplicate, Publish, Preview, Delete or Edit a layout.
To duplicate a layout click on the “Duplicate button” and enter the name you want to provide to the duplicated layout.
You can publish a layout by clicking on “Publish Button”.
Once you click on the Publish layout button a confirmation pop-up will come up. Publishing a layout will update the current view of the app for all users.
You can Preview a layout 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 layout.
You can delete a layout by clicking on the “Delete Button”.
“Edit Button” will let you edit a layout.
Let’s create a new layout.
To create a new layout click on the “Create Layout” section.
Clicking on “Create Layout” will open a pop-up. Please name the layout something using the “Layout Name” input box.
Once you provide a name for your layout you will be asked to choose from “Blank Layout” or a “Default Layout”.
Our design team has created default layouts that are optimized for conversion. These are templates you can use to create your app. You can preview a default layout but click on the “Preview Icon”.
Download the swipecart preview app to see a preview of the default layout.
Let’s go ahead and create a Blank Layout for now.
The first screen you will come to is “Theme Settings”. Under Theme Settings, we have multiple options to set branding.
Let’s look at each option in detail.
App Bar Settings
Under Theme Settings, you can find “App Bar Settings”.
Let’s look at each feature in detail.
The first thing we can notice is the preview. 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. 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. 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.
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.
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
You also have the ability to update the app loader. Please click on "Upload GIF" and it will open a file selector.
Once you upload the gif, please click on the "Save" button to update the settings.
To edit the home page Layout please click on the “Home” tab.
You can add multiple pages using the “Add Page” button.
Explore the Detail article on Pages
Let’s edit out home page layout 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 product, collection, 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.
You can choose the UI for the cart view using the “Cart View” tab.
Explore the Detail article on Cart View.
Choose one of the UI options for the product list view from “Product List View” tab.
Explore the detailed article on Product List View.
“Product Page View” lets you customize the product page of your app. Choose one of the UI options for the product page view.
Explore the detailed article on Product Page View.
Now that we have content and UI selected for our app we can click on the update button to “Update” the layout.
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.
Explore the next article App Bar Settings