Video Tutorial of Button Widget
- The Button widget helps you to place buttons anywhere on your app’s home screen as a call to action for your customers to click on it and increase app engagement.
- On your Swipecart dashboard, click on “Designs” in the left menu.
- Hover over the design where you’d want to add the button widget and click on the pen (Edit) icon.
- Now, in the design dashboard, click on the “Home” tab on the top navigation bar.
- Click on the drop-down widget panel on the right section of the home design dashboard.
- Scroll down in the list and click on “Button Widget”.
- Different UI variants of the Button widget are displayed below the drop-down box.
- Drag and drop a variant to position inside the home screen design.
- Hover over the dropped widget and click on “Add/Edit Content”. A popup opens. You can customize the Button widget here.
- Radius- Edit this to round off the container edges.
- Padding- Adjust the outer padding of the widget.
- Container Padding- Adjust the left, right, top, and bottom padding of the widget container.
- Button Text- Enter the button text in the text box provided.
- Font Style- Select the font style to suit the app theme.
- Font Weight- Adjust to make the font more pronounced.
- Font Size- Increase or decrease the font size.
- Letter Spacing- Adjust the spacing between letters in the text.
- Font Color- Change the font color with the help of the color picker. You can also type in the RGB, HSL, or Hex values.
- BG Color- Change the button background color with the help of the color picker. You can also type in the RGB, HSL, or Hex values.
- Border- Increase or decrease the visibility of the button border.
- Border Color- Change the button border color with the help of the color picker. You can also type in the RGB, HSL, or Hex values.
- Reset- Clicking on it will delete all the settings and reset the values to default.
- Button Icon- You can place an icon in the button when you enable this.
- Icon Position- Keep the icon left or right aligned.
- Icon Color- Change the icon color.
- Icon Library- Select an icon from the existing icon library.
- Upload Custom Icons- By enabling this you can upload custom icons from your system file.
- Button Link- Link the button to any User-Defined page, System-Defined page, Product, Collection, or External URL.
- Click on “Save” after you make the changes.
- Click on “Preview” in the top-right corner of your dashboard to preview the changes you make on the app.
- These changes can be previewed by downloading the Swipecart mobile app on Android and iOS.
- Click here for more information on Preview.
- That’s it. You are done customizing the Button Widget on Swipecart.