uShopAid supports drag-and-drop form editor. You can use the editor to define any template you want.
In this article, you'll learn about:
How to get to the editor
Once you have logged in to your uShopAid account, click on Forms on the left.
Here you can see the campaigns you have created. Select the campaign you wish to edit and click on the Edit form button.
The form editor appears on the next page.
An overview of the editor
When you arrive at the form editor, you'll see:
the Navigation menus on the left, including Theme, Display, Add elements, Discount.
the Elements on the right, showing all elements of the current page by level.
the Workspace for editing in the middle.
the PC view, the Mobile view, and the Preview on the top.
and the Pages/Teaser of the campaign at the bottom.
Theme of the form
When you design a template, you often want all the pages and teaser to maintain a consistent style. Each template has its own Theme colors and Theme fonts, when you want to change the style of the template, you only need to set the Theme, and you don't need to modify each Text, Button and other elements.
You are suggested to use Theme in this way:
Set Theme colors, Theme fonts, and Corners according to your preferences.
Then set the color, font and corner of the element with the Theme colors, Theme fonts, and the Theme corners.
Then if you change the Theme colors, you'll find that all the corresponding elements' colors are changed too.
Your store should have its own theme, and we suggest that the theme of the form should be consistent with the theme of your store.
Display of the form(form position on website, transition, animation)
You can set the display position of the form on the website, such as the middle, the top, or the bottom, etc.
You can set the Transition(zoom, fade, slide) of the form. After setting, you can view the effect in the Workspace.
You can set the color of the Website overlay under the form.
You can set animation to make the form more attractive.
How to add elements
The Page must have a layout with columns, and you can drag and drop the elements to the area where the column is located.
Click on the Add elements on the left and drag the element into the workspace.
If you drag the Element into the workspace, drop-zones will automatically appear showing where you can place the Element within the Form.
Simply drop the Element where you would like to place it.
How to locate and edit the element
You have two ways to locate the element:
Click on the element in Form.
View the Elements on the right, and click on the element you want to edit.
How to manage pages
You can add a new page.
You can click on the 3 dots in the top right corner of the page. Once you click on the dots, you will see the options to Duplicate, Delete or Rename the page.
How to edit teaser
You can decide whether to show the teaser.
How to design the form for PC and Mobile separately
On the top, you can switch between the desktop and mobile view of the Form.
If you see a Desktop icon or a Mobile icon next to a setting, it means you can set different values of that setting for Desktop and Mobile views.
To switch between the views, simply click on the icon and choose the view of which settings you would like to modify.
How to preview the form on website
You can click on Preview at any time to preview the actual effect of the Form in your store.
When you preview, the visitors can not see the form. You can input data to test, and the test data will not be saved as campaign effects.