One-Page Online Checkout

Your StoreFront has a secure one-page checkout where your customers enter their shipping and payment details and leave order comments before placing orders.

Note

The one-page checkout is enabled for all new StoreFronts. If you’ve been selling for a while, go to Settings, and click What's New to switch to the Next-Gen Storefront.

Checkout Steps

After selecting products and adding them to their shopping cart, customers can proceed to checkout and make a purchase.

If you’ve enabled Inventory Tracking in your store, customers can add only in-stock products to their shopping carts. The cart content of customers is also checked against your product inventory to help you prevent overselling. If the products in the cart are still in stock, customers can proceed with their purchase.

Checkout in StoreFront consists of one page with several steps:

Customer Enters Email Address

The first step for customers at checkout is entering their email address.

Email address is captured at the beginning of order placement to ensure that you have the contact details of those customers who can drop out at this point, for example, due to poor internet connection or being distracted. Your StoreFront forms a list of Abandoned Carts so that you can send out reminders to customers that intended to purchase products or services but didn’t buy them.

Customers receive order notifications to track their order status to the specified email address. StoreFront automatically creates a customer account for every new email address entered in this field. Customers can sign in with this email address to their customer accounts at any time and check their order history.

Customer Selects from Delivery Options

After entering an email address and clicking Checkout, the customer proceeds to the Delivery options step to provide shipping address and select from the shipping and pickup options that you’ve enabled in your StoreFront and that are available for this address and the order.

The customer needs to select one shipping method for all products from one order. Your StoreFront checks what shipping methods are enabled in your store and shows only those that can be used for an order based on total order weight, dimensions, customer location, etc.

If you sell downloadable products or services, disable the option This Product Requires Shipping or Pickup on product editing pages, so that customers buying intangible products skip the Delivery options step. If you sell physical products, enable the This Product Requires Shipping or Pickup option on these product editing pages to enable shipping for these items.

Your StoreFront automatically detects customer’s location using the MaxMind GeoIP service to show estimated shipping costs and tax to the shopper in the shopping cart, hence the shipping fields like country and city can be prefilled for your customers at checkout.

Note

The estimated shipping shows the cost of the first shipping method available for the order from the list of shipping methods enabled in your Store Menu in Shipping & Pickup section. You can sort shipping methods so that low-priced shipping methods go first and the estimated shipping is based on them when possible.

If you communicate with customers mainly by phone, you can require your customers to leave their phone number at this step. For this, enable the Require phone number at checkout option in SettingsGeneralCart & Checkout tab.

Customer Chooses from Payment Options

After a customer enters shipping information and picks shipping/delivery method available for the order, it’s time for them to decide how they want to pay for the order. Customers see all payment methods that you’ve enabled in the Payments section of your Store Menu.

You can add a payment instruction for a payment method and, when a customer picks it at checkout, the instruction will appear below the list of your payment methods. Payment instructions help to describe customers how they can pay for an order, for example, how to pay with an offline payment method if they are unable or unwilling to pay online.

If you need to collect billing addresses of your customer, add the Billing Address section to the Payment options step at checkout. Collecting customers' billing address can help you prevent chargebacks and fraud, since some payment gateways can verify whether a billing address entered at checkout matches what the card issuing bank has on file (if addresses don’t match, the attempted purchase may not go through).

To add the billing address section, in your Store Menu:

  1. In the side panel of the editor, click eCommerce and then click Manage Store.
  2. Click Settings, General, and then click the Cart & Checkout.
  3. Enable the Ask for a billing address during checkout setting.

StoreFront is differently integrated with payment gateways for credit card processing and this affects the checkout flow. With some gateways, the credit card form is securely embedded right in the store checkout and customers stay at your site during the entire checkout process. With some payment processors, customers visit the processor’s site for entering credit card details and then they are returned to your StoreFront and see the Thank you for your order page.

Customer Places Order

After choosing the desired method of payment and specifying payment details, customers click Place Order (it can say Pay or Pay with PayPal, depending on the payment method). Then customers see their order details at the Thank you for your order page and in the Order Confirmation email that hits their inbox.

Edit Checkout Form Options

You can edit your checkout page so you can share StoreFront news here, make announcements, or let customers leave notes at checkout.

Request Extra Details

If you need to get additional information from customers at checkout, for example, ask how they found out about your StoreFront or whether they have any special wishes about the order delivery, there are several ways to do it:

  • Enable order comments. You can enable order comments in your Store Menu, in SettingsGeneralCart & CheckoutOrder comments. In the Order notes field caption, specify what info you expect customers to leave in the order comments. You can make this field optional or required.
  • Add the company name field. If you don't sell to companies, you don't need this field. However, you can enable it and change the name of this field to whatever you wish so you can ask any info in this field.
Note

If you want to change the order of fields at checkout, hide or add new sections there or otherwise tailor it to your business needs, you can customize your store using CSS or API.

Add “I Agree with Terms & Conditions” Checkbox

You can ask your customers to agree with your StoreFront’s Terms and Conditions before they can proceed with checkout.

To add a checkbox to ask customers to accept your StoreFront terms at checkout:

  1. In the side panel of the editor, click eCommerce, and then click Manage Store.
  2. Click Settings, and then click General and scroll down to the Customers’ consent section.
  3. Enable the Show "I agree with Terms & Conditions" checkbox at checkout setting.

Now the customers have to agree with the terms to be able to proceed with checkout.

Note

To see how to add a privacy policy, terms & conditions, and other legal pages to your StoreFront, see Legal Pages in StoreFront.

Ask for Consent to Receive Marketing Emails

You can also add a checkbox at checkout to collect customers’ consent to receive your marketing emails.

To add a checkbox that asks customers to agree with being on your marketing mailing list:

  1. In the side panel of the editor, click eCommerce, and then click Manage Store.
  2. Click Settings, click General and then click the Cart & Checkout tab.
  3. Scroll to the Newsletters section and enable the Request customers' approval for your marketing emails at checkout setting.

Remove Zip Code Field

You can remove the postal/zip code field from the address form if you do not need to use it for the delivery cost estimations at checkout.

To remove the zip code field from your store checkout:

  1. In the side panel of the editor, click eCommerce, and then click Manage Store.
  2. Click Settings, click General, and then click the Cart & Checkout tab.
  3. Disable the AskforaZIP/postal code option.

FAQs

My customers see pre-defined values in checkout fields. Why?

When a customer goes to checkout, StoreFront determines customer’s country, city and zip code based on the IP address (we use MaxMind's GeoIP solution) and prefills fields with these values. This helps customers to check out faster (which means more sales for you). Besides, your customers see estimated shipping and tax cost as soon as they open the cart page.

If you get incorrect predefined values, it means that MaxMind databases don't have the correct value for your IP. In this case, open MaxMind and check how it determines your location. If you see the correct values on that page, it means that the problem is already fixed in the newest MaxMind database and it will be fixed soon in StoreFront, too (we update our geo-IP databases on monthly basis). If you see incorrect values on that page, then please send a correction and MaxMind will fix the problem.

Why does the checkout say that no payment methods are available at this time?

This message appears if there are no enabled payment methods in your store. To fix the issue, log into your Store Menu, go to Payment page and enable at least one payment method.

How long do the added products remain in the cart?

The cart content never expires. It is tied to a customer's browser and will be cleared only if a customer clears their browser's local storage/cookies. It was implemented intentionally to increase sales for all StoreFront merchants — customers can come back to your store later and finish the purchase.

A product added to cart doesn't affect the global store's inventory. It affects the look of the store for this particular customer only. The global inventory is changed only when the customer places their order. Thus, if one customer adds a product to cart, all the other customers will see the same number of items in stock for this product as you really have in your store at that moment and they can buy the product.