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
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
First, general settings
the general settings are divided into three sections ( General Settings - Login - Design )
General Settings
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.
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.
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:
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.
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.
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)
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.
Payment Address:
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
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
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
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:
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,
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
Features:
Easy checkout for registered users, logged in users, and guests
Customize all personal, payment, and shipping fields
Customize checkout page layout and design
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
First, general settings
the general settings are divided into three sections ( General Settings - Login - Design )
General Settings
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.
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.
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:
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.
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.
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)
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.
Payment Address:
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
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
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
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:
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,
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
Updated on: 23/01/2023
Thank you!