# Cart and checkout URL: https://docs.sparklayer.io/help/ordering/cart-and-checkout How the SparkLayer checkout works, step by step, and how to customise it: the PO number field, payment and checkout messages, terms link and order limits. > **Quick summary** > > - B2B customers check out in the [My Cart](https://docs.sparklayer.io/help/storefront/interfaces/my-cart.md) in four steps: **Cart**, **Details**, **Review & Pay** and **Complete**. Customers who can request quotes also see **Request Quote**. > - Set order limits per customer group at **Customers > Groups** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/customers/groups)), or **SparkLayer Wholesale > Customers > Customer groups** in the Shopify app. Set checkout fields, the order of payment methods and saving addresses at **Storefront > Options > Checkout** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options > Checkout** in the Shopify app. > - Change most checkout text without code at **Storefront > Options > Translation overrides** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options > Translation overrides** in the Shopify app, including payment and checkout messages, the terms link and the order complete message. ## How it works The four steps of the SparkLayer checkout: 1. **Cart**: Check the lines, apply discount codes, then click **Checkout** 2. **Details**: Shipping address, PO number, files and a preferred shipping date 3. **Review & Pay**: Shipping method, payment method, order summary and terms 4. **Complete**: The order is placed and sent to your eCommerce platform A strip at the top of My Cart shows the four steps. Finished steps get a tick, and customers can click one to go back. From **Details** onwards, a bar at the bottom shows the sub-total, with a **Back** button beside the main button. You change the checkout in one of three ways: | What you're changing | How | Who does it | | --- | --- | --- | | Text customers see | A translation key, at **Storefront > Options > Translation overrides** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options > Translation overrides** in the Shopify app or in `translations` in your Core Script. See [Change checkout text](#change-checkout-text). | You, in SparkLayer. No code needed. | | How something behaves | A display setting in your [Core Script](https://docs.sparklayer.io/help/glossary.md#core-script) (the SparkLayer code in your theme), such as `display: { customerReferenceRequired: true }`. See [Frontend integration](https://docs.sparklayer.io/developers/frontend.md). | Your developer or agency | | How something looks | CSS variables in your [CSS overrides](https://docs.sparklayer.io/help/storefront/customising-design.md). | Your developer, agency or anyone who edits your theme code | ## The checkout, step by step ### Cart The customer checks their lines, quantities, **Discounts & codes** and **Sub-total**, then clicks **Checkout**. **More detail** If the order breaks the customer group's [order limits](#set-minimum-and-maximum-order-values), My Cart shows a message and the customer can't check out until they change it. If their group can request quotes, **Request Quote** sits beside **Checkout**: see [Submit a quote instead](#submit-a-quote-instead). ### Details The customer confirms the delivery address, fills in your [checkout fields](https://docs.sparklayer.io/help/ordering/checkout-fields.md), such as a PO number, and clicks **Continue**. You choose which fields appear, their names and their order. **What's on the Details step** | Part | What it does | | --- | --- | | **Shipping Address** | Lists the customer's saved addresses (as a drop-down list if there are more than 4), with **Add a new address**. A note says they can edit addresses from their account. | | **Purchase Order (PO) Number** | A box for the customer's PO number, if you've turned on the PO number field. | | **Upload Files** | Attaches files to the order, such as a purchase order, if you've turned on file uploads (Growth plan and above). | | **Preferred Shipping Date** | The date the customer would like the order shipped, if you've added a shipping date field. It can open on the earliest date you allow. | | **Additional Information** | A free-text box for notes, if it's turned on. See [Set up the Additional Information field](#set-up-the-additional-information-field-po-number). | | Other checkout fields | Any other fields you've added, such as delivery instructions or a tick box. | Addresses come from the customer's address book in your store admin. When adding a new address, the customer can also tick: | Option | What it does | | --- | --- | | **Set as default shipping address** | Uses this address for shipping on future orders. | | **Set as default billing address** | Uses this address for billing on future orders. | | **Save address to address book** | Saves the address so it can be edited later in the [My Account](https://docs.sparklayer.io/help/storefront/interfaces/my-account.md). | They then click **Continue and use this address**. To stop customers adding or editing addresses, see [Allow customers to edit addresses](https://docs.sparklayer.io/help/customers/customer-groups.md#allow-customers-to-edit-addresses). ### Review & Pay The customer chooses a shipping and payment method, checks the totals, ticks the terms and clicks **Complete Order**, which shows the total (for example, **Complete Order: $1,540.03**). Tax and shipping are worked out on this step: see [Tax and shipping](https://docs.sparklayer.io/help/ordering/tax-and-shipping.md). **What's on the Review & Pay step** | Part | What it does | | --- | --- | | Checkout message | Your own message in a box at the top, if you've [added one](#add-a-checkout-message). | | **Shipping Method** | The shipping options, each with its cost, such as standard or express. See [Shipping rules](https://docs.sparklayer.io/help/ordering/shipping-rules.md). | | **Payment Method** | The [payment methods](https://docs.sparklayer.io/help/ordering/payment-methods.md) the customer's group allows, such as **Pay on Account**, **Pay by Invoice** and **Pay Online by Card**, with a message about the selected method. | | **Order Summary** | **Discounts & codes**, **Sub-total**, **Shipping** (with the delivery address), **Tax** and **Total**. | | Terms tick box | "I agree to the terms and conditions". See [Change the terms and conditions link](#change-the-terms-and-conditions-link). | | **Complete Order** | Places the order. The button shows the total, for example **Complete Order: $1,540.03**. | ### Complete The customer sees **Thank you for your order!**, with a note that a confirmation email is on its way and they can track the order in My Account. **View order** opens it in [My Account](https://docs.sparklayer.io/help/storefront/interfaces/my-account.md). The order goes to your eCommerce platform like any other, as a draft or completed order depending on the payment method. See [Payment methods](https://docs.sparklayer.io/help/ordering/payment-methods.md). ### Submit a quote instead If the customer's group can request quotes with the [Quoting Engine](https://docs.sparklayer.io/help/ordering/quoting.md), they can send the cart to your team as a quote instead of placing an order. No payment is taken. 1. In **My Cart**, click **Request Quote**, next to **Checkout**. Sales agents ordering for a customer see **Submit Quote** instead. 2. On **Details**, choose the address and fill in the fields. 3. On **Review & Pay**, a banner says **This order will be submitted as a quote**. Choose a **Shipping Method** and check the **Order Summary**. There's no payment method: the customer chooses one when they complete the quote. 4. Fill in **Quote Details**, tick the terms and conditions and click **Submit Quote**, which shows the total (for example, **Submit Quote: $1,540.03**). The Complete step says **Thank you for requesting a quote!** Your team is emailed, and the quote appears in the customer's My Account. For what happens next, see [Work on a quote](https://docs.sparklayer.io/help/ordering/work-on-a-quote.md). ## Set minimum and maximum order values Order limits stop a customer checking out until the order meets your rules, such as a $100 minimum spend or at least 50 items. You set them for each customer group, as **Order total limits** or **Order quantity limits**: see [Set order limits](https://docs.sparklayer.io/help/storefront/quantity-rules.md#order-limit-rules). Order totals exclude tax, unless you show [tax-inclusive prices](https://docs.sparklayer.io/help/pricing/pricing-display.md#show-tax-inclusive-prices). Until the order meets the limit, My Cart shows a message and the customer can't check out. For every option and the message text, see [Order limits in customer groups](https://docs.sparklayer.io/help/storefront/quantity-rules.md#order-limit-rules). ## Offer discounts and coupon codes Customers enter a coupon code with **Discounts & codes**, in the cart or in the **Order Summary**, and discounts can also apply automatically. For what customers see, see [Discounts and promotions](https://docs.sparklayer.io/help/storefront/interfaces/my-cart.md#discounts-and-promotions) in My Cart. B2B discounts need the Growth plan or above. To set them up, including order-level, percentage, fixed, scheduled and customer group discounts, see [Discounts](https://docs.sparklayer.io/help/pricing/discounts.md). ## Change checkout text Every piece of text in the cart and checkout has a translation key, such as `cart.checkout.notes.label`. Change any of it without code: 1. Go to **Storefront > Options** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options** in the Shopify app and open **Translation overrides**. 2. Click **Add override**. 3. Choose the language, such as `en`, and the key, then enter your text. 4. Click **Save and publish**. The sections below give the key for each message, plus Core Script code for developers. To find other keys, see [Find the key for a piece of text](https://docs.sparklayer.io/help/storefront/languages-and-international.md#find-the-key-for-a-piece-of-text) and [Languages and international](https://docs.sparklayer.io/help/storefront/languages-and-international.md). ## Add a checkout message A checkout message sits in a box at the top of **Review & Pay**, above the shipping methods. Use it for anything customers need to know before ordering, such as shipping cut-off times or payment information. To add one, set the key `cart.checkout.review-step.custom-message` in **Translation overrides** (see [Change checkout text](#change-checkout-text)). The message shows to all customers; you can't vary it by customer. **Core Script code for your developer** ```javascript title="Core Script" translations: { en: { "cart.checkout.review-step.custom-message": "Add your custom checkout message here", } }, ``` ### Style the checkout message The message's colours, spacing, alignment and border are CSS variables in your website's CSS. See [Customising design](https://docs.sparklayer.io/help/storefront/customising-design.md). **CSS for your developer** This is a theme code change, so pass it to your developer if you don't edit your theme: ```html ``` ## Add a message for each payment method A payment method message sits under the payment methods on **Review & Pay** and explains the selected method. For example, tell customers who choose **Pay by Invoice** when and how you'll invoice them. It changes as the customer picks a method. Set the method's key in **Translation overrides** (see [Change checkout text](#change-checkout-text)): | Payment method | Key | | --- | --- | | **Pay by Invoice** | `cart.checkout.payment-providers.paymentByInvoice.message` | | **Pay Online by Card** | `cart.checkout.payment-providers.upfrontPayment.message` | | **Pay on Account** | `cart.checkout.payment-providers.paymentOnAccount.message` | | **Request for Quote** | `cart.checkout.payment-providers.quote.message` | Each message shows to every customer who selects that method; you can't vary it by customer. To choose which methods each customer sees, see [Payment methods](https://docs.sparklayer.io/help/ordering/payment-methods.md). **Core Script code for your developer** ```javascript title="Core Script" translations: { en: { "cart.checkout.payment-providers.paymentByInvoice.message": "This is a message for Payment by Invoice", "cart.checkout.payment-providers.upfrontPayment.message": "This is a message for Pay Online by Card", "cart.checkout.payment-providers.paymentOnAccount.message": "This is a message for Pay on Account", "cart.checkout.payment-providers.quote.message": "This is a message for Request for Quote", } }, ``` ## Set up the Additional Information field (PO number) **Additional Information** is a free-text box on the **Details** step, up to 512 characters. Customers often use it for a PO number, delivery instructions or other notes. Its placeholder is "Order notes e.g. PO Number". On Shopify, the text appears in the order's **Notes** section. You can also send it to a backend system with the [SparkLayer API](https://docs.sparklayer.io/developers/api.md). For other platforms, see the [developer docs](https://docs.sparklayer.io/developers.md). To store a PO number or customer reference in a structured, searchable place, use the standard **PO Number** or **Customer Reference** checkout field instead. Add them without code at **Storefront > Options > Checkout** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options > Checkout** in the Shopify app: see [Move to the standard fields](https://docs.sparklayer.io/help/ordering/checkout-fields.md#move-to-the-standard-fields). You can change the field's text yourself. Making it required, limiting its length or hiding it are Core Script settings for your developer. ### Change the label and helper text Set these keys in **Translation overrides** (see [Change checkout text](#change-checkout-text)): | Key | Default text | | --- | --- | | `cart.checkout.notes.label` | Additional Information | | `cart.checkout.notes.placeholder` | Order notes e.g. PO Number | | `cart.checkout.notes.helper-text` | Please note, this is required before placing your order (only shown if the field is required) | | `cart.checkout.notes.default-helper-text` | Empty. Add a helper message to show below the field. | **Core Script code for your developer** ```javascript title="Core Script" translations: { en: { "cart.checkout.notes.label": "Additional Information", "cart.checkout.notes.placeholder": "Order notes e.g. PO Number", "cart.checkout.notes.helper-text": "Please note, this is required before placing your order", /* Only shown if the field is set to required */ "cart.checkout.notes.default-helper-text": "", /* Add a helper message below the form field */ } }, ``` ### Make the field required Your developer adds this to the `display` object in your Core Script. Customers then can't place an order until they fill in the field, and see the helper text "Please note, this is required before placing your order". ```javascript title="Core Script" display: { customerReferenceRequired: true, }, ``` ### Limit the number of characters Your developer can set a limit lower than 512: ```javascript title="Core Script" display: { customerReferenceMaxLength: 512, /* update 512 as required */ }, ``` ### Hide the field Your developer adds this to the Core Script: ```javascript title="Core Script" display: { customerReferenceHidden: true, }, ``` ## Change the terms and conditions link Customers tick "I agree to the terms and conditions" before they complete the order. The link goes to `policies/terms-of-service` by default. | To change | How | Who does it | | --- | --- | --- | | The words around the link | The keys `cart.checkout.terms.start` ("I agree to the "), `cart.checkout.terms.link` ("terms and conditions") and `cart.checkout.terms.end`, in **Translation overrides** (see [Change checkout text](#change-checkout-text)) | You, in SparkLayer | | Where the link goes | `termsAndConditionsLink` in your Core Script. On Shopify, it can change with the customer's tags or the store language. | Your developer | **Core Script code for your developer** Set the link: ```javascript title="Core Script" termsAndConditionsLink: "/policies/terms-of-service", ``` **Shopify only:** On Shopify, use Liquid to show a different link by customer tag or store language: ```javascript title="Core Script" {% if customer.tags contains 'b2b' %} termsAndConditionsLink: '/policies/b2b-terms', {% elsif customer.tags contains 'b2b-2' %} termsAndConditionsLink: '/policies/b2b-2-terms', {% elsif shop.locale == "fr" %} termsAndConditionsLink: '/policies/fr-terms-and-conditions', {% else %} termsAndConditionsLink: '/policies/terms-and-conditions', {% endif %} ``` To switch the link by language only: ```javascript title="Core Script" {%- if shop.locale == "fr" -%} termsAndConditionsLink: '/policies/fr-terms-and-conditions', {%- else -%} termsAndConditionsLink: '/policies/terms-and-conditions', {%- endif -%} ``` To change the wording in the Core Script instead of Translation overrides: ```javascript title="Core Script" translations: { en: { "cart.checkout.terms.start": "I agree to the ", "cart.checkout.terms.link": "terms and conditions", "cart.checkout.terms.end": " ", } }, ``` ## Change the tax and shipping note A short note under the main button tells customers when tax and shipping are calculated. Set these keys in **Translation overrides** (see [Change checkout text](#change-checkout-text)): | Where | Default text | Key | | --- | --- | --- | | Under **Checkout** on the **Cart** step | Tax and shipping costs calculated during checkout | `cart.tax-shipping-note` | | Under **Continue** on the **Details** step | Tax and shipping costs shown on next step | `cart.tax-shipping-message` | **Core Script code for your developer** ```javascript title="Core Script" translations: { en: { "cart.tax-shipping-note": "Tax and shipping costs calculated during checkout", "cart.tax-shipping-message": "Tax and shipping costs shown on next step", } }, ``` For how tax and shipping are calculated, see [Tax and shipping](https://docs.sparklayer.io/help/ordering/tax-and-shipping.md). ## Change the order complete message After placing an order, customers see a heading and a short message, with a separate version for quote requests. Set these keys in **Translation overrides** (see [Change checkout text](#change-checkout-text)). `{email}` is replaced with the customer's email address. | Key | Default text | | --- | --- | | `cart.thanks.payment.main` | Thank you for your order! | | `cart.thanks.payment.blurb` | Your order has now been placed and you will shortly receive email confirmation to `{email}`. You can check the status of your order at any time by going to 'My Account'. | | `cart.thanks.quote.main` | Thank you for requesting a quote! | | `cart.thanks.quote.blurb` | We can confirm that your request for a quote has been received and we'll be in touch once our team has reviewed it. | **Core Script code for your developer** ```javascript title="Core Script" translations: { en: { "cart.thanks.payment.main": "Thank you for your order!", "cart.thanks.payment.blurb": "Your order has now been placed and you will shortly receive email confirmation to {email}. You can check the status of your order at any time by going to 'My Account'.", "cart.thanks.quote.main": "Thank you for requesting a quote!", "cart.thanks.quote.blurb": "We can confirm that your request for a quote has been received and we'll be in touch once our team has reviewed it.", } }, ``` ## More ways to change the cart ### Collect a tax ID Some countries require a customer's tax ID (or equivalent) at checkout, so orders comply with local tax law and avoid customs delays or fines. See [Collect a tax ID for international shipping](https://docs.sparklayer.io/help/ordering/tax-and-shipping.md#collect-a-tax-id-for-international-shipping). ### Add your own content with slots Custom slots (also called targets) add your own HTML in set places in My Cart, such as above the cart lines (**My Cart** slot) or under the thank-you message on **Complete** (**Order complete** slot). Add them at **Storefront > Options > Custom slots** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options > Custom slots** in the Shopify app. See [Custom slots](https://docs.sparklayer.io/help/storefront/interfaces/custom-slots.md). ### Hide the RRP in the cart If you show an [RRP (MSRP)](https://docs.sparklayer.io/help/pricing/pricing-display.md), the cart shows it under each line's price, such as "RRP: US$5.99". To hide it, add this to your [CSS overrides](https://docs.sparklayer.io/help/storefront/customising-design.md) (a theme code change): ```css --spark-cart-rrp-display: none; ``` ### Change how product images fit in the cart Product images that aren't square may be cropped in the cart. Add one of these to your [CSS overrides](https://docs.sparklayer.io/help/storefront/customising-design.md) (a theme code change): ```css --spark-cart-background-size: cover /* Set image to fill the space*/ --spark-cart-background-size: contain /* Set image to be fully visible*/ ``` ## Related features | Feature | Where to read about it | | --- | --- | | Searching for products and adding them by SKU in the cart | [My Cart](https://docs.sparklayer.io/help/storefront/interfaces/my-cart.md) | | Which payment methods customers see, and their names and order | [Payment methods](https://docs.sparklayer.io/help/ordering/payment-methods.md) | | Custom fields, standard fields and file uploads at checkout | [Checkout fields](https://docs.sparklayer.io/help/ordering/checkout-fields.md) | | Shipping methods and rates | [Shipping rules](https://docs.sparklayer.io/help/ordering/shipping-rules.md) | ## FAQs **Where have custom checkout fields and file uploads gone?** They have their own page: [Checkout fields](https://docs.sparklayer.io/help/ordering/checkout-fields.md). For file uploads, see [Let customers upload files at checkout](https://docs.sparklayer.io/help/ordering/checkout-fields.md#file-upload-file-attachments). **Can I show a different payment or checkout message to different customers?** No. Both show to all customers, though payment messages change with the payment method the customer selects. **Can I change the checkout text without editing code?** Yes, at **Storefront > Options > Translation overrides** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options > Translation overrides** in the Shopify app. See [Change checkout text](#change-checkout-text).