Cart and checkout

How it works

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:

The checkout, step by step

Cart

The customer checks their lines, quantities, Discounts & codes and Sub-total, then clicks Checkout.

Details

The customer confirms the delivery address, fills in your checkout fields, such as a PO number, and clicks Continue. You choose which fields appear, their names and their order.

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.

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.

The order goes to your eCommerce platform like any other, as a draft or completed order depending on the payment method. See Payment methods.

Submit a quote instead

If the customer's group can request quotes with the Quoting Engine, 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.

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.

Order totals exclude tax, unless you 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.

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 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.

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 (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Storefront › Options to do this now, whichever platform you're on. Opens in a new tab. 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 and Languages and international.

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). The message shows to all customers; you can't vary it by customer.

translations: {
  en: {
    "cart.checkout.review-step.custom-message": "Add your custom checkout message here",
  }
},  

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    translations: {
      en: {
        "cart.checkout.review-step.custom-message": "Add your custom checkout message here",
      }
    },  
  };
</script>

Style the checkout message

The message's colours, spacing, alignment and border are CSS variables in your website's CSS. See Customising design.

<style>
:root {
  --spark-message-checkout-review-message-color: #555;
  --spark-message-checkout-review-message-background: #fff;
  --spark-message-checkout-review-message-padding: 0.5em 0.75em;
  --spark-message-checkout-review-message-alignment: left;
  --spark-message-checkout-review-message-border: 1px solid #CCCCCC;
}
</style>

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):

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.

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",
  }
},  

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    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",
      }
    },  
  };
</script>

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. For other platforms, see the developer docs.

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 (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Storefront › Options › Checkout to do this now, whichever platform you're on. Opens in a new tab.: see 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):

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 */

  }
},  

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    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 */

      }
    },  
  };
</script>

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".

display: {
  customerReferenceRequired: true,
},

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    display: {
      customerReferenceRequired: true,
    },
  };
</script>

Limit the number of characters

Your developer can set a limit lower than 512:

display: {
  customerReferenceMaxLength: 512, /* update 512 as required */
},

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    display: {
      customerReferenceMaxLength: 512, /* update 512 as required */
    },
  };
</script>

Hide the field

Your developer adds this to the Core Script:

display: {
  customerReferenceHidden: true,
},

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    display: {
      customerReferenceHidden: true,
    },
  };
</script>

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.

termsAndConditionsLink: "/policies/terms-of-service",

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    termsAndConditionsLink: "/policies/terms-of-service",
  };
</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 %}

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    {% 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 %}
  };
</script>

{%- if shop.locale == "fr" -%}
  termsAndConditionsLink: '/policies/fr-terms-and-conditions',
{%- else -%}
  termsAndConditionsLink: '/policies/terms-and-conditions',
{%- endif -%}

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    {%- if shop.locale == "fr" -%}
      termsAndConditionsLink: '/policies/fr-terms-and-conditions',
    {%- else -%}
      termsAndConditionsLink: '/policies/terms-and-conditions',
    {%- endif -%}
  };
</script>

translations: {
  en: {
    "cart.checkout.terms.start": "I agree to the ",
    "cart.checkout.terms.link": "terms and conditions",
    "cart.checkout.terms.end": " ",
  }
}, 

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    translations: {
      en: {
        "cart.checkout.terms.start": "I agree to the ",
        "cart.checkout.terms.link": "terms and conditions",
        "cart.checkout.terms.end": " ",
      }
    }, 
  };
</script>

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):

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",
  }
}, 

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    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",
      }
    }, 
  };
</script>

For how tax and shipping are calculated, see Tax and shipping.

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). {email} is replaced with the customer's email address.

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.",
  }
},

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    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.",
      }
    },
  };
</script>

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.

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 (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Storefront › Options › Custom slots to do this now, whichever platform you're on. Opens in a new tab.. See Custom slots.

Hide the RRP in the cart

If you show an RRP (MSRP), the cart shows it under each line's price, such as "RRP: US$5.99". To hide it, add this to your CSS overrides (a theme code change):

--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 (a theme code change):

--spark-cart-background-size: cover /* Set image to fill the space*/
--spark-cart-background-size: contain /* Set image to be fully visible*/

Related features

FAQs