Swipecart is available as a WordPress plugin and a Shopify app. You can use Swipecart if you have your e-commerce store on Shopify or WordPress. Install and activate Swipecart. Sign up and you’ll be taken to your Swipecart dashboard.

To create an app design on Swipecart:

The first step is to create a design for the app. Click on “Designs” on the left menu.

Click on the “Create design” icon on your screen. Enter the name for your design and press “Create”. Here, you have two options.

Here, you have two options.

Create your app on an empty or “Blank Design”

A blank design is perfect when you have a specific app design in mind. Populate the blank design with UI components such as collection grids, product banners, and more from the widget library. You can further customize it for your brand.

Select from any available readymade designs

You have to place widgets and customize everything in a blank design. In a readymade design, the theme is already present. But you still have options to customize the theme as per your brand.

To edit the app’s theme settings on Swipecart:

Edit and customize the themes of your app in the Theme Settings. In the Designs, click on “Theme Settings” on the top navigation menu. In the sidebar of the theme settings, you have options as below-

App Bar settings - App bar provides space for branding and access to important actions such as navigation, menu, and search. For more detail of App Bar Setting click here.

Side Menu Settings - Here’s a detailed guide to exploring the side menu settings and tailoring them to your business and brand requirements. For more detail of Side Menu Setting click here.

Bottom Bar Settings - A bottom bar provides navigation and enables instant clicking on the app’s features. Learn bottom bar UI customization using Swipecart here. For more detail of Bottom Bar Settings click here.

Profile Page Settings- Swipecart offers you various user profile screen styles to enhance the look of your app. Profile style customization is easy and fast.For more detail of Profile page Settings click here.

Input Style Settings- Make users feel invited with attractive sign-in or welcome-back screens. Here’s a quick guide to changing input style settings on Swipecart. For more detail of Input Style Settings click here.

Theme Style Settings- The theme style defines the format and looks for your app’s activities and UI. Let’s have a look at theme-style customizations on Swipecart.For more detail of Theme Style Settings click here.

To edit the app’s home screen design on Swipecart:

While in the Design section, click on “Home” on the top menu. This is where you design your app’s home screen. Your app’s home screen design appears in the center.

There is a drop-down box to the right of the home screen design. The drop-down menu has a list of widgets to help you populate your app’s home screen with the collection and product grids, sliders, and banners.

Swipecart provides you with pre-coded visual components called widgets which are nothing but the app’s features in a visual interface. You drag and drop these widgets onto the home screen in the desired position.

Customize the styling of widgets to reflect your branding. The widget library consists

various types of widgets.

Banner Grid- Arrange multiple banners in grids making it easy for customers to browse your store. For more detail of Banner grid click here.

Banner Slider- Boost app engagement by displaying banners of products, collection categories, or offers in a slider format. For more details on Banner Slider, click here.

Carousel Banner- Add a set of rotating banners to quickly highlight the best products/collections. For more detail of Carousel Banner click here.

Collection Grid- Manage the visibility of collections in a layered grid format to attract customers. For more detail of Collection Grid click here.

Collection Slider- Make your customers curious to know what’s next by showing off collection sliders. For more detail of Collection Slider click here.

Product Grid- Get more creative and highlight featured products to your customers in a grid format. For more detail of Product Grid click here.

Product List-There is no way your customers can miss it when you lay out products neatly in lists. For more detail of Product List click here.

Product Slider- Display products on sliders and direct customers towards what they might be interested in For more detail of Product Slider click here.

Search Bar- Get customers closer to what they are searching for, and increase conversions and sales. For more detail of Search Bar click here.

Single Banner- Create a perfect banner for deals and offers and convince customers to buy instantly. For more detail of Single Banner click here.

Timer- Generate a buzz around your latest offers, create urgency or a sense of FOMO with timers. For more detail of Timer click here.

Text Widget- Provide additional information to customers about a product or collection with this simple and basic widget. For more details on Text Widget, click here.

Social Links- Strengthen your social media presence and get more followers by adding social channel links to your app. For more details on Social Links, click here.

Single Product- Highlight a single product on your app’s home screen to attract customers and get high click-through rates. For more details on Single Product, click here.

Text Marquee- Create a sense of urgency and get customers to buy products by conveying information such as flash deals, free shipping, and so on. For more details on Text Marquee, click here.

Image Hotspot- Boost customer shopping experiences by linking an image to several products or collection categories. For more details on Image Hotspot, click here.

To edit the app’s “collection page view” screen on Swipecart :

The product collection page displays an overview of the products within a collection. It is presented as a photo gallery of products. For more detail of Collection View click here.

To edit the app’s “cart view” on Swipecart:

Swipecart provides you with multiple UI options for your app's cart screen. Here’s a tutorial for you in modifying your cart view settings. For more detail of Cart View click here.

To edit the app’s “product list view” on Swipecart:

Read this tutorial to understand how to display products from your collection in a clean and structured format for maximum conversions. For more detail of Product List View click here.

To edit the app’s “product detail view” on Swipecart:

Customize the product page and entice customers with Swipecart’s AI-based product recommendation feature. For more detail of Cart View click here.

App Settings:

On the left menu of your Swipecart dashboard go to App Settings-> General Settings. Here, you can set the currency code and decimal places for the currency. You can add as many currency codes as you like and set their decimal place. Click here for more information on General Settings.

To add product variants on Swipecart:

Click on “App Settings” on Swipecart’s left menu.

Now, select “Product Variants” on the App Setting’s menu list.

Click on “+Add Variation” to add variant name and type. For instance, for color variants in clothes, add the variant name as “Color” and select “color” in type. Then, click on “+Add Tag” to keep adding available colors. In the key section, type the name of the color such as “Blue”. In the value, select the blue color from the color picker and submit. Similarly, you can add different colors.

You can create another variation in size by again clicking on “+Add Variation” with the variant name as “Size” and “text” in type. Next, click on “+Add Tag” and type the name of size as small and text value as “S”. Repeat this process to add product variants.

To add a new page to the app on Swipecart:

The Designs, go to the “Home” section on the top menu.
To the left of your home screen design, you have an “Add Page” button highlighted in blue color.
Clicking on it will open a popup.
Give a name to the new page.
You have the option to add the new page to the home screen or not. Next, click on “Submit”.
Save the changes and click on “Update” to make changes in the app’s design
Similarly, design the new page as you design your app’s home page. You can add banners, grids, or products to the new page.

This completes the app design tutorial for Swipecart. If you have any queries, feel free to contact us.

Advice and answers from the Rentech Digital Team

Home