Snipcart Plugin Documentation

# Product Details

Add to Cart buttons are critical to Snipcart because they define products behind the scenes. If you've used the Product Details field, there's a getBuyNowButton() method that will surely save you some time. By default it will...

  • Include a product's SKU, name, price, URL, quantity (of 1), and taxable+shippable status.
  • Include weight and dimensions (in grams and centimeters) if the item is shippable.

It will also simplify the process of adding custom variations (color, size, etc.) whether or not they affect the product price.

TIP

Working with your own markup? The Snipcart plugin's internal Twig template (opens new window) may provide a helpful starting point.

# Buy Button

Simplest form.

{# Buy Now #}
{{ entry.productDetails.getBuyNowButton() }}

The default markup will look something like this without any customization:

<a href="#"
    class="snipcart-add-item"
    data-item-id="to-slay-a-mockingbird"
    data-item-name="To Slay a Mockingbird"
    data-item-price="12.99"
    data-item-url="https://craftcms.dev/products/to-slay-mockingbird"
    data-item-quantity="1"
    data-item-taxable="false"
    data-item-shippable="true"
    data-item-width="13"
    data-item-length="21"
    data-item-height="3"
    data-item-weight="3"
>Buy Now</a>

# Buy Button + Simple Options

Optionally supply custom options that don't affect pricing.

{# Buy Now button with custom options #}
{{ entry.productDetails.getBuyNowButton({
    customOptions: [{
        name: 'Size',
        required: true,
        options: [ 'Small', 'Medium', 'Large' ]
    }]
}) }}

TIP

While you can hardcode these values just like the examples, they could just as well come from another Entry field, like a Table (opens new window) or a Matrix Block (opens new window) that you've established for product variations. It's up to you!

# Buy Button + Price-Variant Options

Custom options that each adjust the base product price. Each amount can be positive (increasing product price), negative (reducing product price), or zero (not affecting product price).

{{ entry.productDetails.getBuyNowButton({
    customOptions: [{
        name: 'Bling Type',
        required: true,
        options: [
            {
                name: 'Bedazzled',
                price: 0
            },
            {
                name: 'Bronzed',
                price: 25
            },
            {
                name: 'Diamond Studded',
                price: 500
            },
            {
                name: 'Used, Bad Shape',
                price: -50
            }
        ]
    }]
}) }}

# Buy Button + Price Override

If you have a specific need to override the item's price in your template, passing a price property will do exactly that:

{{ entry.productDetails.getBuyNowButton({
    price: 100
}) }}

A key/value JSON array can also be used to define prices in different currencies, provided that you've configured your store (opens new window) to support multiple currencies.

{{ entry.productDetails.getBuyNowButton({
    price: { 'usd': 20, 'cad': 26.84 }
}) }}

# All Options

Property Requires Description
classes array Array of additional class names to be added to the anchor element. Default is ['btn'].

.snipcart-add-item will automatically be added and cannot be removed since it's functionally required.
text string Inner text, which defaults to Buy Now.
target string Anchor target (opens new window).
title string Anchor title (opens new window).
rel string Anchor relationship (opens new window).
quantity integer Initial quantity to be added to the cart. Defaults to 1.
image string URL for a product thumbnail to be used in the cart. The default cart template's image is 50px square.
price decimal or key/value array Price override, or key/value array to define multiple currencies ({ 'usd': 20, 'eur': 17.79 }). Defaults to the price defined in the Product Details field.
additionalProps key/value array Attribute+value pairs for the anchor. Useful for supplying additional product definition (opens new window) details.

# Querying Elements by Product Details

Snipcart 1.3.4 added the ability to query elements by information stored in the Product Details field.

For example, you can grab products entries that have inventory:

{% set availableProducts = craft.entries()
    .section('products')
    .productDetails({ inventory: '> 0' })
    .all() %}

Or get items that are not shippable:

{% set availableProducts = craft.entries()
    .section('products')
    .productDetails({ shippable: false })
    .all() %}

Or all items more than $50 but less than $1,000:

{% set availableProducts = craft.entries()
    .section('products')
    .productDetails({ price: '> 50', price: '< 1000' })
    .all() %}

← Overview →