> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uselooop.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Product Card

> A div that contains a product image, price, quantity input, and add to cart button

The Product Card is the component that contains the main elements of a product, such as the image, price, quantity input, and add to cart button. <br />
It is used to dictate which Shopify product is linked to the current div/section. <br /> <br />
This component is used by Looop to find the add-to-cart  button, quantity input, options selector, and subscription selector related to the product.

<Frame>
  <img src="https://mintcdn.com/thinddev/WJpokBS_R24FjARc/images/productcard.jpg?fit=max&auto=format&n=WJpokBS_R24FjARc&q=85&s=f169e535310fd3f40c0384fe84c34718" width="1143" height="488" data-path="images/productcard.jpg" />
</Frame>

Attributes:

```html theme={null}
looop=productcard
```

```html theme={null}
looopid=LOOOP_ID_FIELD_OF_PRODUCT_CMS
```

```html theme={null}
lp-default-variant=LOOOP_ID_OF_DEFAULT_VARIANT
```

The value of `looopid` is the Shopify ID of the product. This can be assessed using the dynamic value for the custom attribute in element setting in Webflow designer.

<Note>
  On **product page** we will use the section as product card, and will place all ecommerce related elements inside the product card.<br />
  For **collection lists** we will use the Webflow Collection Item as the product card, and will place all ecommerce related elements inside the product card.
</Note>

<Warning>
  Without the `looopid` attribute, the product card will not be linked to a product and will not be able to add the product to cart of fetch options and subscription plans for the product.
</Warning>