Cart & Checkout

custom checkout fields 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 docid\ efevur a3ycjxuhvrr7t before the customer selects their shipping address how custom checkout field data is stored 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, shopify customisations docid\ ddiv5tdancaywtoj0vyb7 , and even sent through to a backend system (via the api) and more how custom checkout data appears in shopify 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 shopify customisations docid\ ddiv5tdancaywtoj0vyb7 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 docid\ lqxani7ivdqna09d9soaphow custom checkout data appears to a customer no configurations applicable how to add custom checkout fields 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) updating the display you can update the default display by adding code to your frontend integration guide docid\ qwxsym9x5 pviogutekcp frontend integration guide docid\ qwxsym9x5 pviogutekcp about how to update display settings on sparklayer / add the below code into the sparklayer core script / / please refer to our help guide on how to do this / checkoutcustomelements \[ { name "delivery date", translations { en { title "delivery date", detail "delivery unavailable on weekends " } }, attributes { required true, type "date" } }, ], / end of code // add the below code into the sparklayer core script / / please refer to our help guide on how to do this / 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" } }, ], / end of code / 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 https //www wikiwand com/en/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 https //developer mozilla org/en us/docs/web/html/element/input#attributes example custom checkout fields to get started, we've included some of our most popular customer checkout field types updating the display you can update the default display by adding code to your frontend integration guide docid\ qwxsym9x5 pviogutekcp frontend integration guide docid\ qwxsym9x5 pviogutekcp about how to update display settings on sparklayer date picker, e g 'shipping date' / add the below code into the sparklayer core script / / please refer to our help guide on how to do this / checkoutcustomelements \[ { name "shipping date", translations { en { title "shipping date", detail "please select your preferred shipping date" } }, attributes { required true, type "date" } }, ], / end of code / custom text, e g 'tax id reference' / add the below code into the sparklayer core script / / please refer to our help guide on how to do this / 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 } }, ], / end of code / drop down menu ("select" menu), e g 'seasonal information' / add the below code into the sparklayer core script / / please refer to our help guide on how to do this / 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" } } } ], } ] } ], / end of code / custom text, e g 'shipping instructions' / add the below code into the sparklayer core script / / please refer to our help guide on how to do this / 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 } }, ], / end of code / number, e g 'contact phone number' / add the below code into the sparklayer core script / / please refer to our help guide on how to do this / 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, } }, ], / end of code / file attachments (e g purchase order file upload) if you're looking to add file uploads to the checkout process, you can manage this via custom checkout fields please refer to our full guide below date picker that requires date at least 1 day in future / add the below code into the sparklayer core script / / please refer to our help guide on how to do this / 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()) } }, ], date picker that restricts by weekends and specific dates / add the below code into the sparklayer core script / / please refer to our help guide on how to do this / 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 } } } ], / end of code / checkbox to require customer confirmation / add the below code into the sparklayer core script / / please refer to our help guide on how to do this / 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" }, }, ], / end of code / supported form 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 email entry url website url entry file file attachment file upload (file attachments) 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 file upload at checkout 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 docid\ lqxani7ivdqna09d9soap 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 frontend integration guide docid\ qwxsym9x5 pviogutekcp that lets you customise how you accept files from your customers to get started, you can use our sample code below updating the display you can update the default display by adding code to your frontend integration guide docid\ qwxsym9x5 pviogutekcp frontend integration guide docid\ qwxsym9x5 pviogutekcp about how to update display settings on sparklayer / add the below code into the sparklayer core script / / please refer to our help guide on how to do this / checkoutcustomelements \[ &#x9;{ &#x9; translations { &#x9; en { &#x9; title "file upload", &#x9; detail "files must not be larger than 10mb you can upload between 1 and 4 files" &#x9; }, &#x9; }, &#x9; name "file upload", &#x9; attributes { &#x9; type "file", &#x9; required false, // optional default false &#x9; minlength 1, // optional default 1 &#x9; maxlength 4, // optional default 20 &#x9; maxsize '10mb', // optional default 20mb, must be a number followed by `b`, `kb` or `mb` &#x9; 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'] &#x9; 'png', &#x9; 'txt', &#x9; 'pdf', &#x9; 'xls' &#x9; ] &#x9; } &#x9;} ], / end of code / 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 docid\ uw8mdbmefwwkqzrvb5cqx 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 docid\ nnuw1g9z7eaj4m78vk7t9 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 refer to the sparklayer technical docs file upload per line item 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 docid\ kqoyqbdwzsirlt7j s6cu 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 docid\ kqoyqbdwzsirlt7j s6cu 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 docid\ lqxani7ivdqna09d9soap 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 javascript sdk docid 315unbm85 fwnh6fu9kkk discounts & promotions sparklayer supports the ability to have discounts and promotions applied during the checkout and these can either be redeemed via discount codes, or applied "automatically" to the customer's order the sparklayer discount engine unlocks a range of discount rules including order level discounts eg, spend $1,000 and get 10% off, spend $2,000 and get 15% off percentage and fixed discounts eg, 20% off an order total, $100 off an order total coupon codes eg, enter code newcustomer and get 5% off scheduled discounts eg, start discount today and end it on a specific date and time customer specific discounts eg, only allow customer group ‘b2b vip’ to qualify for the discount and more learn more about discounts you can see a full overview of what’s possible with discounts in discounts docid\ wrejpw9uryjqwiqeks cg the "additional information" field (po number) 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 docid\ lhkqo8t7 a0hargvyfgtt ) please refer to the sparklayer technical docs 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 updating the display you can update the default display by adding code to your frontend integration guide docid\ qwxsym9x5 pviogutekcp frontend integration guide docid\ qwxsym9x5 pviogutekcp about how to update display settings on sparklayer / add the below code into the display object within the sparklayer core script / / please refer to our help guide on how to do this / display { customerreferencerequired true, }, / end of code / updating language and text you can update the default text by adding code to your frontend integration guide docid\ qwxsym9x5 pviogutekcp languages & international docid\ klrs7wtxn3wncdy8z5zvu about how to update text on sparklayer / add the below code into the sparklayer core script / / please refer to our help guide on how to do this / 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", } }, / end of code / 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 updating the display you can update the default display by adding code to your frontend integration guide docid\ qwxsym9x5 pviogutekcp frontend integration guide docid\ qwxsym9x5 pviogutekcp about how to update display settings on sparklayer / add the below code into the display object within the sparklayer core script / / please refer to our help guide on how to do this / display { customerreferencemaxlength 512, / update 512 as required / }, / end of code / 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 updating the display you can update the default display by adding code to your frontend integration guide docid\ qwxsym9x5 pviogutekcp frontend integration guide docid\ qwxsym9x5 pviogutekcp about how to update display settings on sparklayer / add the below code into the display object within the sparklayer core script / / please refer to our help guide on how to do this / display { customerreferencehidden true, }, / end of code / custom payment messages on the final step of the my cart interface docid\ efevur a3ycjxuhvrr7t , 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 frontend integration guide docid\ qwxsym9x5 pviogutekcp that lets you define the text you want to show updating language and text you can update the default text by adding code to your frontend integration guide docid\ qwxsym9x5 pviogutekcp languages & international docid\ klrs7wtxn3wncdy8z5zvu about how to update text on sparklayer / add the below code into the sparklayer core script / / please refer to our help guide on how to do this / 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", } }, / end of code / 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 custom checkout message on the final step of the my cart interface docid\ efevur a3ycjxuhvrr7t , 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 frontend integration guide docid\ qwxsym9x5 pviogutekcp that lets you define the text you want to show updating language and text you can update the default text by adding code to your frontend integration guide docid\ qwxsym9x5 pviogutekcp languages & international docid\ klrs7wtxn3wncdy8z5zvu about how to update text on sparklayer / add the below code into the sparklayer core script / / please refer to our help guide on how to do this / translations { en { "cart checkout review step custom message" "add your custom checkout message here", } }, / end of code / 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 styling the message if you'd like to customise how the message looks, you can do this by adding special customising the design docid\ qct2zk8wjhyiv2zbvbjyy 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 \<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> search 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 my cart interface terms and conditions when customers checkout via the sparklayer my cart interface docid\ efevur a3ycjxuhvrr7t , 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 updating the display you can update the default display by adding code to your frontend integration guide docid\ qwxsym9x5 pviogutekcp frontend integration guide docid\ qwxsym9x5 pviogutekcp about how to update display settings on sparklayer / add the below code into the sparklayer core script / / please refer to our help guide on how to do this / termsandconditionslink "/policies/terms of service", / end of code / 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 / add the below code into the sparklayer core script / / please refer to our help guide on how to do this / {% if shop locale == "fr" %} termsandconditionslink '/policies/fr terms and conditions', {% else %} termsandconditionslink '/policies/terms and conditions', {% endif %} / end of code / no configurations applicable updating language and text you can update the default text by adding code to your frontend integration guide docid\ qwxsym9x5 pviogutekcp languages & international docid\ klrs7wtxn3wncdy8z5zvu about how to update text on sparklayer / add the below code into the sparklayer core script / / please refer to our help guide on how to do this / translations { en { "cart checkout terms start" "i agree to the ", "cart checkout terms link" "terms and conditions", "cart checkout terms end" " ", } }, / end of code / payment methods please refer to the payment methods docid\ ibikczvhm085bkejiffyv guide for more information tax & shipping messaging tax & shipping to learn more about how sparklayer handles tax and shipping, see tax & shipping docid\ zssxg6fjrlcod gxolutn 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 updating language and text you can update the default text by adding code to your frontend integration guide docid\ qwxsym9x5 pviogutekcp languages & international docid\ klrs7wtxn3wncdy8z5zvu about how to update text on sparklayer / add the below code into the sparklayer core script / / please refer to our help guide on how to do this / 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", } }, / end of code / tax id requirements some countries require you to collect your customer’s tax id or equivalent during checkout this helps ensure orders comply with local tax laws and avoids delays or fines at customs tax & shipping docid\ zssxg6fjrlcod gxolutn the order complete screen you can modify the confirmation screen that shows to the customer by adding the below to the language overwrites within the sparklayer core script updating language and text you can update the default text by adding code to your frontend integration guide docid\ qwxsym9x5 pviogutekcp languages & international docid\ klrs7wtxn3wncdy8z5zvu about how to update text on sparklayer / add the below code into the sparklayer core script / / please refer to our help guide on how to do this / 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 ", } }, / end of code / order limits (minimum and maximum order values) 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 customer groups docid 5 lwmnohhjbjjppg9e6vh showing custom content (using "slots") custom slots (or "targets") allow you to enhance the sparklayer my cart interface docid\ efevur a3ycjxuhvrr7t by adding your own custom code in predefined areas you can learn more in our custom slots ("targets") docid\ l 2oohjiy rax2chbmgp2 pricing display if you have pricing display docid\ s vtljborgmnwjjfsmom9 set up, by default the my cart interface docid\ efevur a3ycjxuhvrr7t will display this below the main selling price if you'd prefer to hide this, you can add the below css to your customising the design docid\ qct2zk8wjhyiv2zbvbjyy \ spark cart rrp display none; cart image it's possible to change how the product image is rendered in the my cart interface docid\ efevur a3ycjxuhvrr7t 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 customising the design docid\ qct2zk8wjhyiv2zbvbjyy \ spark cart background size cover / set image to fill the space / \ spark cart background size contain / set image to be fully visible /