Snipcart
Output Snipcart-specific HTML elements like a product button or the total number of items in the cart.
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.{{ snipcart:buy }}
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.
You can manually define any accepted attribute directly on the tag. You can also use this to override the values of automatically generated attributes.
{{ snipcart:buy id="{{ increment }}" name="{{ some_variable }}" }}
You can also fully customize your buy buttons with your own markup. Use this tag to get the product's data attributes:
<button {{ snipcart:attributes }} class="snipcart-add-item button">
Add to cart
</button>
Don't forget to add the snipcart-add-item class to your custom button.
A Snipcart cart button.
{{ snipcart:cart }}
A Snipcart sign-in button.
{{ snipcart:signin }}
The total number of items in the cart.
{{ snipcart:items }}
The total price of items in the cart.
{{ snipcart:price }}
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" }}
Last modified 4h ago