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

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

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.

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.

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


Hurray! 🎊🥳


What's Next?🤔

Explore the next article Create a Design


Did this answer your question?