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 your product's unique ID. If you are using a CMS like Wordpress or Umbraco, we suggest using the unique ID from your database. There are no constraints on Snipcart's side; you can use integers, GUID, strings, etc.

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

Required
data-item-name

This is another mandatory attribute; it simply is 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 a decimal number. Do not format the number you provide 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 [this guide](/configuration/multi-currency) 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 **/**.

Make sure that you configured your domains correctly in the dashboard (protocols and domains). Otherwise, you might encounter validation issues. Please refer to this section to understand how our validation process works.

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 the "package" weight 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 sent 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 sent 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 sent 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 tab 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 same name that is defined in the dashboard. You can also use the unique ID that is generated by your tax rule, available in the URL when editing a tax in the dashboard. 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
data-item-payment-interval

Use this attribute if the item is a subscription plan, you can set the frequency of the payments using it. Possible values are: `Day`, `Week`, `Month` or `Year`.

Optional
data-item-payment-interval-count

When defining a subscription plan, you can use this attribute to set the interval count, for instance, if `data-item-payment-interval="Month"` and `data-item-payment-interval-count="2"`, a payment will be taken every 2 months.

Optional
data-item-payment-trial

Use this attribute if you want to offer a trial period to the customers purchasing the subscription plan. The value specified is the number of days the trial will last.

Optional
data-item-recurring-shipping

If you are selling a subscription plan and have shipping costs but you don't want to charge these fees on every invoice, only on the first, then set it to false. By default, this value is `true`.

Optional
data-item-cancellation-action

When defining a subscription plan, you can specify the behaviour upon cancellation. By default, the subscription gets cancelled immediately, and no refunds are sent out. Adding the `PartialRefundLastPayment` attribute will give a refund for the unused period of the subscription. `CancelAtCurrentCycleEnd` will terminate the subscription at the end of the current billing cycle.

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

Optional
data-item-pausing-action

When defining a subscription plan, you can determine the behaviour when pausing a subscription. By default, pausing a subscription will prevent any further payments and the user can resume at any given time without affecting the billing cycle. By adding the `KeepActiveUntilEndOfBillingCycle` attribute, the subscription will stay active and get paused at the end of its current billing cycle. `PauseAndRealignBillingCycleOnResume` will pause the billing cycle immediately, and realign the billing cycle on resume depending on how much unused time there was left at pause.

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

Optional

Was this article helpful?