We will demonstrate how you can set up your checkout, changing the color and editing text and sizes. Many users confuse this configuration with form fields configuration. Shall we go?
- In the Supercheckout, under “Products”, click on “Edit” the product;
![](http://knowledgebase.builderall.com/wp-content/uploads/2021/06/2-2.jpg)
2. Go to “Design”;
![](http://knowledgebase.builderall.com/wp-content/uploads/2021/06/3-2.jpg)
3. Choose the checkout type and click the “pencil” to set it up;
![](http://knowledgebase.builderall.com/wp-content/uploads/2021/06/4-1-1024x281.jpg)
4. This page will appear with the fields to be configured;
![](http://knowledgebase.builderall.com/wp-content/uploads/2021/06/5-2-1024x573.jpg)
5. Field “Product” ;
![](http://knowledgebase.builderall.com/wp-content/uploads/2021/06/6-2.jpg)
6. Field “Field Style”;
![](http://knowledgebase.builderall.com/wp-content/uploads/2021/06/7-2-1024x404.jpg)
7. Field “Steps/Price/Button”;
![](http://knowledgebase.builderall.com/wp-content/uploads/2021/06/8-2-1024x411.jpg)
8. After setting it to your liking, click “Save”;
![](http://knowledgebase.builderall.com/wp-content/uploads/2021/06/9-2.jpg)
9. This will be the checkout layout after it is set up;
![](http://knowledgebase.builderall.com/wp-content/uploads/2021/06/10-2-1024x397.jpg)
10. To insert form fields to your checkout, we will have to configure the fields in a list, in Mailing Boss. To do this, go to Mailing Boss. Choose a list and click “Update”. If you want, you can create a new list;
![](http://knowledgebase.builderall.com/wp-content/uploads/2021/06/11-2-1024x413.jpg)
11. This page will open, click on “Fields”;
![](http://knowledgebase.builderall.com/wp-content/uploads/2021/06/12-1-1024x134.jpg)
12. Several field options will be shown and you can use them in your list;
![](http://knowledgebase.builderall.com/wp-content/uploads/2021/06/13-1-1024x300.jpg)
13. Assemble your form fields and then “Save”;
![](http://knowledgebase.builderall.com/wp-content/uploads/2021/06/14-1-1024x511.jpg)
![](http://knowledgebase.builderall.com/wp-content/uploads/2021/06/15-1-1024x542.jpg)
![](http://knowledgebase.builderall.com/wp-content/uploads/2021/06/16-1-1024x538.jpg)
![](http://knowledgebase.builderall.com/wp-content/uploads/2021/06/17-1.jpg)
14. After the list is saved, we will go back to Supercheckout. Go to the product that you have configured the checkout layout for, and then to “E-Mail Campaign”;
![](http://knowledgebase.builderall.com/wp-content/uploads/2021/06/18-1.jpg)
15. This page will be shown. Click here to choose a list;
![](http://knowledgebase.builderall.com/wp-content/uploads/2021/06/19-1-1024x187.jpg)
16. Choose the list you configured in Mailing Boss;
![](http://knowledgebase.builderall.com/wp-content/uploads/2021/06/20-1-1024x503.jpg)
17. Update and Finish this configuration;
![](http://knowledgebase.builderall.com/wp-content/uploads/2021/06/21-1-1024x61.jpg)
18. Go to “My Products” and click on “Links”;
![](http://knowledgebase.builderall.com/wp-content/uploads/2021/06/22-1.jpg)
19. A “Panel Links” will appear. Copy the link “Checkout URL”;
![](http://knowledgebase.builderall.com/wp-content/uploads/2021/06/23-2.jpg)
20. Go to the Cheetah Builder. Open the page where the checkout will be positioned and click “Elements”;
![](http://knowledgebase.builderall.com/wp-content/uploads/2021/06/24-1.jpg)
21. Go to “Iframe”. Drag and drag into your page;
![](http://knowledgebase.builderall.com/wp-content/uploads/2021/06/25-1.jpg)
22. This “iframe” box will open. Click on it and then click on “General Settings”;
![](http://knowledgebase.builderall.com/wp-content/uploads/2021/06/26-1.jpg)
23. Paste the copied link into “Embed URL”;
![](http://knowledgebase.builderall.com/wp-content/uploads/2021/06/27-1.jpg)
24. Now just adjust the checkout on your page. When you go to step 2 of the checkout, it will look like this;
![](http://knowledgebase.builderall.com/wp-content/uploads/2021/06/28-1-1024x613.jpg)
25. And this is how you will insert more form fields to your checkout.