> For the complete documentation index, see [llms.txt](https://docs.b2bridge.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.b2bridge.io/storefront-display/product-card-display.md).

# Product Card display

Product Card allows your customers to start ordering directly from your collection pages (or any pages that Product Card is displayed on).

### How Product Card works:

Product Card replaces your default interface and adds new elements:

* New B2B prices
* Volume pricing and purchase limit (if any)
* Quantity selector
* **Add to cart** button

This allows your customers to quickly add products to their cart.

### How the Product Card looks:

{% columns %}
{% column %}

<figure><img src="https://3178254478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjESAmWxlqUBmvo5xvYcH%2Fuploads%2FwuisxwktHOTVRn7PfbwS%2Fimage.png?alt=media&amp;token=c5e35a46-0971-4012-bfd6-858c5c2dd6c5" alt=""><figcaption><p>B2Bridge Product Card</p></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="https://3178254478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjESAmWxlqUBmvo5xvYcH%2Fuploads%2FbyEF0k7gpEU18FfYrNkG%2Fimage.png?alt=media&amp;token=b2d38c7c-03db-4ea4-83bf-cee309734b8b" alt=""><figcaption><p>Default product card</p></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

***

{% hint style="success" %}

### Need Help?

If you have questions or run into issues while using any feature, we’re here to help.

* 💬 **Start a** [**Live Chat** with our support team](https://go.crisp.chat/chat/embed/?website_id=a59f354c-f51f-4f84-ae9a-c0e8dd69d2e5) directly from your B2Bridge dashboard.
* 📧 **Email us at** [**support@b2bridge.io**](mailto:support@b2bridge.io) and we’ll get back to you as soon as possible.
  {% endhint %}