- To get started with swipecart please visit Rentechdigital.com
- 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.
- 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”.
- 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 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.
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
- "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.