How to Capture Custom Order Information from the Cart

Sometimes a sale needs a little more than a product and a quantity. A B2B buyer needs to attach a Purchase Order number, a shopper wants their package left unattended or a gift order needs a recipient name and a personal message. Storesynk lets you capture all of this extra order information right in your Webflow cart and product pages and attach it to the cart so it lands on your Shopify Order details page where your team can act on it. This guide is the complete reference for every way to do that: from a simple order note to per-product custom fields, gift messages, hidden internal fields and order-wide attributes set through the API.

Everything you capture this way is stored as either the Shopify order note or as cart and line-item attributes, both of which show up on the order in your Shopify admin.

What you can capture, and where it shows up

Before you build anything, it helps to know the four building blocks Storesynk gives you:

• Order note: one free-text note for the whole order. Available as the ready-made Cart Note component in the Store Builder.
• Per-product custom fields: text, radio or checkbox inputs placed next to a product that travel with that line item. Available as the Product Note component in the Store Builder.
• Gift message: a small form for a recipient name, email and message attached to a product. Available as the Gift Card Form component in the Store Builder.
• Order-wide attributes: global fields like a single PO number or a "leave unattended" preference, set programmatically with the Shopyflow.updateCartAttributes() API.

The first three ship as drop-in components, so you usually won't build them by hand. Each section below shows the Store Builder component first, then the underlying sf-* attribute in case you want to wire it onto your own element or customize the behavior.

All of these surface on the same place in Shopify: open any order in your admin and the captured note and attributes appear on the Order details page, alongside the line items. Your fulfillment team sees them without any extra setup.

The simple order note

The quickest way to let shoppers leave a message is a single order-note field inside the cart. This is perfect for "special instructions" or "anything else we should know?" prompts.

Follow the below steps to add an order note to your cart:

1. Go to Storesynk Webflow App > Store Builder.
2. Add the Cart Note component into your cart.
3. Publish your site.

That's it. The component already sits inside a form, carries the sf-cart-note attribute and needs no submit button. Storesynk auto-saves the note as the shopper types (with a short debounce) and suppresses the form submission for you.

Whatever the shopper types is saved as the Shopify order note and appears on the Order details page after checkout. If you'd rather build the field on your own element, add an input or textarea inside a Webflow Form Block in your cart and give it the sf-cart-note attribute. See the Cart Note component doc for the element reference.

Per-product custom fields

When the information belongs to a specific product, like a Purchase Order number for one item, an engraving, a delivery date or a "is this a gift?" choice, use a per-product field with the sf-change-product-note attribute. The engine reads the field's value at add-to-cart time and attaches it as a line-item attribute to that product.

The attribute's value becomes the field's title (the Shopify key). For example, sf-change-product-note="Purchase Order Number" stores the input under the key "Purchase Order Number". If you leave the value empty (or set it to 1 / true), the key defaults to "Note".

Follow the below steps to add a per-product field:

1. Go to Storesynk Webflow App > Store Builder.
2. Add the Product Note component inside your Product Container (the wrapper carrying the sf-product attribute).
3. Select the field and set its sf-change-product-note attribute value to the label you want, e.g. Purchase Order Number.
4. (Optional) Add Webflow's native required setting to the input to block add-to-cart until the shopper fills it in.
5. Publish your site.

To build the field on your own element instead, add an input or textarea inside the Product Container and give it the sf-change-product-note attribute with the same value.

The component is a standard text field. If you want a different input type (radio buttons or a checkbox), build it on your own element with the sf-change-product-note attribute, as shown below.

A text field: PO number or delivery instructions

A plain text input covers most cases: a PO number, a delivery instruction, an engraving line:

<!-- inside the Product Container -->
<input type="text" sf-change-product-note="Purchase Order Number" placeholder="e.g. PO-12345" />
<textarea sf-change-product-note="Delivery instructions" placeholder="Anything we should know about delivery?"></textarea>

Radio buttons

Because the engine reads the field's .value generically, radio buttons work too. Put the attribute on each radio input and give each option a meaningful value. The checked radio's value is what gets attached:

<!-- inside the Product Container -->
<label>
  <input type="radio" name="giftwrap" sf-change-product-note="Gift wrap" value="Standard" checked />  Standard
</label>
<label> 
  <input type="radio" name="giftwrap" sf-change-product-note="Gift wrap" value="Premium" />  Premium
</label>

When the shopper adds the product, the line item gets a "Gift wrap" attribute set to the selected option.

A single checkbox

A single checkbox works the same way. Its value is captured when it's checked:

<!-- inside the Product Container -->
<label>
  <input type="checkbox" sf-change-product-note="Fragile" value="Handle with care" /> This item is fragile
</label>

One thing to keep in mind: there's no built-in aggregation of several checkboxes into a single combined field. If you need that (for example ticking three boxes that should roll up into one comma-separated value), handle the logic with a little custom JS and the Shopyflow.updateCartAttributes() or Shopyflow.addCartNote() API described further down.

See the Product Note component doc for the element reference.

Gift Card Form

For gift orders, Storesynk has a dedicated form that captures a recipient's name, email and a message, all attached to the product line.

Follow the below steps to add a gift message form:

1. Go to Storesynk Webflow App > Store Builder.
2. Add the Gift Card Form component inside your Product Container.
3. Publish your site.

The component bundles the sf-gift-form wrapper with its three fields already wired:

• An input with sf-name → stored as "Recipient name".
• An input with sf-email → stored as "Recipient email" (this one is validated as an email address).
• An input or textarea with sf-message → stored as "Message".

To build it by hand instead, add a wrapper with the sf-gift-form attribute inside the Product Container and place the three fields inside it:

<!-- inside the Product Container -->
<div sf-gift-form>
  <input type="text" sf-name placeholder="Recipient name" />
  <input type="email" sf-email placeholder="Recipient email" />
  <textarea sf-message placeholder="Write your gift message"></textarea>
</div>

When the product is added to the cart, those three values ride along as line-item attributes and appear on the Order details page. See the Gift Card Form component doc for the element reference.

Showing captured notes back in the cart

Once a shopper has entered per-product information, you'll often want to echo it back in the cart so they can confirm it's correct. Use the sf-show-product-note attribute on an element inside your cart item template.

Follow the below steps:

1. Open your cart and find the cart item template (the element with the sf-cart-item attribute).
2. Inside it, add a text element and give it the sf-show-product-note attribute.
3. Publish your site.

Storesynk renders that line item's attributes as key: value pairs, one per line. For example, a product with a PO number and a gift wrap choice would display:

Purchase Order Number: PO-12345
Gift wrap: Premium

See the Product Note Displayer component doc for the element reference.

Hidden and internal fields

Sometimes you want to capture information for your own records without showing it to the shopper at checkout: an internal reference code, a source tag, a flag for your fulfillment team. Storesynk follows Shopify's convention of prefixing the key with an underscore.

Hidden line-item field: prefix the key with a single underscore _. Shopify treats it as a private line item property: it's hidden from the shopper at checkout but still visible to you on the Order details page. Storesynk's own cart display (sf-show-product-note) also skips any key starting with _, so it won't render in your cart UI either.

<!-- inside the Product Container -->
<input type="hidden" sf-change-product-note="_internal-ref" value="WAREHOUSE-A" />

‍Hidden cart-level attribute: prefix the key with a double underscore __ for a private cart attribute (this is the same convention the engine itself uses internally for attributes like __shopify_send_gift_card_to_recipient). Set these through the API described below.

Use these when the data is for your team's eyes, not the shopper's.

Order-wide fields via the API

The no-code attributes above attach to a single line item (sf-change-product-note, sf-gift-form) or set the one order note (sf-cart-note). For information that applies to the whole order (a single PO number for the entire cart or a "leave unattended" preference), use the public API with a little custom JS.

Set a cart-level attribute

Shopyflow.updateCartAttributes() takes an array of { key, value } objects and writes them as cart-level attributes (Shopify's cartAttributesUpdate):

Shopyflow.updateCartAttributes([{ key: 'Purchase Order Number', value: 'PO-12345' }]);

Worked example: a "leave unattended" checkbox

Drop a checkbox anywhere on your cart page, then wire it to the API. When the shopper ticks it, the whole order gets a "Leave unattended" attribute:

<label>
  <input type="checkbox" id="leave-unattended" />  Leave my package unattended if no one's home
</label>

document.getElementById('leave-unattended').addEventListener('change', (e) => {
  Shopyflow.updateCartAttributes([
    { key: 'Leave unattended', value: e.target.checked ? 'Yes' : 'No' },
  ]);
});

Set the order note programmatically

You can also set the order note from code with Shopyflow.addCartNote():

Shopyflow.addCartNote('Please deliver before noon.');

React to cart changes

If you need to run logic after one of these updates, listen for the cartUpdate event, which fires with a type describing what changed (such as attributesUpdate or addCartNote):

Shopyflow.on('cartUpdate', (cart) => {
  // run your custom logic here
});

See the Add Cart Note and Update Cart Attributes method docs for full signatures.

Where it shows up in Shopify

Everything you've captured (the order note, per-product line-item attributes, gift messages and cart-level attributes) appears on the order in your Shopify admin. Open Orders, click into any order, and you'll see the note and attributes on the Order details page alongside the line items. Your fulfillment team reads them directly there; nothing extra to configure.

This gives you a flexible way to collect exactly the order information your business needs, from a one-line special instruction to structured per-product fields, without leaving Webflow or writing a custom checkout.