# Implementing Personalized Products

Personalized products can be customized by the customer. This customization can be adding a message or selecting different options for the product. This guide will show you how to implement personalized products in Umbraco Commerce.

This will be broken down into the following steps:

* Add a message field on the product page in the add-to-cart form
* Save the details in an order line [property](https://docs.umbraco.com/umbraco-commerce/key-concepts/properties)
* Register a UI extension to display the value in the Backoffice.

{% hint style="info" %}
This guide is not a direct follow-on from the [getting started tutorial](https://docs.umbraco.com/umbraco-commerce/tutorials/build-a-store). It is assumed that your store is set up in a similar structure.
{% endhint %}

## Capturing a Message

On the frontend, add a text area to the product page where the customer can enter their message.

![Customer Message Field](https://3343668521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlHETtFOx4I72xhuc27Kt%2Fuploads%2Fgit-blob-17c5a0b9c1abbdf4cb6ec418338469eb16ac9410%2Fobservations-collapsed.png?alt=media)

## Saving the Message as an Order Line Property

When the customer adds the product to the cart, the message will be saved in an order line property.

1. Add an `Observations` property of the `AddToCartDto` to capture the message.

{% code title="AddToCartDto.cs" %}

```csharp
public class AddToCartDto
{
    ...

    public string? Observations { get; set; }
}
```

{% endcode %}

2. Locate the `AddToCart` of the `CartSurfaceController`.
3. Set a property on the order line if a value has been sent with the request.

{% code title="CartSurfaceController.cs" %}

```csharp
[HttpPost]
public async Task<IActionResult> AddToCart(AddToCartDto postModel)
{
    try
    {
        await _commerceApi.Uow.ExecuteAsync(async uow =>
        {
            var store = CurrentPage.GetStore();
            var order = await _commerceApi.GetOrCreateCurrentOrderAsync(store.Id)
                .AsWritableAsync(uow)
                .AddProductAsync(postModel.ProductReference, decimal.Parse(postModel.Quantity), new Dictionary<string, string>{
                    { "productObservations", postModel.Observations }
                });

            await _commerceApi.SaveOrderAsync(order);

            uow.Complete();
        });
    }
    catch (ValidationException ex)
    {
        ...
    }
}
```

{% endcode %}

## Accessing the Property in the Backoffice

To view the data in the Backoffice order editor, you need to register an `ucOrderProperty` extension along with the relevant label localizations as sampled below.

Create a new `umbraco-package.json` file in a folder in the `App_Plugins` directory in the root of your project and add the following code:

{% code title="umbraco-package.json" %}

```csharp
{
  "name": "SwiftShop",
  "extensions": [
    {
      "type": "ucOrderLineProperty",
      "alias": "Uc.OrderLineProperty.ProductObservations",
      "name": "Product Observations",
      "weight": 400,
      "meta": {
        "propertyAlias": "productObservations",
        "showInOrderLineSummary": true,
        "summaryStyle": "inline",
        "editorUiAlias": "Umb.PropertyEditorUi.TextBox",
        "labelUiAlias": "Umb.PropertyEditorUi.Label"
      }
    },
    {
      "type": "localization",
      "alias": "Uc.OrderLineProperty.ProductObservations.EnUS",
      "name": "English",
      "meta": {
        "culture": "en",
        "localizations": {
          "section": {
            "ucProperties_productObservationsLabel": "Observations",
            "ucProperties_productObservationsDescription": "Customer product observations"
          }
        }
      }
    }
  ]
}
```

{% endcode %}

The property is displayed in the Backoffice order editor.

![Backoffice Order Line Property](https://3343668521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlHETtFOx4I72xhuc27Kt%2Fuploads%2Fgit-blob-7207a8d3789fa383df879b98aa5dd1a860e1f042%2Forder-line-property.png?alt=media)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.umbraco.com/umbraco-commerce/how-to-guides/personalized-products.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.