How do I add the Storefront Cart Button to my website?
We’ve also built a handy Cart button you can easily drop into your website. This button displays the total number of items your customer has in the Storefront Cart and will open the Cart when tapped/clicked.
Adding the button to your website is easy. All you need to do is add the
data-pl-cart-button attribute to any HTML element on your page. That’s it! The button will automatically render inside the HTML element. Example:
Customizing the button
You can change the color of the buttons simply by adding the
data-pl-color attribute and setting it’s value to be the color of your choice. You can set a HEX, RGB or RGBGA color value.
<div data-pl-cart-button data-pl-color="#000000"></div>
<div data-pl-cart-button data-pl-color="rgb(0,0,0)"></div>
<div data-pl-cart-button data-pl-color="rgba(0,0,0,0.5)"></div>
If you’d like to design your own button, you can do that very easily too. You can add the
data-pl-cart-toggle attribute to any HTML element. Doing so will open/close the Cart whenever that element is tapped/clicked. Example:
To display the total number of items the customer has in the Cart, you can use the
data-pl-cart-total attribute. Example:
You can use these two attributes together to make your own button similar to the one we’ve created above. Example:
The cart button will look like this: