User interface

Integrate e-commerce user interface into your website

Add to cart button

To add an E-Commerce product to the shopping cart, add this class pelcro-add-to-cart-button to the button as shown below. The data-sku-id attribute will be used to specify the SKU ID of the e-commerce product.

<button class="pelcro-add-to-cart-button" data-sku-id="2">Add to cart</button>

Immediately purchase an SKU button

To immediately purchase an e-commerce SKU, add this class pelcro-purchase-button to the button as shown below. The data-sku-id attribute will be used to specify the SKU ID of the e-commerce product.

<button class="pelcro-purchase-button" data-sku-id="4">Purchase Product with ID 4</button>

View cart button

To view all items in the cart, add this class pelcro-cart-button to the button.

<button class="pelcro-cart-button">Cart</button>

E-commerce shop

To list all the SKUs available on the platform, all you have to do is add an HTML div as shown below. This would inject all the SKUs into this HTML div.

<div id=“pelcro-shop”></div>