Advice and answers from the Rentech Digital Team

Video Tutorial of Input Style Settings

What is Input Style Settings on Swipecart?

The Input Style Settings section on Swipecart is where you customize the Sign In, Sign Up, and Forgot Password screens. This helps you to make these processes easy for your customers when they use the app.

Steps to edit the Input Style Settings on Swipecart

• Click on App > Design on your Swipecart dashboard side panel.

• Click Edit on the design where you want to make changes to the input style settings.

• On the top menu, navigate to Theme Settings > Input Style Settings.

• Click on the Input Style dropdown at the top center of your screen.
• You have three options:

1. Sign In Screen
2. Forgot Screen
3. Sign Up Screen

Let’s customize these 3 screens one by one.

1. How to customize the Sign In Screen on Swipecart?

The Sign In Screen is displayed when users log in to the app after having signed up. Let’s see how to customize this on Swipecart.

• Select Sign In Screen from the dropdown. The sign-in screen layout is displayed.
• The right section is where you can customize the look of the screen. First, select the method to sign in for users.
• You have two options:

1. Login With Email & Password
2. Opt for this if you want users to log in with their email and password.
3. 
   
4. Login With Mobile Number Fields
5. Opt for this option when you want users to log in with their mobile number.

• Next, click Pre Define Theme to open a Theme Style popup. Select any style variant from the dropdown and click Submit.
• The sign-in screen has editable sections listed on the right. Click on the Edit icon to make changes to the style and content of each section.

Welcome Section

• This is what appears at the top of the Sign In Screen. Disable Logo if you do not want the logo displayed at the top.
• Change the Title and Sub Title text and click on Submit when done.

Field Style

• This section is where the user inputs the necessary information for signing in.
• In the Select Field Style dropdown, select a field style variant of your choice.

• You can also keep clicking on the Shuffle icon to view the field style variants one by one below it.
• Enable the Icons toggle switch to display the icons for the listed fields. You can change the position of the icons to be on the right or left of the fields.
• If you want to give a rounded edge to the text field containers, adjust the Radius on the range slider.

• Click on Submit when done.

Sign In Button

• This allows for text display customization in the Sign In CTA.
• Select a text variant from the Select Button Name dropdown and click on Submit.

Agreements

• This is to give users the option to read the Terms & Conditions, Privacy Policy, or other relevant policies before they sign in to the app.
• Check the Show Agreements box to display the text.

• Type in the text in the mini-text editor.
• Enable the Link Text toggle switch to link the required text. In the first field, copy-paste the text from the editor that needs linking.

You have two options to add the link.

1. User Defined: Select any page you have created on Swipecart from the dropdown to link the text to it.
2. Web URL: Enter the Website URL for linking the text. Check the Open outside the app option if you want the link to open outside the app.

• To link another text to a policy, click on Add Text and repeat the same as mentioned above.
• Click on Submit when done.

Switch to sign up

• This is the last section on the Sign In Screen. This is for new users who haven’t yet signed up for store access.

• Enable Redirected To Website toggle switch when you want to redirect users to the sign-up page on your website.

• Enter the website URL to link the Sign Up text.
• If you want any message displayed before the Sign-Up text, type it in the mini-text editor.
• Click Submit when done.

2. How to customize the Forgot Password screen on Swipecart?

A user is redirected to the Forgot Password screen from the Sign In screen when they click on the Forgot Password link.

On this screen, the user enters their email id. They then receive a link to create a new password via email. Swipecart allows some customizations to this screen.

• Select the Forgot Screen option from the dropdown in the Input Style Settings page.

The forgot screen layout is displayed in the center. The right section is where you can customize the look of the screen.

• Hover over the Forgot Section and click on the edit icon. In the popup, enable the Logo toggle switch if you want to display the logo.
• Enter the Title and Sub Title text and click Submit when you are done.

3. How to customize the Sign Up screen on Swipecart?

The Sign Up Screen is when users sign in to your app for the first time. They have to fill in their name and email id and create a password for their account. Let’s see how to customize the sign-up screen on Swipecart.

• Select Sign Up Screen from the dropdown in the Input Style Settings page. The sign-up screen layout is displayed.

• The right section is where you can customize the look of the screen. The Sign Up Screen has editable sections listed on the right.
• Click on the Edit icon to make changes to the style and content of each section.

Sign Up Section

• This section appears at the top of the Sign Up screen. Enable the Logo toggle switch to display your brand logo. Edit the Title and Sub Title text and click Submit.

Sign Up Button

• This is the sign-up CTA button. Here, select a text from the variations given on the dropdown list. Click on Submit to save the changes.

Switch To Sign In

• This is the last section in the Sign Up Screen. This allows users to go to the Sign In Screen if they have already created an account.
• Here, you can edit the text that appears before the Sign In link. Make use of the mini-text editor to type in the message.
• Click on Submit when done.

Advance Settings in Input Style Settings on Swipecart

• Swipecart allows some advanced level Input Style Settings. For this, click on the Settings icon next to Input Style Customization to open an Advance Settings popup.

Welcome Section Setting

• Click on the Welcome Section Setting dropdown. Set the Alignment to right or center.

• Enable the Logo toggle switch if you want to display the logo on the Sign In, Forgot, and Sign Up screens. Click on the upload icon and upload the logo from your computer (logo size must be 540 x 180 px).
• Switch the Background Image toggle switch to the ON position if you want a background image for the logo. Click on the upload icon to upload a background image from your computer (the image size must be 375 x 230 px).

Forgot Password

• Enable the Forgot Password toggle switch if you want to display the “Forgot Password?” clickable link on the Sign In Screen.

Guest Login

• Enabling the Guest Login toggle switch allows users to access your app without having to create an account.

Disable Price For Guest Users

• This is when you want to hide the product price for guest users. When you enable the Disable Price For Guest Users toggle switch, the product prices are not shown to users who haven’t signed up. Type in any display message such as “Sign up to view product price” in place of product price.

💡NOTE: You have to install the Custom Pricing plugin to unlock this feature for your app.

Background Image

• If you want a background image for the three screens, enable the Background Image toggle switch. Next, upload an image from the computer (the image size must be 1125 x 2436 px).
• Click Submit when you complete the advanced input style settings.

• That’s it on Input Style Settings on Swipecart. Make the account sign-in or sign-up process hassle-free for your users on the app.
• With the Swipecart mobile app, you can preview all updates on your mobile device. Learn more about How to preview your app on your mobile device?

• For any inquiries about the Input Style Settings, we encourage you to get in touch with our implementation specialist or contact our support team.