July 05, 2022

How to edit a widget on Swipecart?

tutorial

You can create amazing pages for your e-commerce mobile application by dragging and dropping widgets to a mobile interface.

tutorial

Once you have created and named a page, the next step is to add widgets to it for customization.

tutorial

Here, you have many types of widgets to choose from. These are available at the Widget library on the right-hand side of the screen.

tutorial

The Widget Library

tutorial

Let’s see each of them in detail-

tutorial

Banner Grid

tutorial

Here, you can display products/collections/pages or URL redirected banners in pairs. Once you drop the banner on your mobile interface, you can use the ‘Add/Edit content’ option to upload content.

tutorial

Carousel Banner

tutorial

These are ideal if you want to display 3 or more products/ categories/pages or if you want to redirect the banner to a URL. You could use these banners to highlight certain products, categories, or promotions with the URL. This is a great feature to upload various images for marketing purposes, just ensure your image is in the ratio mentioned so that it looks the way it should. Choose a suitable Carousel banner format from the widget library for this.

tutorial

Collection Grid

tutorial

A collection grid is ideal for showcasing collections. You can choose from 4 formats- 2 each in 4x4 and 3x3.

tutorial

When you click on the Add/Edit content option, you could select the collection you would like to display along with an uploaded image that represents that collection. Don’t forget to name it before hitting ‘Save’.

tutorial

Collection Slider

tutorial

This option lets you highlight your various collections. Choose any one of the formats and click on the ‘Add/Edit content’ option to add your collection names, images and select the desired collection. Click on ‘Save’ once you are done with adding and editing the details. In this slider, you will have to add a minimum of 5 collections to start with. In the Add/Edit Content popup, you can choose the sequence of the collections to be displayed. After you have chosen your collections, there will be an ‘Edit Style’ option below the ‘Add/Edit Content’. You can edit, change and adjust the collection slider as required.

tutorial

Product Grid

tutorial

If you have certain products/collections you would like to highlight, then the Product Grid widget is ideal for you. In this widget, the product price and title are shown along with the ability to add the product to the cart and add to favorites. You can choose from 12 product grid formats. Besides this, you can add products or collections in multiples of two in the ‘Add/Edit content’ popup. An interesting feature is the AI option where Swipecart’s custom-made AI algorithms display products that have the highest probability of sales.

tutorial

Here too, you will get the ‘Edit Style’ option below the ‘Add/Edit content’ option. Here, you can edit the format and other details as per requirement.

tutorial

Product List

tutorial

Similar to the Product Grid, here you have the same products shown in a list with the product name, image, price, add to cart option and add to favorites option. You can choose from any of the 3 product list formats available. Adding and Editing options are the same as the Product Grid widget.

tutorial

Product Slider

tutorial

Similar to the Product List widget, you can display the products in a slider format. You can choose a suitable product slider format from the various product slider options available. Adding/Editing items remains the same as the Product List and Product Grid widgets.

tutorial

Single Banner

tutorial

Sometimes, a single banner is enough to make the right impression. You can choose any one of the various single banner formats available. For adding/editing the image, you can use the ‘Add/Edit content’ option and the ‘Add Style’ option as required.

tutorial

Search Bar

tutorial

You can add a search bar to any page you create with Swipecart for your e-commerce mobile app. After dropping the widget at the desired location of the page, you can select ‘Edit Style’ to adjust the

tutorial

padding and radius of the widget. Further, you can also add a voice search by toggling the option on the ‘Edit Style’ popup.

tutorial

Timer

tutorial

If you are planning a time-bound promotional campaign, a timer would be ideal to evoke urgency. In the ‘Add/Edit Timer’ popup, you can set the start and end times for the timer and save it.

tutorial

How to edit a Widget?

tutorial

Most Widgets have a common, Add/Edit content option. When you click on Add/Edit content, you’ll get a popup where you can

  • Upload your banners,

  • Choose the products/collections you want to display,

  • Redirect the user to a specific page or

  • Enter a URL where the customer can either use the internal browser to view the page or visit the page using an external browser.

  • Besides this, you could use this feature to upload an image without redirecting the user to any other page. Tick the ‘No Action’ box for the same.

  • On clicking ‘Save’ your completed widget will go live.

tutorial

Steps to edit product details in Swipecart

tutorial

Steps to edit in the Collection view option

tutorial

Steps to edit in the Page View option

tutorial

How to redirect the user to an external URL through the widget

tutorial

Here’s how the mobile view would look like

tutorial

How to edit the format of your widget?

tutorial

The ‘Edit Style’ option allows you to adjust, change and edit

  • Radius

  • Padding

  • Container Padding

  • Image format

  • Title alignment

  • Background color

  • Font Color and

  • Box shadow

tutorial

of the widget. This option appears only after you choose a selection of collections/products or upload an image. Here is where you can find it-

tutorial

How to set Radius (with example)

tutorial

How to set Padding (with example)

tutorial

How to set Container Padding (with example)

tutorial

How to format Image (with example)

tutorial

How to set Title Alignment (with example)

tutorial

How to set Background (with example)

tutorial

How to set the Font color (with example)

tutorial

How to set the Box Shadow (with example)

tutorial

How to set the Indicator (with example)

tutorial

How to Remove a Block/Widget (with example)

tutorial

Here is how you can remove a widget block.