{"id":8303,"date":"2019-05-30T17:11:01","date_gmt":"2019-05-30T13:11:01","guid":{"rendered":"https:\/\/blog.cs-cart.com\/?p=8303"},"modified":"2026-06-26T14:36:35","modified_gmt":"2026-06-26T10:36:35","slug":"how-to-design-a-perfect-checkout-page-for-your-cs-cart-store-or-marketplace","status":"publish","type":"post","link":"https:\/\/www.cs-cart.com\/blog\/how-to-design-a-perfect-checkout-page-for-your-cs-cart-store-or-marketplace\/","title":{"rendered":"How to Design a Perfect Checkout Page for Your CS-Cart Store or Marketplace"},"content":{"rendered":"\n<p>Hello!<\/p>\n\n\n\n<p>CS-Cart and <a href=\"https:\/\/www.cs-cart.com\/multivendor\" title=\"\">Multi-Vendor<\/a> 4.10.1 got a <strong>new checkout page<\/strong>. Customers now place orders quicker and admins customize the checkout page very flexibly through the standard CS-Cart layout editor.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Fast checkout in CS-Cart and Multi-Vendor\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/glFf6p00gss?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<!--more-->\n\n\n\n<p>In supermarkets, customers usually choose the checkout point with the shortest queue. You do the same for sure. In online stores, the situation is the same: <strong>27% of customers drop their carts because of the complicated and long checkout procedure<\/strong>.<\/p>\n\n\n\n<p>Now in CS-Cart based stores and marketplaces, you stop losing customers at checkout thanks to a simpler checkout page. The <a href=\"https:\/\/www.cs-cart.com\/blog\/7-best-practices-to-ensure-a-seamless-checkout-experience\/\" title=\"\">checkout process<\/a> is not divided into steps now\u2014customers fill in the fields in no particular order and choose payment and shipping methods by clicking big tiles:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-opt-id=2143109351  fetchpriority=\"high\" decoding=\"async\" width=\"642\" height=\"1024\" src=\"https:\/\/mldi5dmmdvnt.i.optimole.com\/cb:sOwt.3b410\/w:642\/h:1024\/q:mauto\/f:best\/https:\/\/www.cs-cart.com\/blog\/wp-content\/uploads\/checkout-page.png\" alt=\"How to Design a Perfect Checkout Page for Your CS-Cart Store or Marketplace: photo 2 - CS-Cart Blog\" class=\"wp-image-8324\" srcset=\"https:\/\/mldi5dmmdvnt.i.optimole.com\/cb:sOwt.3b410\/w:642\/h:1024\/q:mauto\/f:best\/https:\/\/www.cs-cart.com\/blog\/wp-content\/uploads\/checkout-page.png 642w, https:\/\/mldi5dmmdvnt.i.optimole.com\/cb:sOwt.3b410\/w:188\/h:300\/q:mauto\/f:best\/https:\/\/www.cs-cart.com\/blog\/wp-content\/uploads\/checkout-page.png 188w, https:\/\/mldi5dmmdvnt.i.optimole.com\/cb:sOwt.3b410\/w:768\/h:1224\/q:mauto\/f:best\/https:\/\/www.cs-cart.com\/blog\/wp-content\/uploads\/checkout-page.png 768w, https:\/\/mldi5dmmdvnt.i.optimole.com\/cb:sOwt.3b410\/w:936\/h:1492\/q:mauto\/f:best\/https:\/\/www.cs-cart.com\/blog\/wp-content\/uploads\/checkout-page.png 936w\" sizes=\"(max-width: 642px) 100vw, 642px\" \/><\/figure>\n\n\n\n<p>Good news for admins, too: you can add, edit, delete, and rearrange checkout page content very flexibly through the layout editor or <strong>right on the storefront<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img data-opt-id=821476142  fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"664\" src=\"https:\/\/mldi5dmmdvnt.i.optimole.com\/cb:sOwt.3b410\/w:1024\/h:664\/q:mauto\/f:best\/https:\/\/www.cs-cart.com\/blog\/wp-content\/uploads\/checkout-storefront.png\" alt=\"How to Design a Perfect Checkout Page for Your CS-Cart Store or Marketplace: photo 3 - CS-Cart Blog\" class=\"wp-image-8325\" srcset=\"https:\/\/mldi5dmmdvnt.i.optimole.com\/cb:sOwt.3b410\/w:1024\/h:664\/q:mauto\/f:best\/https:\/\/www.cs-cart.com\/blog\/wp-content\/uploads\/checkout-storefront.png 1024w, https:\/\/mldi5dmmdvnt.i.optimole.com\/cb:sOwt.3b410\/w:300\/h:195\/q:mauto\/f:best\/https:\/\/www.cs-cart.com\/blog\/wp-content\/uploads\/checkout-storefront.png 300w, https:\/\/mldi5dmmdvnt.i.optimole.com\/cb:sOwt.3b410\/w:768\/h:498\/q:mauto\/f:best\/https:\/\/www.cs-cart.com\/blog\/wp-content\/uploads\/checkout-storefront.png 768w, https:\/\/mldi5dmmdvnt.i.optimole.com\/cb:sOwt.3b410\/w:770\/h:499\/q:mauto\/f:best\/https:\/\/www.cs-cart.com\/blog\/wp-content\/uploads\/checkout-storefront.png 770w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Such flexibility gives you plenty of room for experiments with the checkout page. You will be able to build a perfect and maximum effective checkout for your store or marketplace.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-opt-id=32158239  data-opt-src=\"https:\/\/mldi5dmmdvnt.i.optimole.com\/cb:sOwt.3b410\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/www.cs-cart.com\/blog\/wp-content\/uploads\/image2-1.png\"  decoding=\"async\" width=\"770\" height=\"579\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%%20100%%22%20width%3D%22100%%22%20height%3D%22100%%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%%22%20height%3D%22100%%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"How to Design a Perfect Checkout Page for Your CS-Cart Store or Marketplace: photo 4 - CS-Cart Blog\" class=\"wp-image-8305\" old-srcset=\"https:\/\/mldi5dmmdvnt.i.optimole.com\/cb:sOwt.3b410\/w:770\/h:579\/q:mauto\/f:best\/https:\/\/www.cs-cart.com\/blog\/wp-content\/uploads\/image2-1.png 770w, https:\/\/mldi5dmmdvnt.i.optimole.com\/cb:sOwt.3b410\/w:300\/h:226\/q:mauto\/f:best\/https:\/\/www.cs-cart.com\/blog\/wp-content\/uploads\/image2-1.png 300w, https:\/\/mldi5dmmdvnt.i.optimole.com\/cb:sOwt.3b410\/w:768\/h:577\/q:mauto\/f:best\/https:\/\/www.cs-cart.com\/blog\/wp-content\/uploads\/image2-1.png 768w\" \/><\/figure>\n\n\n\n<p>Add, edit, and delete fields to the checkout page via blocks as well. For example, you can add additional customer info fields to the <em>Address<\/em> block:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-opt-id=2098003695  data-opt-src=\"https:\/\/mldi5dmmdvnt.i.optimole.com\/cb:sOwt.3b410\/w:1024\/h:615\/q:mauto\/f:best\/https:\/\/www.cs-cart.com\/blog\/wp-content\/uploads\/image1-2.png\"  decoding=\"async\" width=\"1024\" height=\"615\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%201024%20615%22%20width%3D%221024%22%20height%3D%22615%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%221024%22%20height%3D%22615%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"How to Design a Perfect Checkout Page for Your CS-Cart Store or Marketplace: photo 5 - CS-Cart Blog\" class=\"wp-image-8306\" old-srcset=\"https:\/\/mldi5dmmdvnt.i.optimole.com\/cb:sOwt.3b410\/w:1024\/h:615\/q:mauto\/f:best\/https:\/\/www.cs-cart.com\/blog\/wp-content\/uploads\/image1-2.png 1024w, https:\/\/mldi5dmmdvnt.i.optimole.com\/cb:sOwt.3b410\/w:300\/h:180\/q:mauto\/f:best\/https:\/\/www.cs-cart.com\/blog\/wp-content\/uploads\/image1-2.png 300w, https:\/\/mldi5dmmdvnt.i.optimole.com\/cb:sOwt.3b410\/w:768\/h:461\/q:mauto\/f:best\/https:\/\/www.cs-cart.com\/blog\/wp-content\/uploads\/image1-2.png 768w, https:\/\/mldi5dmmdvnt.i.optimole.com\/cb:sOwt.3b410\/w:770\/h:462\/q:mauto\/f:best\/https:\/\/www.cs-cart.com\/blog\/wp-content\/uploads\/image1-2.png 770w\" \/><\/figure>\n\n\n\n<p>All the fields are available in <strong>Administration \u2192 Profile fields<\/strong>. There, you can create custom fields, the date of birth fields for example, and add it to the block through the layout editor.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-opt-id=1180292888  data-opt-src=\"https:\/\/mldi5dmmdvnt.i.optimole.com\/cb:sOwt.3b410\/w:1024\/h:601\/q:mauto\/f:best\/https:\/\/www.cs-cart.com\/blog\/wp-content\/uploads\/image7-1.png\"  decoding=\"async\" width=\"1024\" height=\"601\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%201024%20601%22%20width%3D%221024%22%20height%3D%22601%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%221024%22%20height%3D%22601%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"How to Design a Perfect Checkout Page for Your CS-Cart Store or Marketplace: photo 6 - CS-Cart Blog\" class=\"wp-image-8307\" old-srcset=\"https:\/\/mldi5dmmdvnt.i.optimole.com\/cb:sOwt.3b410\/w:1024\/h:601\/q:mauto\/f:best\/https:\/\/www.cs-cart.com\/blog\/wp-content\/uploads\/image7-1.png 1024w, https:\/\/mldi5dmmdvnt.i.optimole.com\/cb:sOwt.3b410\/w:300\/h:176\/q:mauto\/f:best\/https:\/\/www.cs-cart.com\/blog\/wp-content\/uploads\/image7-1.png 300w, https:\/\/mldi5dmmdvnt.i.optimole.com\/cb:sOwt.3b410\/w:768\/h:451\/q:mauto\/f:best\/https:\/\/www.cs-cart.com\/blog\/wp-content\/uploads\/image7-1.png 768w, https:\/\/mldi5dmmdvnt.i.optimole.com\/cb:sOwt.3b410\/w:770\/h:452\/q:mauto\/f:best\/https:\/\/www.cs-cart.com\/blog\/wp-content\/uploads\/image7-1.png 770w\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>Other new features in 4.10.1 are described in the <a rel=\"noreferrer noopener\" aria-label=\"release post (opens in a new tab)\" href=\"https:\/\/www.cs-cart.com\/blog\/meet-cs-cart-multi-vendor-4-10-1-with-new-checkout-and-product-variations\/\" target=\"_blank\">release post<\/a>. Read a separate article about the final version of the <strong><a href=\"https:\/\/www.cs-cart.com\/blog\/product-variations-how-to-effectively-manage-similar-products-in-cs-cart-and-multi-vendor\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Product variations (opens in a new tab)\">Product variations<\/a><\/strong> function.<\/p>\n","protected":false},"excerpt":{"rendered":"Hello! CS-Cart and Multi-Vendor 4.10.1 got a new checkout page. Customers now place orders quicker and admins customize&hellip;","protected":false},"author":31003,"featured_media":8346,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_ayudawp_aiss_exclude":false,"csco_singular_sidebar":"","csco_page_header_type":"","csco_page_load_nextpost":"","footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.cs-cart.com\/blog\/wp-json\/wp\/v2\/posts\/8303"}],"collection":[{"href":"https:\/\/www.cs-cart.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cs-cart.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cs-cart.com\/blog\/wp-json\/wp\/v2\/users\/31003"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cs-cart.com\/blog\/wp-json\/wp\/v2\/comments?post=8303"}],"version-history":[{"count":1,"href":"https:\/\/www.cs-cart.com\/blog\/wp-json\/wp\/v2\/posts\/8303\/revisions"}],"predecessor-version":[{"id":19823,"href":"https:\/\/www.cs-cart.com\/blog\/wp-json\/wp\/v2\/posts\/8303\/revisions\/19823"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cs-cart.com\/blog\/wp-json\/wp\/v2\/media\/8346"}],"wp:attachment":[{"href":"https:\/\/www.cs-cart.com\/blog\/wp-json\/wp\/v2\/media?parent=8303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cs-cart.com\/blog\/wp-json\/wp\/v2\/categories?post=8303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cs-cart.com\/blog\/wp-json\/wp\/v2\/tags?post=8303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}