Penni Cart Docs
  • Introduction
    • Quick Connect
  • Attributes
    • Navigation
    • Product Page
    • Cart
    • Checkout
    • Bag
  • Components
    • Product Page
    • Bag
    • Cart
    • Checkout
  • Templates
    • Product Page
    • Bag Templates
    • Cart Templates
    • Checkout Templates
  • Managing Your Store
    • Dashboard
      • Payments
      • Coupons
      • Tax
      • Shipping
      • Account
      • Invoice
    • Payment Gateways
      • Stripe
      • Elavon
      • Authorize.net
  • Zapier Integration
Powered by GitBook
On this page

Was this helpful?

  1. Attributes

Product Page

Understanding the attributes needed to capture products into the cart.

Please note that this document is still Work in Progress. It might be updated, revised, or changed entirely in the near future.

All attribute names will start with pc for the "Name" inside the Webflow Designer

Name
Value
Description
Required

Product name

Product price

Captures the quantity

Define form element to capture data to bag

Define a button that triggers submit action

Product SKU

Product image

Define product tax type (Product or Service)

Captures custom product option

Parent element that is hidden on live link

Identify collection item

Captures variant selector 1

Captures variant selector 2

Variant 1 product name

Variant 2 product name

Variant product price

Variant product SKU

Variant product inventory

Variant product image

Penni Cart Attributes

  • pc="form" needs to be placed on Webflow's Form element not Form Block

  • Penni Cart currently supports two default values for pc="tax-type", 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 pc="v-item" to set your collection item and establishing values with pc="v1-name" or pc="v2-name", pc="v-price", pc="v-sku", pc="v-stock", and pc="v-image".

  • Use pc="v-wrapper" to hide the parent wrapper when viewing your site's published link.

  • pc="v1-select" & pc="v2-select" uses the select field's name as the label when added to cart.

PreviousNavigationNextCart

Last updated 1 month ago

Was this helpful?

pc
product-name
pc
product-price
pc
product-quantity
pc
form
pc
add-btn
pc
product-sku
pc
product-image
pc
tax-type
pc-custom
your-custom-name
pc
v-wrapper
pc
v-item
pc
v1-select
pc
v2-select
pc
v1-name
pc
v2-name
pc
v-price
pc
v-sku
pc
v-stock
pc
v-image