Checkout fields

Checkout fields collect extra details on the Details step of the My Cart, such as a PO number, delivery date or delivery instructions.
Standard fields (Customer Reference, PO Number, Requested Shipping Date) save to set, searchable places on the order. Custom fields are your own and save as order notes.
Add both without code with Add field at Storefront,Options,Checkout (opens in your SparkLayer Dashboard in a new tab). Standard fields need Core Script 4.7.0 or later; custom fields work on any version. File uploads, validation rules and other options need a developer.
File uploads need the Growth plan or above. On Wix, a developer adds custom fields in code, with checkoutCustomElements.

How it works

What happens to checkout field data

Customer fills in the field

On the Details step of the checkout

Saved with the order

Standard fields go to set places; custom fields are saved as order notes

Shown to you and the customer

In your platform's order admin and the customer's My Account

Used elsewhere

On invoices and packing slips, in automations, or sent to your ERP through the API

Kind	How it's identified	Where the data goes	Use it for
Standard field	A fixed `id` that SparkLayer recognises	A structured place on the order, such as Shopify's own PO number field. You can search and filter by it, and use it in your theme and template editor.	Customer references, purchase order (PO) numbers and requested shipping dates
Custom field	A `name` you choose	The order's notes (on Shopify, Additional details)	Anything else, such as delivery instructions, a tax ID or a confirmation tick box

Checkout fields are separate from Additional Information, the single free-text box at checkout. See Cart and checkout.

What you can do without code

Task	Where	Who does it
Add the standard fields	Add field at Storefront,Options,Checkout (opens in your SparkLayer Dashboard in a new tab) (Core Script 4.7.0 or later)	You
Add your own custom field	Add field at Storefront,Options,Checkout (opens in your SparkLayer Dashboard in a new tab)	You
Add a file upload field, a validation rule (such as no weekend delivery dates) or any other option	Your Core Script, the SparkLayer code in your theme, with `checkoutCustomElements`	Your developer or agency

Turn on standard checkout fields

Standard fields need Core Script 4.7.0 or later: check Version for this store at Storefront,Widgets,Core script version (opens in your SparkLayer Dashboard in a new tab).

Go to Storefront,Options (opens in your SparkLayer Dashboard in a new tab) and open Checkout.
Next to Checkout fields, click Add field and choose a standard field. Set whether it's shown, optional or hidden.
Repeat for each standard field you want.
Click Save and publish. See Storefront options.

Core Script code for your developer

For more control, a developer can add standard fields to the Core Script by id. The id must match exactly, or SparkLayer won't recognise the field.

Field	Field ID
Customer Reference	`customer-reference`
PO Number	`po-number`
Requested Shipping Date	`shipping-requested-date`

Core Script

checkoutCustomElements: [
  { id: "customer-reference" },
  { id: "shipping-requested-date" },
  { id: "po-number" },
],

Core Script

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    checkoutCustomElements: [
      { id: "customer-reference" },
      { id: "shipping-requested-date" },
      { id: "po-number" },
    ],
  };
</script>

Standard fields take the same attributes and onChange keys as custom fields (see Custom field settings). For example, to make the customer reference required:

Core Script

checkoutCustomElements: [
  {
    id: "customer-reference",
    attributes: {
      required: true,
    },
  },
],

Core Script

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    checkoutCustomElements: [
      {
        id: "customer-reference",
        attributes: {
          required: true,
        },
      },
    ],
  };
</script>

Where standard fields appear in your orders

Shopify only

On Shopify, standard fields are saved here:

Field	Where it's saved
PO Number	Shopify's own PO number field on the order, shown as a PO number column in your orders and draft orders lists.
Requested Shipping Date	A dedicated custom field on the order, shown as `sparkShippingRequestedDate`.
Customer Reference	The Shopify order notes field.

Your theme and template editor can use these fields, so you can show them on documents such as invoices. Customers see them on the order's Summary in My Account.

In the order and activity views, you can:

Search by Customer Reference
Search by PO Number
Filter by Requested Shipping Date, using a date range

Add a custom checkout field

A custom field is one you design, such as a delivery instructions box, a tax ID or a confirmation tick box. To add one without code:

Go to Storefront,Options (opens in your SparkLayer Dashboard in a new tab) and open Checkout.
Next to Checkout fields, click Add field and fill in the field's details.
Click Save and publish.
Check the Details step of the checkout on your store.

Shopify only

On Shopify, you can show a field only to customers with a particular tag: see B2B-only content.

For validation rules, grouped drop-down menus and every other option, your developer can add the field in the Core Script.

Where custom field data is saved

Custom field answers are saved to the order as notes.

Where	What you see
Shopify order	The Notes card, under Additional details, beside SparkLayer's own details such as `sparkCartId` and `sparkPaymentType`. Shopify calls these custom attributes.
Customer's My Account	The order's Additional Information, for example "Preferred Shipping Date: 2024-12-02".

Shopify only

On Shopify, custom attributes can also:

Show on packing slips and email notifications
Go to a backend system through the API
Trigger Shopify Flow (opens in a new tab) workflows (see our ready-made Shopify Flow templates)

Some third-party invoicing apps can show Additional details too; check with the app's developer. To show answers on SparkLayer invoices, see Content Zones.

Let customers upload files at checkout

A file upload field lets B2B customers attach files to the order at checkout, such as a purchase order or order-specific details. It needs the Growth, Pro or Enterprise plan: to change plan, go to Plan card or see SparkLayer plans and pricing (opens in a new tab).

Your developer adds the field in the Core Script:

Add the sample below to your Core Script, inside checkoutCustomElements.
Change the settings in attributes to suit.
Edit translations to change the text customers see.

Core Script code and settings for your developer

Core Script

checkoutCustomElements: [
	{
		translations: {
			en: {
				title: "File Upload",
				detail: "Files must not be larger than 10MB. You can upload between 1 and 4 files"
			},
		},
		name: "file-upload",
		attributes: {
			type: "file",
			required: false,   // Optional. Default: false
			minlength: 1,     // Optional. Default: 1
			maxlength: 4,     // Optional. Default: 20
			maxsize: '10MB',  // Optional. Default: 20MB, Must be a number followed by `B`, `KB` or `MB`
			fileextensions: [ // Optional. Default: ['txt', 'csv', 'pdf', 'json', 'png', 'jpeg', 'gif', 'webp', 'svg', 'psd', 'xls', 'xlsx', 'ods', 'fods', 'ppt', 'pptx', 'odp', 'fodp', 'doc', 'docx', 'odt', 'fodt']
			  'png',
			  'txt',
			  'pdf',
			  'xls'
			]
		}
	}
],

Core Script

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    checkoutCustomElements: [
    	{
    		translations: {
    			en: {
    				title: "File Upload",
    				detail: "Files must not be larger than 10MB. You can upload between 1 and 4 files"
    			},
    		},
    		name: "file-upload",
    		attributes: {
    			type: "file",
    			required: false,   // Optional. Default: false
    			minlength: 1,     // Optional. Default: 1
    			maxlength: 4,     // Optional. Default: 20
    			maxsize: '10MB',  // Optional. Default: 20MB, Must be a number followed by `B`, `KB` or `MB`
    			fileextensions: [ // Optional. Default: ['txt', 'csv', 'pdf', 'json', 'png', 'jpeg', 'gif', 'webp', 'svg', 'psd', 'xls', 'xlsx', 'ods', 'fods', 'ppt', 'pptx', 'odp', 'fodp', 'doc', 'docx', 'odt', 'fodt']
    			  'png',
    			  'txt',
    			  'pdf',
    			  'xls'
    			]
    		}
    	}
    ],
  };
</script>

Setting	What it does
`required`	Set to `true` to make the customer upload a file. Default: `false`.
`minlength`	The minimum number of files the customer must upload. For example, `1` means at least 1 file. Default: `1`.
`maxlength`	The maximum number of files the customer can upload. For example, `4` stops them uploading more than 4. Default: `20`.
`maxsize`	The largest file size allowed, as a number followed by `B`, `KB` or `MB` (for example, `10MB`). The default and maximum is 20MB; you can set a lower limit but not a higher one.
`fileextensions`	The file types customers can upload. By default, all of these are allowed: `['txt', 'csv', 'pdf', 'json', 'png', 'jpeg', 'gif', 'webp', 'svg', 'psd', 'xls', 'xlsx', 'ods', 'fods', 'ppt', 'pptx', 'odp', 'fodp', 'doc', 'docx', 'odt', 'fodt']`
`translations`	The text customers see: the field `title` and the `detail` helper text.

Customers then see a File Upload field on the Details step, and their files appear on the order in My Account, under Attachments.

What customers see

The field has a Choose file button and helper text, such as the size limit and number of files allowed. Chosen files are listed above the button, and customers can remove one before continuing.

Under Attachments, each file shows its File name and Assignment (Order-level for checkout uploads), with an Actions menu to download it.

Download uploaded files

There are 3 ways to get a file a customer uploaded:

Who	How
The customer	Signs in and downloads the attachment from the order.
A sales agent	Signs in on the customer's behalf with sales agent ordering, opens the order and downloads the attachment.
The API	The SparkLayer Files API links uploads to the order data, so they can go to a back-office system such as an ERP. For help, contact our support team.

Shopify only

On Shopify, the order lists uploads in Additional details under file-upload (or your field's name). These are file references (gid://sparklayer/File/...) that can't be opened from Shopify.

For other platforms, see the developer docs.

Let customers upload files on the product page

Line-item uploads let customers attach a file to a specific product, such as a logo or name customisation. This advanced setup needs a developer: see Let customers upload a file in the JavaScript SDK docs.

How product-level file uploads work once set up

Product page

One or more upload fields, each with its own label (such as Front Design) and a Choose file button

Cart

Each file is shown under the product line, for example Front Design: "logo.png"

My Account

The files appear on the order under Attachments, assigned to the product's SKU

You can combine product-level and checkout-level uploads, such as a logo per product plus a purchase order for the whole order. All files appear on the order in My Account.

Move to the standard fields

If your developer set up a customer reference or shipping date in the Core Script the older way, switch to the standard fields to get structured storage, search and filtering.

If your Core Script has	Replace it with
The Additional Information field with `customerReferenceHidden` and `customerReferenceRequired`	The standard field `{ id: "customer-reference" }`
A shipping date custom field with a `name`, such as `my-shipping-requested-date`	The standard field `{ id: "shipping-requested-date" }`

Before and after code for your developer

Customer reference. If you used the Additional Information field with the customerReferenceHidden and customerReferenceRequired display settings, like this:

Core Script

display: {
  customerReferenceHidden: false,
  customerReferenceRequired: true,
},

Core Script

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

replace it with the standard field:

Core Script

checkoutCustomElements: [
  {
    id: "customer-reference",
    attributes: {
      required: true,
    },
  },
],

Core Script

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    checkoutCustomElements: [
      {
        id: "customer-reference",
        attributes: {
          required: true,
        },
      },
    ],
  };
</script>

Requested shipping date. If you added a shipping date as a custom field with a name, like this:

Core Script

checkoutCustomElements: [
  { name: "my-shipping-requested-date" },
],

Core Script

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    checkoutCustomElements: [
      { name: "my-shipping-requested-date" },
    ],
  };
</script>

switch it to the standard id:

Core Script

checkoutCustomElements: [
  { id: "shipping-requested-date" },
],

Core Script

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    checkoutCustomElements: [
      { id: "shipping-requested-date" },
    ],
  };
</script>

The id must be shipping-requested-date. A custom field's name can be anything you choose; using the standard id is what turns on the structured storage, search and filtering.

Add a custom field in the Core Script (for developers)

The Core Script gives every option for a custom field, such as validation rules and grouped drop-down menus. It's a theme code change, so pass this section to your developer or agency if you don't edit your theme.

Add a checkoutCustomElements array to your Core Script (or add to it if it's already there).
Add one object per field, with a name, translations (the text customers see) and attributes (the field type and validation). See Custom field settings.
Save your theme and check the Details step of the checkout.

This example adds a required delivery date field:

Core Script

checkoutCustomElements: [
  {
    name: "delivery-date",
    translations: {
      en: {
        title: "Delivery Date",
        detail:  "Delivery unavailable on weekends."
      }
    },
    attributes: {
      required: true,
      type: "date"
    }
  },
],

Core Script

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    checkoutCustomElements: [
      {
        name: "delivery-date",
        translations: {
          en: {
            title: "Delivery Date",
            detail:  "Delivery unavailable on weekends."
          }
        },
        attributes: {
          required: true,
          type: "date"
        }
      },
    ],
  };
</script>

One array can hold several fields. This example shows most of the supported field types:

Core Script

checkoutCustomElements: [
{
  translations: {
      en: {
          title: "Text field",
          detail: "Explains what the field is for. Must be 2 letters followed by 2-4 digits"
      }
  },
  name: "text-field",
  attributes: {
      required: true,
      type: "text",
      placeholder: "Placeholder shows inside the empty input",
      minlength: 4,
      maxlength: 6,
      pattern: "[a-zA-Z]{2}[0-9]{2,4}"
  }
},
{
  translations: {
      en: {
          title: "Number field",
      }
  },
  name: "number-field",
  attributes: {
      type: "number",
      step: 5,
      min: 15,
      max: 25,
  }
},
{
  translations: {
      en: {
          title: "Date field",
      }
  },
  name: "date-field",
  attributes: {
      type: "date"
  }
},
{
  translations: {
      en: {
          title: "Time field",
      }
  },
  name: "time-field",
  attributes: {
      type: "time"
  }
},
{
  translations: {
      en: {
          title: "Week field",
      }
  },
  name: "week-field",
  attributes: {
      type: "week"
  }
},
{
  translations: {
      en: {
          title: "Datetime field",
      }
  },
  name: "datetime-field",
  attributes: {
      type: "datetime-local"
  }
},
{
  translations: {
      en: {
          title: "Checkbox field",
      }
  },
  name: "checkbox-field",
  attributes: {
      type: "checkbox"
  }
},
{
  translations: {
      en: {
          title: "Month field",
      }
  },
  name: "month-field",
  attributes: {
      type: "month"
  }
},
{
  translations: {
      en: {
          title: "Telephone field",
      }
  },
  name: "telephone-field",
  attributes: {
      type: "tel"
  }
},
{
  translations: {
      en: {
          title: "Email field",
      }
  },
  name: "email-field",
  attributes: {
      type: "email"
  }
},
{
  translations: {
      en: {
          title: "URL field",
      }
  },
  name: "url-field",
  attributes: {
      type: "url"
  }
},
],

Core Script

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    checkoutCustomElements: [
    {
      translations: {
          en: {
              title: "Text field",
              detail: "Explains what the field is for. Must be 2 letters followed by 2-4 digits"
          }
      },
      name: "text-field",
      attributes: {
          required: true,
          type: "text",
          placeholder: "Placeholder shows inside the empty input",
          minlength: 4,
          maxlength: 6,
          pattern: "[a-zA-Z]{2}[0-9]{2,4}"
      }
    },
    {
      translations: {
          en: {
              title: "Number field",
          }
      },
      name: "number-field",
      attributes: {
          type: "number",
          step: 5,
          min: 15,
          max: 25,
      }
    },
    {
      translations: {
          en: {
              title: "Date field",
          }
      },
      name: "date-field",
      attributes: {
          type: "date"
      }
    },
    {
      translations: {
          en: {
              title: "Time field",
          }
      },
      name: "time-field",
      attributes: {
          type: "time"
      }
    },
    {
      translations: {
          en: {
              title: "Week field",
          }
      },
      name: "week-field",
      attributes: {
          type: "week"
      }
    },
    {
      translations: {
          en: {
              title: "Datetime field",
          }
      },
      name: "datetime-field",
      attributes: {
          type: "datetime-local"
      }
    },
    {
      translations: {
          en: {
              title: "Checkbox field",
          }
      },
      name: "checkbox-field",
      attributes: {
          type: "checkbox"
      }
    },
    {
      translations: {
          en: {
              title: "Month field",
          }
      },
      name: "month-field",
      attributes: {
          type: "month"
      }
    },
    {
      translations: {
          en: {
              title: "Telephone field",
          }
      },
      name: "telephone-field",
      attributes: {
          type: "tel"
      }
    },
    {
      translations: {
          en: {
              title: "Email field",
          }
      },
      name: "email-field",
      attributes: {
          type: "email"
      }
    },
    {
      translations: {
          en: {
              title: "URL field",
          }
      },
      name: "url-field",
      attributes: {
          type: "url"
      }
    },
    ],
  };
</script>

Example fields

Copy one of these into your Core Script, or send it to your developer, and adjust it to suit.

Core Script

checkoutCustomElements: [
  {
    name: "shipping-date",
    translations: {
      en: {
        title: "Shipping Date",
        detail:  "Please select your preferred shipping date"
      }
    },
    attributes: {
      required: true,
      type: "date"
    }
  },
],

Core Script

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    checkoutCustomElements: [
      {
        name: "shipping-date",
        translations: {
          en: {
            title: "Shipping Date",
            detail:  "Please select your preferred shipping date"
          }
        },
        attributes: {
          required: true,
          type: "date"
        }
      },
    ],
  };
</script>

Core Script

checkoutCustomElements: [
  {
      translations: {
          en: {
              title: "Tax ID Reference",
              detail: "Please enter your Tax ID reference"
          }
      },
      name: "tax-id",
      attributes: {
          required: false,
          type: "text",
          placeholder: "Enter Tax ID reference",
          minlength: 4,
          maxlength: 600
      }
  },
],

Core Script

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    checkoutCustomElements: [
      {
          translations: {
              en: {
                  title: "Tax ID Reference",
                  detail: "Please enter your Tax ID reference"
              }
          },
          name: "tax-id",
          attributes: {
              required: false,
              type: "text",
              placeholder: "Enter Tax ID reference",
              minlength: 4,
              maxlength: 600
          }
      },
    ],
  };
</script>

Options can be grouped under headings (groupName), as in this example with "Group A" and "Group B".

Core Script

checkoutCustomElements: [
 {
    translations: {
      en: {
        title: "Option Title",
        detail: "Select Option Detail"
      }
    },
    name: "select-option-test",
    attributes: {
      required: true,
      type: "select",
    },
    options: [
      {
        translations: {
          en: {groupName: "Group A"},
        },
        items: [
          {value: "Option 1", 
            translations: {
              en: {
                label: "Option 1"
              }
          }
          },
          {value: "Option 2", 
            translations: {
              en: { label: "Option 2" }
            }
          }
        ],
      },
      {
          translations: {
          en: { groupName: "Group B" }
        },
        items: [
          {value: "Option 3", 
            translations: {
              en: { label: "Option 3" }
            }
          },
          {value: "Option 4", 
            translations: {
              en: { label: "Option 4" }
            }
          }
        ],
      }
    ]
  }
],

Core Script

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    checkoutCustomElements: [
     {
        translations: {
          en: {
            title: "Option Title",
            detail: "Select Option Detail"
          }
        },
        name: "select-option-test",
        attributes: {
          required: true,
          type: "select",
        },
        options: [
          {
            translations: {
              en: {groupName: "Group A"},
            },
            items: [
              {value: "Option 1", 
                translations: {
                  en: {
                    label: "Option 1"
                  }
              }
              },
              {value: "Option 2", 
                translations: {
                  en: { label: "Option 2" }
                }
              }
            ],
          },
          {
              translations: {
              en: { groupName: "Group B" }
            },
            items: [
              {value: "Option 3", 
                translations: {
                  en: { label: "Option 3" }
                }
              },
              {value: "Option 4", 
                translations: {
                  en: { label: "Option 4" }
                }
              }
            ],
          }
        ]
      }
    ],
  };
</script>

Core Script

checkoutCustomElements: [
  {
      translations: {
          en: {
              title: "Shipping instructions field",
              detail: "Please confirm any shipping instructions for us"
          }
      },
      name: "shipping-instructions",
      attributes: {
          required: true,
          type: "text",
          placeholder: "Shipping instructions field",
          minlength: 4,
          maxlength: 600
      }
  },
],

Core Script

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    checkoutCustomElements: [
      {
          translations: {
              en: {
                  title: "Shipping instructions field",
                  detail: "Please confirm any shipping instructions for us"
              }
          },
          name: "shipping-instructions",
          attributes: {
              required: true,
              type: "text",
              placeholder: "Shipping instructions field",
              minlength: 4,
              maxlength: 600
          }
      },
    ],
  };
</script>

Core Script

checkoutCustomElements: [
  {
      translations: {
          en: {
              title: "Contact phone number",
              detail:  "Please supply a phone number to allow us to contact you"
          }
      },
      name: "number-field",
      attributes: {
          type: "number",
          min: 10,
          max: 25,
      }
  },
],

Core Script

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    checkoutCustomElements: [
      {
          translations: {
              en: {
                  title: "Contact phone number",
                  detail:  "Please supply a phone number to allow us to contact you"
              }
          },
          name: "number-field",
          attributes: {
              type: "number",
              min: 10,
              max: 25,
          }
      },
    ],
  };
</script>

Core Script

checkoutCustomElements: [
  {
    name: "delivery-date",
    translations: {
      en: {
        title: "Delivery Date",
        detail:  "Delivery date must be at least one day in future."
      }
    },
    attributes: {
      required: true,
      type: "date",
      min: ((d) => { 
        d.setDate(d.getDate() + 1); 
        return d.toISOString().slice(0,10); 
      })(new Date())
    }
  },
],

Core Script

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    checkoutCustomElements: [
      {
        name: "delivery-date",
        translations: {
          en: {
            title: "Delivery Date",
            detail:  "Delivery date must be at least one day in future."
          }
        },
        attributes: {
          required: true,
          type: "date",
          min: ((d) => { 
            d.setDate(d.getDate() + 1); 
            return d.toISOString().slice(0,10); 
          })(new Date())
        }
      },
    ],
  };
</script>

This uses onChange to block past dates (and today after 12:00 UK time), weekends and the listed UK bank holidays, with a different message for each. Update the bank holiday list for the current year.

Core Script

checkoutCustomElements: [
  {
  translations: {
    en: {
      title: "Delivery Date",
      detail: "Delivery unavailable on weekends.",
      'select-mon-fri': "Date must be Monday-Friday",
      'select-date-in-future': "Select a date in the future",
      'select-non-bank-holiday': "Select another date which is not a UK bank holiday",
    },
  },
  name: "delivery-date-requested",
  attributes: {
    required: true,
    type: "date"
  },
  onChange(val, el) {
    const [year, month, date] = val.split('-');
    const selectedDate = new Date(
      Number(year),
      Number(month)-1,
      Number(date), 
      0,
      0,
      0,
      0
    );
    const now = new Date()
    const ukTime = now.toLocaleString(
      'en-GB',
      {
        hour: '2-digit',
        hour12: false,
        timeZone: 'Europe/London'
      }
    );

    const earliestDeliveryDate = new Date(
      now.getFullYear(),
      now.getMonth(),
      now.getDate() + (Number(ukTime) >= 12 ? 1 : 0)
    )

    const ukBankHolidays = [
      '07/04/2023',
      '10/04/2023',
      '01/05/2023',
      '08/05/2023',
      '29/05/2023',
      '28/08/2023',
      '25/12/2023',
      '26/12/2023',
    ];

    const selectedDateStr = new Intl.DateTimeFormat('en-GB', { dateStyle: 'short' })
      .format(selectedDate);

    let messageTranslationKey
    switch (true) {
      // Date is in the past
      case selectedDate < earliestDeliveryDate:
        messageTranslationKey = 'select-date-in-future'
        break;
      // Day is weekend
      case [0, 6].includes(selectedDate.getDay()):
        messageTranslationKey = 'select-mon-fri'
        break;
      // Is bank holiday
      case ukBankHolidays.includes(selectedDateStr):
        messageTranslationKey = 'select-non-bank-holiday'
        break;
    }

    return {
      valid: messageTranslationKey === undefined,
      messageTranslationKey
    }
  }
}
],

Core Script

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    checkoutCustomElements: [
      {
      translations: {
        en: {
          title: "Delivery Date",
          detail: "Delivery unavailable on weekends.",
          'select-mon-fri': "Date must be Monday-Friday",
          'select-date-in-future': "Select a date in the future",
          'select-non-bank-holiday': "Select another date which is not a UK bank holiday",
        },
      },
      name: "delivery-date-requested",
      attributes: {
        required: true,
        type: "date"
      },
      onChange(val, el) {
        const [year, month, date] = val.split('-');
        const selectedDate = new Date(
          Number(year),
          Number(month)-1,
          Number(date), 
          0,
          0,
          0,
          0
        );
        const now = new Date()
        const ukTime = now.toLocaleString(
          'en-GB',
          {
            hour: '2-digit',
            hour12: false,
            timeZone: 'Europe/London'
          }
        );

        const earliestDeliveryDate = new Date(
          now.getFullYear(),
          now.getMonth(),
          now.getDate() + (Number(ukTime) >= 12 ? 1 : 0)
        )

        const ukBankHolidays = [
          '07/04/2023',
          '10/04/2023',
          '01/05/2023',
          '08/05/2023',
          '29/05/2023',
          '28/08/2023',
          '25/12/2023',
          '26/12/2023',
        ];

        const selectedDateStr = new Intl.DateTimeFormat('en-GB', { dateStyle: 'short' })
          .format(selectedDate);

        let messageTranslationKey
        switch (true) {
          // Date is in the past
          case selectedDate < earliestDeliveryDate:
            messageTranslationKey = 'select-date-in-future'
            break;
          // Day is weekend
          case [0, 6].includes(selectedDate.getDay()):
            messageTranslationKey = 'select-mon-fri'
            break;
          // Is bank holiday
          case ukBankHolidays.includes(selectedDateStr):
            messageTranslationKey = 'select-non-bank-holiday'
            break;
        }

        return {
          valid: messageTranslationKey === undefined,
          messageTranslationKey
        }
      }
    }
    ],
  };
</script>

Core Script

checkoutCustomElements: [
  {
    translations: {
      en: {
        title: "I agree to the terms and conditions",
        detail: "Please confirm you've read and agree to the terms and conditions",
      },
    },
    name: "confirmation",
    attributes: {
      required: true,
      type: "checkbox"
    },
  },
],

Core Script

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    checkoutCustomElements: [
      {
        translations: {
          en: {
            title: "I agree to the terms and conditions",
            detail: "Please confirm you've read and agree to the terms and conditions",
          },
        },
        name: "confirmation",
        attributes: {
          required: true,
          type: "checkbox"
        },
      },
    ],
  };
</script>

Reference

Custom field settings

Settings for fields added in the Core Script, for your developer:

Key	What it does
`name`	The name of the field. It's shown in your eCommerce platform but not to customers. Required (standard fields use `id` instead).
`translations`	An object of customer-facing text, keyed by two-letter language code (ISO 639-1 (opens in a new tab)). Required.
`title`	Inside `translations`: the text shown in bold above the field. Required.
`detail`	Inside `translations`: small helper text shown under the field, for example to explain what to enter.
`attributes`	HTML attributes for the field, which set its type and validation: `max`, `maxlength`, `min`, `minlength`, `name`, `pattern`, `placeholder`, `required` (default `false`), `disabled` (default `false`), `step` and `type` (default `text`). Some attributes only apply to certain types; see the MDN input attributes reference (opens in a new tab).
`options`	For `select` fields: the drop-down options, optionally in named groups.
`onChange`	A function that validates the value and returns a message key from `translations` if it's invalid.

To change the default look of the fields, see Frontend integration.

Supported field types

Field type	What the customer enters
`text`	Free text
`select`	A choice from a drop-down menu
`number`	A number
`date`	A date, DD/MM/YYYY
`time`	A time, 00:00
`week`	A week (for example, week 4)
`month`	A month of the year (for example, 12)
`datetime-local`	A date and time, DD/MM/YYYY 00:00
`checkbox`	A tick box (allows multiple selections)
`tel`	A phone number
`email`	An email address
`url`	A website URL
`file`	A file attachment (Growth, Pro and Enterprise plans)

Checkout fields

How it works

What you can do without code

Turn on standard checkout fields

Where standard fields appear in your orders

Add a custom checkout field

Where custom field data is saved

Let customers upload files at checkout

Download uploaded files

Let customers upload files on the product page

Move to the standard fields

Add a custom field in the Core Script (for developers)

Example fields

Reference

Custom field settings

Supported field types

FAQs

On this page

Example with multiple custom fieldsCopy link

Date picker, e.g. 'Shipping date'Copy link

Custom text, e.g. 'Tax ID Reference'Copy link

Drop-down menu ("select" menu), e.g. 'Seasonal information'Copy link

Custom text, e.g. 'Shipping instructions'Copy link

Number, e.g. 'Contact phone number'Copy link

File attachments (e.g. Purchase Order file upload)Copy link

Date picker that requires date at least 1 day in futureCopy link

Date picker that restricts by weekends and specific datesCopy link

Checkbox to require customer confirmationCopy link

Do I need a developer to add checkout fields?Copy link

Can I use custom checkout fields on Wix?Copy link

What's the difference between checkout fields and the Additional Information field?Copy link

Can I raise the 20MB file size limit?Copy link

Why can't I open an uploaded file from the Shopify order?Copy link