# Product Page

{% hint style="warning" %}
Please note that this document is still <mark style="color:purple;">**Work in Progress**</mark><mark style="color:purple;">.</mark> It might be updated, revised, or changed entirely in the near future.&#x20;
{% endhint %}

{% hint style="info" %}
All attribute names will start with <mark style="color:purple;">**pc**</mark> for the "**Name**" inside the Webflow Designer
{% endhint %}

<table data-full-width="true"><thead><tr><th>Name</th><th width="273">Value</th><th>Description</th><th width="100" data-type="checkbox">Required</th></tr></thead><tbody><tr><td><pre><code>pc
</code></pre></td><td><pre><code>product-name
</code></pre></td><td>Product name</td><td>true</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>product-price
</code></pre></td><td>Product price</td><td>true</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>product-quantity
</code></pre></td><td>Captures the quantity</td><td>true</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>form
</code></pre></td><td>Define form element to capture data to bag</td><td>true</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>add-btn
</code></pre></td><td>Define a button that triggers submit action</td><td>true</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>product-sku
</code></pre></td><td>Product SKU</td><td>false</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>product-image
</code></pre></td><td>Product image</td><td>false</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>tax-type
</code></pre></td><td>Define product tax type (Product or Service)</td><td>false</td></tr><tr><td><pre><code>pc-custom
</code></pre></td><td><pre><code>your-custom-name
</code></pre></td><td>Captures custom product option</td><td>false</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>v-wrapper
</code></pre></td><td>Parent element that is hidden on live link</td><td>false</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>v-item
</code></pre></td><td>Identify collection item</td><td>false</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>v1-select
</code></pre></td><td>Captures variant selector 1</td><td>false</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>v2-select
</code></pre></td><td>Captures variant selector 2</td><td>false</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>v1-name
</code></pre></td><td>Variant 1 product name</td><td>false</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>v2-name
</code></pre></td><td>Variant 2 product name</td><td>false</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>v-price
</code></pre></td><td>Variant product price</td><td>false</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>v-sku
</code></pre></td><td>Variant product SKU</td><td>false</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>v-stock
</code></pre></td><td>Variant product inventory</td><td>false</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>v-image
</code></pre></td><td>Variant product image</td><td>false</td></tr></tbody></table>

### Penni Cart Attributes

* <mark style="color:purple;">`pc="form"`</mark> needs to be placed on Webflow's Form element not Form Block
* Penni Cart currently supports two default values for <mark style="color:purple;">`pc="tax-type"`</mark>, Product & Service that can used within Webflow CMS Collection settings.
* To display variants you'll need to establish the values that will auto-populate a select field, using <mark style="color:purple;">`pc="v-item"`</mark> to set your collection item and establishing values with <mark style="color:purple;">`pc="v1-name"`</mark> or <mark style="color:purple;">`pc="v2-name"`</mark>, <mark style="color:purple;">`pc="v-price"`</mark>, <mark style="color:purple;">`pc="v-sku"`</mark>, <mark style="color:purple;">`pc="v-stock"`</mark>, and <mark style="color:purple;">`pc="v-image"`</mark>.
* Use <mark style="color:purple;">`pc="v-wrapper"`</mark> to hide the parent wrapper when viewing your site's published link.
* <mark style="color:purple;">`pc="v1-select"`</mark> & <mark style="color:purple;">`pc="v2-select"`</mark> uses the select field's name as the label when added to cart.&#x20;