Checkout Page

Once you click on the pencil icon, you can edit the checkout page. You will be able to see a list of icons on the leftmost part of the screen. Let’s look at those icons and their features one by one.

Click on the Pencil icon next to the template name to change the template name.

General Settings

This is the first icon on the left. This is where you can make general changes to the appearance of your layout. Let’s see what can be done in this section.

Font Family: If you want to change the font of your fields, click on the drop-down menu below ‘Font Family’.

Background Color: You can change the background color of the different sections of the checkout page by selecting the color of your choice from the color picker.
Note: Here, you will find two options: background color 1 and background color 2. However, this will change depending on which template you choose, as this option is design-dependent.

Primary Color: Set the primary color to align with your brand.

Padding

The next section is padding. If you select ‘Independent padding’, you can change the padding of each side individually. Otherwise the padding will be applied to all four sides at once.

Divider

Here, you can either enable or disable the divider and change its color and border thickness. You can also selectively display the divider either on desktop or mobile or both by clicking on the toggle button provided.

Header section

You can make changes specifically to your header in this section.

There are three actions that you can perform in your header section.

1. No – This will remove the header section from the checkout.
2. Design – This will display the header section that has been provided for the selected template.
3. Website – Selecting this will display your website’s header on the checkout page.

If you choose to display the provided header section(option 2), you can make the following changes to the header:

1. Upload your company’s logo by clicking on the upload button.
2. Adjust the logo width and height.
3. Choose the alignment of the logo.

You can also display the logo either on the left, right or center of the checkout page.

There is also an option to hide the logo on either the desktop, mobile or both.

Checkout Form

Here you can edit the appearance and the titles of the different sections checkout.
Fields
You can change the following aspects of the checkout field here:

1. Background color : Choose the color of your choice from the color picker. This will change the background color of the fields.
2. Border color: This will change the border color of the fields
3. Border thickness: Here you can enter the desired border thickness of the fields
4. Border radius: Change the radius of the border of the fields
5. Placeholder color: Here you can change the color of the placeholder content
6. Input text colour: Here you can change the color of user input.
7. Label color: You can change the color of field labels here.

Text

These are the changes you can make to the titles in the checkout form;

1. Title font color: Pick a color from the color picker to change the color of the titles of different sections.
2. Title Font weight: This will change the font weight of the titles of different sections.
3. Content font color: This will change the color of the font of all the additional content in the checkout form.
4. Content font weight: This will change the font weight of all the additional content in the checkout form.

Title

You can change the title of each section in the checkout page.

Button

Here you can change the appearance of the Checkout Button (at the bottom of the checkout page).
You can edit the button label, button color, button hover color and text color.
You can also adjust the width and radius of the Checkout button.

Order Summary

This section is where you can make changes to the appearance of the order summary. Let’s look at all the changes that can be made in this section.

1. Title: Here you can change the title of the section.
2. Background color: Change the background color of the order summary section
3. Border color: Change the color of the border.
4. Border thickness: Increase or decrease the thickness of the border
5. Border Radius: Change the radius of the border

Additionally you can change the font color and font weight of the title, subtile and content.
You can either enable or disable the product image in the order summary by clicking on the toggle button next to ‘Show Image’.

Coupon

If you plan on adding coupons to your checkout page, you can change its appearance under this section. You can perform the following actions here:

1. Change the background of the coupon by selecting the color of your choice from the color picker.
2. Change the color of the button, text, button hover and text hover.
3. Change the label of the button.

Testimonials

Adding user testimonials on your checkout page is a great way to improve the trust of your customers in your brand.
You can click on the show testimonials toggle button to display the testimonials on your checkout page.
You can also edit the title for the testimonial section.
You can change the color of the title, subtitle and content of the testimonial section.
By clicking on the toggle button next to ‘Show Testimonial’ you can selectively display as many testimonials as you want.
You can enter the description, image of the customer, customer name, customer details(designation, company name etc.) and customer rating.

Trust Badges

Adding trust badges to your store is essential if you want to build trust in your customers.
You can also show/hide trust factors, change the title of this section and change the color of the title and content of this section.
Once you add a trust factor, you can edit each one separately. You can change the label of each trust factor and upload an icon to symbolize the trust factor.