Quick Checkout Page App

 

Encourage your customers to finish their order with a quick and easy-to-use checkout page that you can fully customize.

The quick checkout app enables you to place all the fields and details needed for the checkout process on a single page.

This allows the customer to complete his order easily and without confusion.

Features:

  • Easy checkout for registered users, logged in users, and guests
  • Customize all personal, payment, and shipping fields
  • Customize checkout page layout and design

In this article:

 

- App Setup

 

Once you have installed the app, you will be able to access its settings which are divided into:

- General settings

- Custom fields

- Payment address

- Shipping address

- Payment method

- Shipping method

-  confirm

mceclip0.png

First, general settings 

the general settings are divided into three sections ( General Settings - Login - Design )

 

General Settings


mceclip1.png

Select default option at checkout

Set the default option for the visitor - it can be guest checkout or registration which will reflect as follows on the checkout page.

mceclip2.png

 

 

Display Country Code & Flag

 

You can show or hide the country code and flag beside the mobile number field displayed in the checkout page and it reflects as follws:

 

 

Set min order amount

You can set the minimum value to allow the completed purchase order on the checkout page.

Leave it as 0 value to disable the minimum condition.

 

Set min order quantity

You can set the minimum quantity of products to allow customers to compelete the purchase.

Leave it as 0 value to disable the minimum condition.

 

Min Order Message

Through this tap, you can add a message which will be displayed to your customers that the minimum value of purchases must reach this amount.

 

Skip fields length validation

you can set a specific length for fields such as phone numbers and passwords.

 

Skip country and city default value

When this option is enabled, the city and currency won't be automatically set and the customer will have to specify them.
 

Login [edit social access settings]

 

Through this section, you can display the social media login feature which means, your customers will be able to log in to your store, using their social media accounts.

mceclip3.png

 

Google Map API key:

 

Through this option, the Google Maps API key is inserted, so Google Maps will be displayed on the checkout page.

 

Through this option, customers will be able to pin their exact location on the map to make the shipping process easier and more accurate.

 

Please note that this service is a paid service by Google, you can learn more information regarding this matter through the following link: https://developers.google.com/maps/documentation/javascript/get-api-key

 

Select Social login style:

 

Through this option, You can control the size of the quick login through the social media accounts icons.

 

Default Latitude - Default Longitude: you can add the Latitude and the Longitude of your physical store in these fields.

 

 

Design

The design section includes the following fields:

 

mceclip4.png

 

Display Options

Through this tap you can control to display the login option for customer types such as Register Account, Guest. 

It's better to check all boxes.

mceclip5.png

Show only the checkout

Enable this option to hide all the information in the header, footer, and columns to make the checkout process as simple and clean as possible.

 

Set product image size on hover

Set the width and height of the product pop-up image when you hover on the product's thumb image in the cart.

The following example after set 200 * 200 for the product image

 

Select Address Design

Select the style of the address block for logged-in users. you can select to show the address as a list or as radio button options.

 

Select columns

Through this section, you can control the arrangement of the places in the checkout page boxes, where you can place the shipping method box at the beginning of the page before the customer information and the payment method or vice versa, with the possibility of controlling the area of ​​the boxes on the page in percentage terms, where the page is divided into three columns and you can Determine the percentage that each column will occupy of the page, but it is preferable to have two columns on the page and each column occupies 50%.

 

Custom Field:

Through this section, you will be able to add additional fields to be reflected in the checkout page clicking on (add custom field)

mceclip6.png

 

You will be directed to the following page:

Field type: Through this option, the field type is determined, is it a choice field, an input field, or a text field. And under each of the types mentioned, there are several subspecies.

Checkout section: The location of the field is chosen, is it included in the payment information, shipping information, or confirmation page.

Field title: It is the name of the field shown in the control panel and storefront.

Error message: It is the error message that will appear to the customer on the interface when skipping the field without filling it.

ToolTip: It is a comment that appears to introduce the customer to the field or to help him fill it in.

Adding a value to the field: it is the values ​​from which to choose if it is a choice field.

After completing the entry of these settings, you will enter the selected field location page and control whether to show or hide the field for different customer groups and make it required or optional.

 

mceclip7.png

 

Payment Address:

mceclip8.png

 

Through this section, you can control the display or hiding of the payment data fields on the checkout page by clicking on the option to display these fields to the visiting customer, the registered customer, or the logged-in customer. With the ability to control making the field required or optional for all types of customers.

 

You can also control the arrangement of the fields on the storefront on the order completion page through the move icon next to the field (three lines) and then move down or up according to your desire.

 

Shipping Address

 

mceclip9.png

 

The data and options in the payment address section are similar to the data and options in the shipping address section, but they are related to the shipping information as shown in the previous image.

Payment Method

 

mceclip10.png

It is the part responsible for the method of displaying the payment methods and means available in your store and the possibility of applying a discount when the customer uses a specific payment method, and it is divided into two parts.

 

Enable payment methods step

Through this icon, you can control the display or hide the full payment box inside the checkout page, and preferably enable this box until the payment method box is displayed on the checkout page 

Display payment methods

Through this icon, you can control the display or hide the available payment methods on your store, and it is best to enable this box to show the available payment methods on your store for your customers

Payment method style

Through this icon you can control the selection form display of payment methods checkout page where there are two options:

Select or Radio

Display payment method images

Through this icon, you can control the display or hide of the payment methods images next to each payment method available in your store.

Select a default payment method

Through this icon, you can control the selection of the default payment method that will appear to your customers on the checkout page,,, which includes all the payment methods available inside the store control panel and you should choose your appropriate and effective payment method 

 

Shipping Method

mceclip11.png

 

through the setting of shipping method, you can control the show or hide shipping methods, the names of the shipping methods, the form icons of the shipping method, image of shipping methods, also with the possibility of choosing the default shipping method

Enable shipping methods step

Through this icon, you can control the display or hide the full shipping box inside the checkout page, and preferably enable this box until the shipping method box is displayed on the checkout page 

Display shipping methods

Through this icon, you can control the display or hide the available shipping methods on your store, and it is best to enable this box to show the available shipping methods on your store for your customers

Shipping method style

Through this icon you can control the selection form display of shipping methods checkout page where there are two options:

Select or Radio

Display shipping method group title

Through this icon, you can control the display or hide the address Please choose the preferred shipping method for this order

Select a default shipping method

Through this icon, you can control the selection of the default shipping method that will appear to your customers on the checkout page,,, which includes all the shipping methods available inside the store control panel and you should choose your appropriate and effective shipping method 

 

Confirmation:

 

mceclip12.png

This part is divided into two points

  • Shopping Cart boxes 

Through this section, you can control the display or hide the existing taps inside the shopping cart box on the checkout page by clicking on display icon with the possibility of specifying the display of these fields on Logged in customer , Registrating customer , Guest customer

The purchase box includes the following boxes:

Display cart, Display column image, Display column name, Display column model, Display column quantity, Display column price, Display column total, Display coupon input , Display voucher input, Display reward input,

The following image for clarification after activating all Shopping Cart boxes 

  • Confirmation

Inside this section, there are settings to control the show or hide icon I agree to the terms condition by clicking on the display icon with the possibility of forcing clients to click on this tap via the active required icon

Also inside this section, there is control settings of the show or hide a box of Leave a comment for the order by clicking on display icon with the possibility of forcing clients to leave a comment for the order via an active required icon

Next picture for clarification after doing the settings to display the I agree to the terms condition icon with Leave a comment for the order

Notice

Please note that after making any setup in the app you must click on the Save icon

This application is available for free on all packages either monthly or yearly

On the next link, you can learn more about the prices of the packages with the applications attached to each package 

 https://www.expandcart.com/en/online-stores-pricing/

 

Comments

Relevant Videos