Cart & Checkout
Custom checkout fields allow you to capture additional information from customers during the checkout process. It's a great way to allow customers to add data such as preferred shipping date, Purchase Order numbers, and more!
Once enabled, the custom checkout fields will display on the 'Shipping' step of the My Cart Interface๏ปฟ before the customer selects their shipping address.
When a customer completes a custom checkout field, these will be attached to their order data as special 'Notes'.
In the context of Shopify, these will display as "Additional details" within "Order Notes". From a data perspective, these are referred to as "custom attributes" which can then be retrieved and used to display on packing slips, email notifications๏ปฟ, and even sent through to a backend system (via the API) and more.
If you're using automation apps such as Shopify Flow, you can also set up triggers based on specific custom fields that the B2B customer has filled in. To see some examples, you can review our ready-made Shopify Flow templates๏ปฟ.
Some third-party Shopify apps may also support displaying "Additional details" on the invoices they generate and we recommend speaking directly with the specific app to learn more.
From a B2B customer's perspective, any checkout custom fields you set up will also show against their orders when viewing order history within My Account Interface๏ปฟ๏ปฟ
Custom checkout fields work by adding special code to your website within the SparkLayer Core Script.
In our example, we've included how this would work with an example 'shipping date'. This can also be adapted with a wide range of other field types such as radios, date pickers, text fields (see below for the full list).
Custom element configuration options
Key | Details |
|---|---|
name | The name of the custom field. This is shown in your eCommerce platform but is not visible to customers. (required) |
translations | An object containing customer-facing strings. Keys must be 2 letter language codes (ISO 639-1). (required) |
attributes | HTML attributes applied to the element. Use these to specify the type of input and validation rules. |
title | It's also possible to customise the text that is shown to the customer using translations. Text shown in bold above the input (required) |
detail | Small 'helper' text shown beneath the input. Useful for explaining what the field is for and acceptable values. |
Supported element attributes Some attributes only apply to certain input types and you can find more detailed documentation can be found here.
To get started, we've included some of our most popular customer checkout field types.
Custom checkout fields currently support the following field types:
Field Type | Notes |
|---|---|
text | Freeform text entry |
select | Drop down menu |
number | Number entry |
date | Date, DD/MM/YYYY |
time | Specific time, 00:00 |
week | Week (4) |
month | Month of year (12) |
datetime-local | DD/MM/YYY 00:00 |
checkbox | Allows multiple selections |
tel | Number entry for phone |
Email entry | |
url | Website URL entry |
file | File attachment |
Please note The file upload feature is only available on the SparkLayer Growth, Pro, and Enterprise plan. You can change your plan here or learn more about our how pricing works.
SparkLayer supports the ability for B2B customers to upload files during the checkout process. This is a great way to capture additional details from the customer such as a "Purchase Order", details specific to the order, or any other file that is relevant to their account.
SparkLayer also supports customers to upload details per line item (such as logos or name customisations) and you can learn more below.
The file upload at checkout flow works as follows:
The B2B customer will see a special field during the checkout process where they can upload relevant files.
When the order is completed, any files uploaded to an order will then display in their My Account Interface๏ปฟ area against the order they have just placed. The customer can then easily download any files associated against the order.
Enabling file uploads
The file upload feature works by adding special code to the SparkLayer Core Script๏ปฟ that lets you customise how you accept files from your customers. To get started, you can use our sample code below.
To customise how you accept files from your B2B customers, you can adjust the special settings:
Setting | Description |
|---|---|
required | Setting as true will force the customer to have to upload a file |
minlength | This sets the minimum number of files the customer must upload (e.g. entering 1 would force them to upload 1 file) |
maxlength | This sets the maximum number of files the customer must upload (e.g. entering 4 would prevent them from uploading more than 4 files) |
maxsize | By default, SparkLayer sets a maximum file size of 20MB and this limit cannot be increased. If you'd prefer to limit file size, you can adjust this. For example entering 10MB would set a maximum file size limit of 10MB |
fileextensions | If you'd prefer to limit the file types your customers can upload, you can specify file extensions. By default, SparkLayer will support all the following file extensions. ['txt', 'csv', 'pdf', 'json', 'png', 'jpeg', 'gif', 'webp', 'svg', 'psd', 'xls', 'xlsx', 'ods', 'fods', 'ppt', 'pptx', 'odp', 'fodp', 'doc', 'docx', 'odt', 'fodt'] |
translations | You can edit the default text that shows for customers by editing the default language string (see example above). |
Retrieving file uploads
Due to how files are stored within SparkLayer, there are some very specific methods in which to download any files that have been uploaded. When a B2B customer uploads a file against an order, there are 3 ways to retrieve the files that have been uploaded.
Method | Details |
|---|---|
Customer | The customer themselves can login to their account and download the attachments from their order |
Sales Agent | As a user with access to the Sales Agent Ordering๏ปฟ tool, they can login on behalf of the customer, navigate to their account and download any attachments. |
API | Via the SparkLayer Files API, file uploads will be associated with order data and this can then be routed into a back-office (e.g. an ERP). For more details on how this works, please speak to our support team๏ปฟ. |
How file upload are referenced
When a customer uploads a file and the order arrives into Shopify, files will be referenced within the file-upload section on the top right of an order detail. If you'd prefer to use a different naming convention to file-upload, you can modify this within the checkout code sample above name: "file-upload"
Please note This will include a 'raw link' to the file and it's important to note that this cannot be accessed via Shopify. Please refer to our steps above on the methods to retrieve files that have been uploaded.
Please note This is an advanced configuration of SparkLayer and will require a developer to implement on a store that requires this feature. Please refer to our JavaScript SDK๏ปฟ for full details.
The file upload per "line item" feature allows for item-level customisation control, enabling B2B customers to clearly outline their order requirements and streamline the order process.
Once enabled, the B2B customer will see a special field on the product page where they can upload relevant files. The design and layout of this field can be configured as detailed in JavaScript SDK๏ปฟ๏ปฟ
In some instances, there may be a need for more than one file upload section. When the files are uploaded to the product page, they will appear above the "Choose file" button.
The files uploaded by the customer will then show in the cart as separate line items.
After "line item" file uploads have been added there is still the option to enable the "checkout-level" file upload feature too (see "File upload at checkout" above). Whilst the line item file upload option may be ample customisation for some customers, enabling checkout-level file uploads will allow for any order-level attachments to be added such as a "Purchase Order".
When the order is completed, all files uploaded to an order (at line item and checkout level) will then display in their My Account Interface๏ปฟ area against the order they have just placed. The customer can then easily download any files associated against the order.
Enabling file uploads for line items To implement this line item file upload feature, please refer to our technical guide here.๏ปฟ๏ปฟ
The Additional Information field is useful if you want to capture additional details from a customer whilst their placing an order.
Typical use-cases include capturing a Purchase Order number (sometimes referred to as PO number), delivery instructions, or instructions.
When completed by a customer, the data will then show within the Shopify order under the Notes section (this can also be sent to a backend system using the SparkLayer API๏ปฟ).
Please note The additional information is a separate field to the 'custom checkout fields' detailed above. The Additional Information field is also limited to 512 characters in total
Make "Additional information" mandatory
You can force customers to complete the 'Additional information' field before proceeding to place their order.
Limiting characters of the "Additional information" field
It's possible to set a character limit for the additional information field should you have requirements to restrict what can be added.
Hiding the "Additional information" field
Alternatively, if you'd prefer to hide the additional information field from showing, you can update this via the SparkLayer Core Script.
On the final step of the My Cart Interface๏ปฟ, Review & Pay, it's possible to display a "custom payment messages" that let you add additional details about a payment method. For example, if a customer is paying by "Pay by Invoice", you could add some additional text to inform them on how this process works.
The "custom payment message" works by adding a special code snippet to the SparkLayer Core Script๏ปฟ that lets you define the text you want to show.
Please note It's important to note that this text will show to all customers during the checkout process and it's not possible to vary it based on who the customer is.
On the final step of the My Cart Interface๏ปฟ, Review & Pay, it's possible to display a "custom checkout message" that lets you inform customers of any special notes or information they need to be aware of. It's a great way to highlight information about shipping, payment, or anything else!
The "custom checkout message" works by adding a special code snippet to the SparkLayer Core Script๏ปฟ that lets you define the text you want to show.
Please note It's important to note that this text will show to all customers during the checkout process and it's not possible to vary it based on who the customer is.
If you'd like to customise how the message looks, you can do this by adding special CSS๏ปฟ to your website. Simply add the below CSS to your website's CSS file and you can then set styling such as colours and spacing.
SparkLayer has a built-in tool allowing customers to quickly add items to an order, directly from the My Cart Interface๏ปฟ. You can learn more in our guide here๏ปฟ.
When customers checkout via the SparkLayer My Cart Interface๏ปฟ, they'll be asked to confirm the store's terms and conditions before completing their order.
By default, the terms and conditions link will point to a URL of policies/terms-of-service but it's possible to change this via the SparkLayer Core Script.
If your store is set up with multiple languages, you can also configure the code to show a different link based on the customer's location
Please refer to the Payment Methods๏ปฟ guide for more information.
Tax & shipping To learn more about how SparkLayer handles tax and shipping, see our guide here๏ปฟ.
When a customer proceeds through the checkout, they'll be notified about tax and shipping with messaging beneath the main call to action.
If you'd like to modify what is shown here, you can do so by updating the default language within your store.
You can modify the confirmation screen that shows to the customer by adding the below to the language overwrites within the SparkLayer Core Script.
It's possible to set minimum and maximum order values that a customer has to meet before being able to place an order. Please refer to our full guide here๏ปฟ.
Custom Slots (or "Targets") allow you to enhance the SparkLayer My Cart Interface๏ปฟ by adding your own custom code in predefined areas.
You can learn more in our custom slots guide here๏ปฟ.
If you have RRP pricing (MSRP)๏ปฟ set up, by default the My Cart Interface๏ปฟ will display this below the main selling price.
If you'd prefer to hide this, you can add the below CSS to your CSS overwrites๏ปฟ.
It's possible to change how the product image is rendered in the My Cart Interface๏ปฟ by using special CSS overwrites. This is especially useful if your product images aren't square in ratio and you want to prevent the image being cropped.
Simply add one of the below options to your CSS overwrites๏ปฟ.
๏ปฟ