# Snipcart

## Buy Button

This tag creates a Snipcart product buy button with all the `data-item-*` attributes according to the product's content. This is arguably the most important tag as it does all the heavy lifting for you. Learn more about [product attributes](https://docs.snipcart.com/v3/setup/products).

```html
{{ snipcart:buy }}
```

{% hint style="info" %}
The automatic generation of attributes only works on a product page or inside a product collection loop. If you use the tag in any other place, you must manually define each attribute.
{% endhint %}

### Manually Defining Attributes

You can manually define any accepted attribute directly on the tag. You can also use this to override the values of automatically generated attributes.

```html
{{ snipcart:buy id="{{ increment }}" name="{{ some_variable }}" }}
```

### Customize Button

You can also fully customize your buy buttons with your own markup. Use this tag to get the product's data attributes:

```html
<button {{ snipcart:attributes }} class="snipcart-add-item button">
    Add to cart
</button>
```

{% hint style="info" %}
Don't forget to add the **snipcart-add-item** class to your custom button.
{% endhint %}

## Cart Button

A Snipcart cart button.

```
{{ snipcart:cart }}
```

## Sign-in Button

A Snipcart sign-in button.

```
{{ snipcart:signin }}
```

## Total Items

The total number of items in the cart.

```
{{ snipcart:items }}
```

## Total Price

The total price of items in the cart.

```
{{ snipcart:price }}
```

## Parameters

There are a couple of parameters you may use on the tags.

| Parameter | Description                     | Supported By                          |
| --------- | ------------------------------- | ------------------------------------- |
| `class`   | Add classes to the HTML element | `buy` `cart` `signin` `items` `price` |
| `text`    | Override the default text       | `buy` `cart` `signin`                 |

**Example:** Add some classes to the cart button and override the default text.

```
{{ snipcart:cart class="p-2 bg-gray-100" text="Checkout" }}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://snipcart.michaelaerni.ch/templating/tags/snipcart.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.