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 may provide a helpful starting point.

Buy Button

Simplest form.

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

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' ]
    }]
}) | raw }}

TIP

While you can hardcode these values just like the examples, they could just as well come from another Entry field, like a Table or a Matrix Block 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
            }
        ]
    }]
}) | raw }}

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
}) | raw }}

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

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

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.
title string Anchor title.
rel string Anchor relationship.
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 details.