Product definition

One of Snipcart's major advantages is that you do not have to enter your product inventory anywhere. This is truly what makes our product easy for flexible e-commerce integration on any site or app. No double entries and no double management. Stay within your website's tools and Snipcart will figure the rest out! Most of the time you will always have an inventory somewhere or an existing database, so we don't want you to have duplicate information.

So how does it work? Well, all your product information is stored in the HTML markup. You can basically convert any link into a buy button. For instance, this is the buy bacon button from Snipcart’s homepage:

<button
    class="snipcart-add-item"
    data-item-id="2"
    data-item-name="Bacon"
    data-item-price="3.00"
    data-item-weight="20"
    data-item-url="http://myapp.com/products/bacon"
    data-item-description="Some fresh bacon">
    Buy bacon
</button>

The code above will generate an anchor that you can style and skin however you want.

Note: once you've created and defined products on your site, you'll be able to handle your inventory management directly from the dashboard.

Let’s take a look at Snipcart's product attributes that you can use to define your products. Each product property is identified with a data attribute. You can use those properties:

data-item-id

This attribute is mandatory, it is the unique ID of your product. If you are using a CMS such as Wordpress or Umbraco, we suggest using your unique id from your database. There are no constraints on Snipcart's side, you can use integers, guids, strings, etc.

This attribute will also be used to locate the element when crawling your webpage to make sure the amount that the customer is about to pay is correct and hasn’t been altered.

Required
data-item-name

This is another mandatory attribute, it is simply your product name. The product name will be displayed in the shopping cart and during the checkout process.

Required
data-item-price

Another mandatory attribute, the item price. You must provide us a decimal number. Do not format the number you provide us in this attribute. Use a simple decimal with a dot (.) as a separator. Simply define the price regardless of the currency you're using. If you are using our multi currency feature, please follow the guide here to define your prices correctly.

Valid price: 10000.50

Invalid price: 10 000,50$

Required
data-item-url

This attribute is very important. It must be the URL where we will find your Buy button. To make sure the price has not been altered during the checkout process, we will crawl this URL and look for the Buy button. It must be on the source of the page and not added dynamically with Javascript. Important notice: For users with a single-page website, the data-item-url field should be filled with only your basic domain name, such as www.example.com, or with a simple slash bar /.

Required
data-item-description

Use this attribute if you want to provide a short description of your product that your customers will see in the cart and during checkout.

Optional
data-item-image

Use this if you want to provide your customers with a small thumbnail of your product in the cart. This must be an absolute URL. As this attribute is optional, if you do not provide it, no image will be displayed.

Please note that the format is 50x50 in our default template.

Optional
data-item-categories

Use this option to specify the categories this product belongs to. You can specify multiple categories splitted by a comma. Example: data-item-categories="cat1, cat2, cat3"

Optional
data-item-weight

This attribute is required only if you are using shipping rates from one of our supported shipping providers. Every provider requires to provide the "package" weight in order to estimate the cost.

Please note that we are using grams as weight units.

Conditionally required
data-item-width

Use this attribute to specify item width. The item dimensions will be used when using integrated shipping providers and will be send to the Shipping Webhooks API if defined.

Please note that we are using centimeters as dimension unit and this attribute is required to use Australia Post.

Conditionally required
data-item-length

Use this attribute to specify item length. The item dimensions will be used when using integrated shipping providers and will be send to the Shipping Webhooks API if defined.

Please note that we are using centimeters as dimension unit and this attribute is required to use Australia Post.

Conditionally required
data-item-height

Use this attribute to specify item height. The item dimensions will be used when using integrated shipping providers and will be send to the Shipping Webhooks API if defined.

Please note that we are using centimeters as dimension unit and this attribute is required to use Australia Post.

Conditionally required
data-item-max-quantity

Use this attribute if you want to set a maximum allowed quantity of your product. For example, if you set it to 5, your customers will not be able to add more than 5 occurrences of your product in their cart. This comes in handy if you have limited stocks of a product or if you wish to limit the quantity per customer. A good practice would be to set it to the quantity you have available in your inventory.

Optional
data-item-min-quantity

Use this attribute if you want to set the minimum allowed quantity for your product. For instance, let's say you set this attribute to 3 for your product A. When your customer adds product A to his cart for the first time, the quantity will be automatically set to 3, not 1. Once in the cart, the product's quantity will increase and decrease by one as usual when using the - & + signs. However, if you decrease its quantity lower than the minimal allowed quantity set, the product will be removed from the cart. Here, for instance, if you were to decrease product A's quantity in-cart under 3, product A would disappear from the cart.

Optional
data-item-stackable

When you set this attribute to false, adding the same product to the cart will result in two distinct items in the cart, instead of simply increasing the quantity. For instance, when your customers click twice on the same Buy button, they will have two entries of the product in their cart, instead of having a quantity of 2 for the same product.

This is useful when you have a product with specific custom fields requiring different information for each occurrence. For instance, if you’re allowing your customer to engrave a message on your product, this will allow them to specify a different message for every item.

When not defined, this property is considered to be true by default.

Optional
data-item-quantity-step

By default the quantity of an item increments by 1. Use this attribute if you want to override it. For instance, if you set it to 2, the quantity will increment from 2 to 4 to 6.

Optional
data-item-shippable

When you set this attribute to false, the product will be flagged as an item that you do not ship. All shipping options will be removed from the cart if you only have non-shippable items in it. As soon as you add an item that is shippable, the shipping tabs will show up.

Optional
data-item-quantity Use this option when you want to set a default quantity for the item that you are about to add. You can also update this value with Javascript if needed and Snipcart will automatically use the updated value. It can be useful when you want your customers to choose the quantity directly on your website. Optional
data-item-taxable

Set this option to false when you want to exclude this particular item from the taxes calculation. The default value is true.

Optional
data-item-taxes

Using this option, you can define which taxes will be applied on this particular item. It might be useful when you have some products that are exempted from a specific tax. The usage is data-item-taxes="TPS|TVQ". Each taxes are separated by a |. The value must be the exact same name that is defined in the dashboard or you can use the unique ID that is generated, you can find this ID in the URL when editing an existing tax. Note that the unique IDs will not be the same in Live and Test modes.

Optional
data-item-has-taxes-included

Set this flag to true if the taxes you defined are included in your product prices.

Optional
data-item-metadata

Using this option, you can define metadata on the item. The value must be a valid JSON object. Example usage: data-item-metadata='{"key": "value"}'.

Optional
data-item-file-guid

Use this attribute if your product is related to a digital good uploaded via our dashboard. You will find the file guid in the dashboard once the digital good is created.

Optional

If you think you require an additional attribute that cannot be expressed with the existing ones, simply let us know and we’ll make sure to help you out!