Custom fields

When it comes to adding specific custom fields for your e-commerce, Snipcart allows you to set two types of custom fields. You can define custom fields that are specific to products and you can also define custom fields that are specific to orders. Let’s take a closer look.

Product custom fields

If you're selling physical goods or products, you may need to have some custom fields on your items, such as item size, color, etc.

You can easily do that through your HTML markup within your Buy button.

Here is an example with various custom types. Notice the data-item-custom... fields.

<a href="#"
    class="snipcart-add-item"
    data-item-id="2"
    data-item-name="Tshirt"
    data-item-price="30.00"
    data-item-weight="20"
    data-item-url="http://myapp.com/products/bacon"
    data-item-description="A custom tshirt"
    data-item-custom1-name="Print label"
    data-item-custom1-required="true"
    data-item-custom2-name="Size"
    data-item-custom2-options="Small|Medium|Large"
    data-item-custom2-value="Medium"
    data-item-custom3-name="Gift"
    data-item-custom3-options="true|false">
    Buy now
</a>

We support two types of custom fields that should allow you to express your product options.

  1. data-item-custom{X}-name defines the name and label of the custom field. If no other definition is given to the custom field, it is then considered to be a text field.
  2. data-item-custom{X}-options defines the predefined possible values separated by “|” of the custom field. If the possible options are true|false it will be considered a checkbox, otherwise it will be displayed as a dropdown.

You can also set required fields by using data-item-custom{X}-required to "true".

Sometimes you may want to generate a textarea instead of a simple textbox, for exemple if you want to get comments from your customers. To do so, you can specify the type of the custom field to be a textarea

data-item-custom{x}-type="textarea"

Here is a complete example:

<a href="#"
    class="snipcart-add-item"
    data-item-id="2"
    data-item-name="Tshirt"
    data-item-price="30.00"
    data-item-url="/"
    data-item-custom1-name="Special comments"
    data-item-custom1-type="textarea">
    Buy now
</a>

Altering item prices

Sometimes you may need to update the item price depending on the custom fields choices that your customer is making. This is very easy to do with Snipcart.

<a href="#"
    class="snipcart-add-item"
    data-item-id="2"
    data-item-name="Tshirt"
    data-item-price="30.00"
    data-item-weight="20"
    data-item-url="http://myapp.com/products/bacon"
    data-item-description="A custom tshirt"
    data-item-custom1-name="Print label"
    data-item-custom2-name="Size"
    data-item-custom2-options="Small|Medium[+5.00]|Large[+10.00]|Kid[-5.00]"
    data-item-custom2-value="Medium"
    data-item-custom3-name="Gift"
    data-item-custom3-options="true|false">
    Buy now
</a>

If you take a look at data-item-custom2-options you will notice that we modified the value and put Small|Medium[+5.00]|Large[+10.00]|Kid[-5.00].

When your customer selects the Medium size, the price of the item will be incremented by 5.00$, if he chooses the Large shirt, the price will be incremented by 10.00$. Finally, we can also decrement the price by using a negative number like on the Kid shirt.

For the moment, only drop down custom fields (with options) can alter the item price.

Order custom fields

In addition to the product custom fields, you can add some custom fields to the order. Whenever you define order custom fields, a new tab/step called Order infos will be inserted before the Billing address during the checkout process.

Because these are global custom fields, the markup will need to be added in the Snipcart script tag that you need to add to reference our javascript file.

Here is the markup example:

<script id="snipcart"
    data-api-key="{YOUR_API_KEY}"
    data-cart-custom1-name="Comments"
    data-cart-custom2-name="Rating on 10"
    data-cart-custom2-options="1|2|3|4|5|6|7|8|9|10"
    data-cart-custom3-name="Do you accept terms?"
    data-cart-custom3-options="true|false"
    data-cart-custom3-required="true"
    src="https://cdn.snipcart.com/scripts/snipcart.js" type="text/javascript">
</script>

data-cart-custom{index}-required will ensure that your customer fills this information before continuing to the billing address tab. The custom field definitions are identical to the ones done for the products.

Was this article helpful?