> For the complete documentation index, see [llms.txt](https://guides.orderla.my/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guides.orderla.my/orderla-pro/cart-based-form-type.md).

# Cart-Based Form Type

Cart-based Form is a form type that is tailored for food & beverage (F\&B) type of business. Of course it can be used for any similar fashion.

You can set 'Cart-based' at **form edit** / **form** scroll to Form Type, and select 'Cart-based'.

You may also choose Layout i) List or ii) Grid.&#x20;

![](https://1553906970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MBZClG7agt1laCsv-CF%2Fuploads%2FLOPs53dwaEkJnCu1kK6U%2Fimage.png?alt=media\&token=60759d61-dae2-4dc7-b588-cff97074278e)

**List View:**

![](https://1553906970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MBZClG7agt1laCsv-CF%2Fuploads%2FWf5eSk9l0cUZe1tFTxNU%2Fimage.png?alt=media\&token=9f884f3b-c533-4d6d-90f1-8deada4c373f)

**Grid View:**

![](https://1553906970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MBZClG7agt1laCsv-CF%2Fuploads%2FwuwmdLYsgZW521x33LWo%2Fimage.png?alt=media\&token=30b48497-ef14-4c05-b301-95c3f5ff415a)

### **Product Detail Modal**&#x20;

To put on the cart, customers need to select a product to show a product pop-up.&#x20;

With product details appears, customers can select additional items and variation.

In addition customers also can put their notes.&#x20;

<div align="center"><img src="https://1553906970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MBZClG7agt1laCsv-CF%2Fuploads%2FseYoLwTWE6QnwYzGM2bb%2Fimage.png?alt=media&amp;token=f68f8b01-60c5-47c2-83d5-976f0dc4f200" alt=""></div>

## How to Setup&#x20;

Once you have setup you form type as 'Cart-based' you can access 'Modifiers' at product edit.

![Modifiers at Product Edit](https://1553906970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MBZClG7agt1laCsv-CF%2Fuploads%2FvsQmH9KteShvZTaxBsQV%2Fimage.png?alt=media\&token=5d95772f-afa3-433e-a13d-2cc6c85ecb14)

You can select one of 3 types of modifier: **Single Selection**, **Multi Selection** or **Stepper** ( to let customer select the number for each modifier options ).&#x20;

![](https://1553906970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MBZClG7agt1laCsv-CF%2Fuploads%2F040obpEdpUzMcl25RQz7%2Fimage.png?alt=media\&token=2fd4decf-adba-490a-9778-3b8d7aa75467)

After that, click on **'+ Add Option'**, to add the selection options for that modifier like below.

![](https://1553906970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MBZClG7agt1laCsv-CF%2Fuploads%2FUQ2sS9PBga1bw5bSFWYL%2Fimage.png?alt=media\&token=03b7671d-a4d4-4400-a8f2-89100bf4da8c)

For each Option, you can add: name, additional price and also set it disabled ( if you cannot fulfil the option temporarily).&#x20;

### Enable Remarks

At the bottom of **modifiers** section you can activate to show remarks for the item.&#x20;

<figure><img src="https://1553906970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MBZClG7agt1laCsv-CF%2Fuploads%2FsPyGf6HRqMnFCibyfH1C%2Fimage.png?alt=media&amp;token=4b5aa04e-387a-4db3-b7d6-0da0ae3a4f59" alt=""><figcaption></figcaption></figure>

### Indicator for Cart-based Form

To make it easier to know which form is using cart-based form, at form listing there is tag 'Cart'.

<figure><img src="https://1553906970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MBZClG7agt1laCsv-CF%2Fuploads%2FseDWcTjn1YYgpDOaWCJn%2FGroup%203.png?alt=media&amp;token=261bfb9f-f2ea-4049-a8dd-6c0c6e1c1b00" alt=""><figcaption></figcaption></figure>
