Help Center

Help Center

Search our help center for quick answers.

How do I add the Storefront Cart Button to my website?

1 minute read

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:
<div data-pl-cart-button></div>


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.
HEX Example:
<div data-pl-cart-button data-pl-color="#000000"></div>
RGB Example:
<div data-pl-cart-button data-pl-color="rgb(0,0,0)"></div>
RGBA Example:
<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:
<div data-pl-cart-toggle></div>

To display the total number of items the customer has in the Cart, you can use the data-pl-cart-total attribute. Example:
<div data-pl-cart-total></div>

You can use these two attributes together to make your own button similar to the one we’ve created above. Example:

<div data-pl-cart-toggle>
  <span data-pl-cart-total></span>
</div>

The cart button will look like this:
screen-shot-2018-01-17-at-12-21-49-pm

Was this article helpful?

3 found this helpful.

Can't find your answer?

We want to answer all of your questions. Get in touch and we’ll get back to you as soon as we can. Email us.

Policy questions?

Take a look at our Terms of Service and review our Privacy Policy.