# Introduction

Penni Cart is an e-commerce product built for Webflow that utilizes CMS infrastructure. Penni Cart works inside the Webflow designer; no external tools are needed.

Penni Cart revolutionizes the way you engage with e-commerce, by perfectly integrating with Webflow to offer a seamless, CMS-driven experience. This unique approach places unparalleled control at your fingertips, aligning your online store's functionality with the aesthetic finesse of Webflow design.

{% hint style="info" %}
**Get Support:** If you ever have any questions or run into any issues along the way, our support team is here to help. Feel free to reach out to us via email, live chat, or phone for assistance. We're committed to helping you succeed with Penni Cart.
{% endhint %}

### <mark style="color:purple;">**Getting Started with Penni Cart:**</mark>

1. [<mark style="color:purple;">**Quick Connect -**</mark> ](/introduction/quick-connect)Setting up your account in minutes&#x20;
2. [<mark style="color:purple;">**Create Your Own Template**</mark>](/components) <mark style="color:purple;">**-**</mark> Dive into unparalleled customization.
3. [<mark style="color:purple;">**Install Penni Cart Templates**</mark>](/templates) <mark style="color:purple;">**-**</mark> Access a library of beautifully designed templates.
4. [<mark style="color:purple;">**Managing Your Dashboard**</mark>](/managing-your-store/dashboard) <mark style="color:purple;">**-**</mark> Gain insights and control over your store's operations.
5. [<mark style="color:purple;">**Connecting Your Payment Processing**</mark>](/managing-your-store/payment-gateways) <mark style="color:purple;">**-**</mark> Seamlessly integrate with leading payment processors.<br>


# Quick Connect

Welcome to Penni Cart's Quick Connect Guide! In just a few steps, you'll have your account up and running, fully integrated with Webflow. Here's how to get started:

{% embed url="<https://drive.google.com/file/d/1u5Ys0NhDMTtG3CCCJV1cRmee5ETFcw2K/view?usp=sharing>" %}
Quick Connect Walkthrough
{% endembed %}

### <mark style="color:purple;">1. Create Your Account</mark>

Start by creating your account on our [website](https://dashboard.pennicart.io/signup). You'll need:

* An Email
* A strong password (minimum 10 characters, with at least one number, one lowercase letter, and one uppercase letter).

### <mark style="color:purple;">2. Fill Out Account Details</mark>

Next, provide some details about your store such as location, currency, and industry. This helps us tailor your Penni Cart experience.

### <mark style="color:purple;">3. Connect Your Webflow Project</mark>

Connect your Webflow project (you'll be prompted to log in if you're not already). Then, select the project you want to link with Penni Cart. A Webflow account is required for this step.

### <mark style="color:purple;">4. Name and Sync Your Project</mark>

After linking your Webflow account and choosing your project, it's time to Name and Sync your project. You'll know the process is successful when you see a green checkmark indicating <mark style="color:green;">"✅ Website Synchronized."</mark>

### <mark style="color:purple;">5. Confirm Your Package</mark>

Choose the Penni Cart package that suits your needs. If the selected package is paid, you'll be asked to enter payment details. If you opt for the free plan, you can skip this step.

### <mark style="color:purple;">6. Launch Penni Cart in Webflow</mark>

Head over to your Webflow project and find Penni Cart under "Apps." Click "Launch," and the system will begin to automatically add the Cart Page, Bag Page, and Checkout Page to your project.

### <mark style="color:purple;">7. Explore Your New Dashboard & Penni Cart App</mark>

You're all set! Dive into your Penni Cart dashboard to manage your store’s essentials like shipping, coupons, and invoices. Within Webflow, you'll find the Penni Cart app where your e-commerce creation journey begins.&#x20;

\
And there you go! You've successfully set up Penni Cart with your Webflow project. Enjoy crafting a unique shopping experience that resonates with your brand and delights your customers.

<br>


# Attributes

Use Penni Cart attributes to connect and convert your Webflow elements into a functional store.

### <mark style="color:purple;">What is an attribute?</mark>

Attributes are custom identifiers used to help select elements through custom code. It's non-disruptive and easy to manage.

In general, Penni Cart attributes corresponds to the native shopping features on your Webflow site, all attribute names will start as <mark style="color:purple;">`pc`</mark>.

### <mark style="color:purple;">Sync your bag</mark>

Any changes made to the bag requires an **additional** step aside from publishing your changes on Webflow; to sync your bag on the Penni Cart app via the publish button found on either the **Templates** or **Components** of the app.&#x20;

{% content-ref url="/pages/qs6HRx4TSgeOC5ULaI7J" %}
[Product Page](/attributes/product-page)
{% endcontent-ref %}

{% content-ref url="/pages/npOPnmbK9Kn0CwDGH2bn" %}
[Cart](/attributes/cart)
{% endcontent-ref %}

{% content-ref url="/pages/UMX8iSUnHcd1d3x3Dfut" %}
[Checkout](/attributes/checkout)
{% endcontent-ref %}

{% content-ref url="/pages/wlDFK25y5Limd0OU7KdB" %}
[Bag](/attributes/bag)
{% endcontent-ref %}

### <mark style="color:purple;">Having trouble?</mark>

Feel free to reach out to us at any time, please reach out to <hello@pennicart.io> and our team will be more than happy to offer support and guidance no matter where you are in the Penni Cart journey.


# Navigation

Understanding the attributes needed to display the bag in the navigation.

{% 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 %}

### Before you start

In order to properly trigger the bag in the navigation, the bag component needs to be designed and published to Penni Cart's backend. To do this, follow the [steps](/attributes/bag) from here before moving foward.

<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>bag
</code></pre></td><td>Parent element that nest the entire design</td><td>true</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>bag-count
</code></pre></td><td>Displays quantity of product in the bag</td><td>true</td></tr></tbody></table>


# Product Page

Understanding the attributes needed to capture products into the cart.

{% 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;


# Cart

Understanding the attributes needed to convert your design into cart 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" %}
Before starting, please set the parent element that wraps everything with <mark style="color:purple;">`pc="cart`</mark> if you are starting from scratch.
{% endhint %}

<figure><img src="https://3075810000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fk0ZZSLFkvC65RrA50ZiI%2Fuploads%2FIZyoN5PgoAIBmDDxFXJy%2Fpc-docs-cart01.svg?alt=media&amp;token=f1d501e6-486b-4f20-a241-00b8d8d92da8" alt=""><figcaption></figcaption></figure>

<table data-full-width="true"><thead><tr><th>Name</th><th width="281">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>cart
</code></pre></td><td>Initialize the Cart page</td><td>true</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>product-list
</code></pre></td><td>Parent element for all cart items</td><td>true</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>product-item
</code></pre></td><td>Identifies the cart item structure to render dynamically</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>remove-product
</code></pre></td><td>Element to remove cart item</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-custom
</code></pre></td><td>Display list of product options</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>summary-subtotal
</code></pre></td><td>Display store subtotal</td><td>true</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>summary-delivery
</code></pre></td><td>Display store shipping rate</td><td>true</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>summary-tax
</code></pre></td><td>Display store taxes</td><td>true</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>summary-total
</code></pre></td><td>Display store total</td><td>true</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>view-checkout
</code></pre></td><td>Button to proceed to the checkout page</td><td>false</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>summary-discount-wrapper
</code></pre></td><td>Parent element for discount rate</td><td>true</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>summary-discount-label
</code></pre></td><td>Element to nest applied discounts</td><td>true</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>summary-discount-value
</code></pre></td><td>Display store discount rate</td><td>true</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>discount-wrapper
</code></pre></td><td>Parent element for coupon input elements</td><td>false</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>discount-form
</code></pre></td><td>Define form block for input validation</td><td>false</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>discount-submit
</code></pre></td><td>Define button that triggers coupon submission</td><td>false</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>toast-discount-ok
</code></pre></td><td>Element for coupon success</td><td>false</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>toast-discount-error
</code></pre></td><td>Element for coupon failure</td><td>false</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>toast-discount-code
</code></pre></td><td>Child element within coupon element to display valid discount code</td><td>false</td></tr></tbody></table>


# Checkout

Understanding the attributes needed to capture shipping/billing information and process payment.

{% 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" %}
Before starting, please set the parent element that wraps everything with <mark style="color:purple;">`pc="checkout`</mark> if you are starting from scratch.
{% endhint %}

<figure><img src="https://3075810000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fk0ZZSLFkvC65RrA50ZiI%2Fuploads%2Fz4IWEbLC343Y4oKDSv6s%2Fpc-docs-checkout02.svg?alt=media&amp;token=a41314c9-9fa6-48c6-b30b-830cce02dd75" alt=""><figcaption></figcaption></figure>

Since the Checkout page involves more nuisance cases to be mindful of, we've added additional attributes to account for unique scenarios like (multi-step form, hide specific elements after an successful payment, etc). Below will highlight and guide you through the full process to convert your page into a fully-functional checkout page.

<figure><img src="https://3075810000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fk0ZZSLFkvC65RrA50ZiI%2Fuploads%2FusBCaLDUSgzIhMEipAnd%2Fpc-docs-checkout-example02.jpg?alt=media&amp;token=6c9e6841-6742-4eb0-82c2-be52d6510280" alt=""><figcaption><p>Showcasing the group of attributes to achieve an accordion and hide functionality</p></figcaption></figure>

<figure><img src="https://3075810000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fk0ZZSLFkvC65RrA50ZiI%2Fuploads%2FkidtMY5jki0RytwRtIYC%2Fpc-docs-checkout-example03.jpg?alt=media&amp;token=8a4447c4-caa7-40c4-b1d8-579d908b2363" alt=""><figcaption><p>Element with accordion-heading attribute</p></figcaption></figure>

<table data-full-width="true"><thead><tr><th>Name</th><th>Value</th><th>Description</th><th width="100" data-type="checkbox"></th></tr></thead><tbody><tr><td><pre><code>pc-acc
</code></pre></td><td><pre><code>item
</code></pre></td><td>Define parent element to function as an accordion</td><td>true</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>accordion-heading
</code></pre></td><td>Define the label for the accordion</td><td>true</td></tr><tr><td><pre><code>pc-hide
</code></pre></td><td></td><td>Hide element after an successful checkout action</td><td>false</td></tr></tbody></table>

The checkout page is built upon three mandatory attributes that powers the final step of the eCommerce experience, these are **(shipping/billing, payment, & order status)**. These are the overarching elements that wraps all your inputs to validate and equipped for a transaction.

<figure><img src="https://3075810000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fk0ZZSLFkvC65RrA50ZiI%2Fuploads%2FihW6mGGRerhM4XshBbcB%2Fpc-docs-checkout-example03.svg?alt=media&amp;token=21b5f4f9-fa3d-46a4-a13b-ba6191b79453" alt=""><figcaption><p>Webflow structure of the separate blocks (shipping/billing, payment, &#x26; status)</p></figcaption></figure>

<table data-full-width="true"><thead><tr><th>Name</th><th>Value</th><th>Description</th><th width="100" data-type="checkbox">Required</th></tr></thead><tbody><tr><td><pre><code>pc-step
</code></pre></td><td><pre><code>shipping-billing
</code></pre></td><td>Parent element to capture and validate shipping and/or billing information</td><td>true</td></tr><tr><td><pre><code>pc-step
</code></pre></td><td><pre><code>payment
</code></pre></td><td>Parent element to capture and insert the chosen payment processor fields</td><td>true</td></tr><tr><td><pre><code>pc-step
</code></pre></td><td><pre><code>status
</code></pre></td><td>Parent element to display the status of the transaction once submitted</td><td>true</td></tr></tbody></table>

<table data-full-width="true"><thead><tr><th>Name</th><th>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>shipping-methods-container
</code></pre></td><td>Parent element for shipping options</td><td>true</td></tr><tr><td></td><td><pre><code>shipping-method
</code></pre></td><td>Define element for a shipping option <mark style="color:purple;">(radio wrapper*)</mark></td><td>true</td></tr><tr><td></td><td><pre><code>shipping-radio
</code></pre></td><td>Element to select a shipping option <mark style="color:purple;">(radio button*)</mark></td><td>true</td></tr><tr><td></td><td><pre><code>shipping-label
</code></pre></td><td>Element to display shipping option name <mark style="color:purple;">(radio label*)</mark></td><td>true</td></tr><tr><td></td><td><pre><code>add-to-cart
</code></pre></td><td>Define button that triggers submit action</td><td>true</td></tr><tr><td></td><td><pre><code>billing_name
</code></pre></td><td>Billing first name</td><td>true</td></tr><tr><td></td><td><pre><code>billing_lastname
</code></pre></td><td>Billing last name</td><td>true</td></tr><tr><td></td><td><pre><code>billing_address
</code></pre></td><td>Billing address line 1</td><td>true</td></tr><tr><td></td><td><pre><code>billing_address2
</code></pre></td><td>Billing address line 2</td><td>true</td></tr><tr><td></td><td><pre><code>billing_zip_code
</code></pre></td><td>Billing zip code</td><td>true</td></tr><tr><td></td><td><pre><code>billing_city
</code></pre></td><td>Billing city</td><td>true</td></tr><tr><td></td><td><pre><code>billing_country
</code></pre></td><td>Billing city <mark style="color:purple;">(select*)</mark></td><td>true</td></tr><tr><td></td><td><pre><code>billing_state
</code></pre></td><td>Billing state/province <mark style="color:purple;">(select*)</mark></td><td>true</td></tr><tr><td></td><td><pre><code>same-shipping-billing
</code></pre></td><td>Define shipping is same as billing <mark style="color:purple;">(checkbox button*)</mark></td><td>true</td></tr><tr><td></td><td><pre><code>name
</code></pre></td><td>Shipping first name</td><td>false</td></tr><tr><td></td><td><pre><code>lastname
</code></pre></td><td>Shipping last name</td><td>false</td></tr><tr><td></td><td><pre><code>address
</code></pre></td><td>Shipping address line 1</td><td>false</td></tr><tr><td></td><td><pre><code>address2
</code></pre></td><td>Shipping address line 2</td><td>false</td></tr><tr><td></td><td><pre><code>zip_code
</code></pre></td><td>Shipping zip code</td><td>false</td></tr><tr><td></td><td><pre><code>city
</code></pre></td><td>Shipping city</td><td>false</td></tr><tr><td></td><td><pre><code>country
</code></pre></td><td>Shipping city <mark style="color:purple;">(select*)</mark></td><td>false</td></tr><tr><td></td><td><pre><code>state
</code></pre></td><td>Shipping state/province <mark style="color:purple;">(select*)</mark></td><td>false</td></tr><tr><td></td><td><pre><code>email
</code></pre></td><td>Capture customer email</td><td>false</td></tr><tr><td></td><td><pre><code>phone
</code></pre></td><td>Capture customer phone</td><td>false</td></tr><tr><td></td><td><pre><code>check_terms
</code></pre></td><td>Define element for consent</td><td>true</td></tr><tr><td></td><td><pre><code>accordion-button
</code></pre></td><td>Define button to proceed to next steps in checkout</td><td>true</td></tr><tr><td></td><td><pre><code>checkout-payment-form-step
</code></pre></td><td>Define payment form to inset chosen payment gateway</td><td>true</td></tr><tr><td></td><td><pre><code>card-name
</code></pre></td><td>Payment name on card</td><td>true</td></tr><tr><td></td><td><pre><code>card-number
</code></pre></td><td>Payment card number</td><td>true</td></tr><tr><td></td><td><pre><code>card-expiration
</code></pre></td><td>Payment card expiration</td><td>true</td></tr><tr><td></td><td><pre><code>card-cvv
</code></pre></td><td>Payment card cvv</td><td>true</td></tr><tr><td></td><td><pre><code>payment-button
</code></pre></td><td>Define button to submit card details to payment gateway</td><td>true</td></tr><tr><td></td><td><pre><code>order-status-title
</code></pre></td><td>Element to display transaction status after submitting</td><td>true</td></tr><tr><td></td><td><pre><code>order-status-message
</code></pre></td><td>Element to display status message</td><td>true</td></tr><tr><td></td><td><pre><code>order-status-back-button
</code></pre></td><td>Define a button to go back to the  homepage</td><td>true</td></tr></tbody></table>

You'll notice from screenshots above that an summary section exists, these attributes are the consistent across each page and can be reused here as well. If you would like to view each, please go to the previous step or [here](/attributes/cart).


# Bag

Understanding the attributes needed to display your products throughout the website.

{% 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 %}

<figure><img src="https://3075810000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fk0ZZSLFkvC65RrA50ZiI%2Fuploads%2FqOMASt1D5D2rDHQHavsX%2Fpc-docs-bag01.svg?alt=media&amp;token=24318295-94db-4c37-905a-419874772a16" alt=""><figcaption></figcaption></figure>

Any changes made to the bag requires an **additional** step aside from publishing your changes on Webflow; this is to sync and overwrite the bag stored in the backend of Penni Cart.

To do this, simply navigate to the Webflow Apps panel and launch Penni Cart. From here you'll find a '**Publish**" button on either the **Templates** or **Components** where it'll live under section covering the Bag.

Once everything is all synced to the backend, you can publish the changes on Webflow like usual and view the bag for review.

{% embed url="<https://www.loom.com/share/fef7a662adbe4f0fab25adc6b9abd1d7?sid=f2d29cf1-5a48-4068-be83-cd78587c7bea>" %}

You avoid using your using placeholder text on the <mark style="color:purple;">`bag-title`</mark>, implementing the following attribute will overwrite the text when viewing your design. This will act as the new default state when nothing new is added to the bag.

<table data-full-width="false"><thead><tr><th width="251">Name</th><th width="209">Value</th><th width="274">Description</th></tr></thead><tbody><tr><td><pre><code>data-pc-default
</code></pre></td><td><pre><code>any
</code></pre></td><td>Defines the default text for the bag label</td></tr></tbody></table>

<figure><img src="https://3075810000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fk0ZZSLFkvC65RrA50ZiI%2Fuploads%2FpzdbwiqxL6TbUyG2VFX7%2Fpc-docs-bag02.svg?alt=media&amp;token=86b61a52-fb25-4bc1-83f1-7c71dcf41b52" alt=""><figcaption></figcaption></figure>

<table data-full-width="false"><thead><tr><th width="362">Value</th><th width="274">Description</th><th data-type="checkbox">Required</th></tr></thead><tbody><tr><td><pre><code>bag-background
</code></pre></td><td>Define element for the background of the bag when opened</td><td>true</td></tr><tr><td><pre><code>bag-title
</code></pre></td><td>Element to display text when bag receives a new item or acts as a label</td><td>true</td></tr><tr><td><pre><code>bag-product-list
</code></pre></td><td>Parent element for all bag items to dynamically render</td><td>true</td></tr><tr><td><pre><code>bag-product
</code></pre></td><td>Define a element as the bag item to template from</td><td>true</td></tr><tr><td><pre><code>bag-product-image
</code></pre></td><td>Bag product image</td><td>true</td></tr><tr><td><pre><code>bag-product-name
</code></pre></td><td>Bag product name</td><td>true</td></tr><tr><td><pre><code>bag-product-attributes
</code></pre></td><td>Bag product sku</td><td>false</td></tr><tr><td><pre><code>bag-product-price
</code></pre></td><td>Bag product price</td><td>true</td></tr><tr><td><pre><code>bag-product-quantity
</code></pre></td><td>Bag product quantity</td><td>true</td></tr><tr><td><pre><code>bag-product-remove-button    
</code></pre></td><td>Element to remove the current bag item</td><td>false</td></tr><tr><td><pre><code>bag-view-bag-button
</code></pre></td><td>Define a element to proceed to cart page</td><td>false</td></tr><tr><td><pre><code>bag-checkout-button
</code></pre></td><td>Define a element to proceed to checkout page</td><td>false</td></tr></tbody></table>


# Components

Welcome to the world of endless possibilities with Penni Cart! After setting up Quick Connect, we'll guide you through creating your unique template within Webflow.

### <mark style="color:purple;">Starting Point: Prebuilt Components</mark>

Your journey begins with our prebuilt components. These non-styled, raw building blocks are designed to be your canvas. Each component comes equipped with the necessary attributes and values to ensure seamless integration between Penni Cart and Webflow. This approach significantly accelerates your design process, allowing you to focus on customization without worrying about the technicalities of integration.

### <mark style="color:purple;">Dive Into Customization</mark>

You have complete control over design, function, and layout, transforming the shopping experience for your customers. Match every aspect of your store to your unique vision, from the product page to checkout. Here's how you can customize each key part:

* [<mark style="color:purple;">**Product Page**</mark>](/components/product-page)
* [<mark style="color:purple;">**Cart**</mark> ](/components/bag)
* [<mark style="color:purple;">**Bag**</mark>](/components/cart)
* [<mark style="color:purple;">**Checkout**</mark>](/components/checkout)

### <mark style="color:purple;">Streamlining Your Design Process</mark>

Starting with our prebuilt components not only provides a solid foundation for your template but also guarantees that you're utilizing the correct attributes for flawless Penni Cart functionality. Should you ever remove an element by mistake or wish to tweak a specific component, fear not. You can easily reintegrate the component or consult our documentation for the required attributes.

By leveraging the Penni Cart App within Webflow, you're not just creating a template; you're crafting a shopping revolution. Use our docs, attributes guides, and instructional videos as your resources to turn your e-commerce dreams into reality.

<br>


# Product Page

Use powerful product page components to elevate the potential of your Webflow e-commerce site.

{% hint style="warning" %}
Please note that this section/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 %}

Navigate to the Product Page within the Penni Cart App to begin personalizing your e-commerce experience. This page offers a comprehensive list of both essential and recommended components for your product page. Each component is outlined with corresponding attributes and values to ensure seamless app functionality.

{% embed url="<https://drive.google.com/file/d/1QuCBh2Ufx0EFOuReXvs_eHObdgJ_6Ugo/view?usp=drive_link>" %}
How To Add Attributes
{% endembed %}

### <mark style="color:purple;">Follow These Steps Link Your Product Page</mark>:

1. **Open the Penni Cart App:** Start by navigating to the Product Page within the app. Here, you'll find a grid showcasing all the necessary components for your product page, including required attributes and their values.
2. **Copy and Paste Attributes:** In the Penni Cart App, select the attribute, such as "Product Name," to copy its value. In your Webflow project, navigate to the custom attributes section, entering "Product Name" as the attribute name and pasting the copied value accordingly.
3. **Validate Attributes:** After implementing all the required attributes, use the "Validate Attributes" function. This will check for any issues or missing links, ensuring everything is correctly configured.
4. **Address Feedback:** The app will highlight any areas needing attention or corrections, guiding you towards a fully functional setup.
5. **Complete Setup:** Once all required components are validated, your product page is all set.


# Bag

Use powerful bag components to elevate the potential of your Webflow e-commerce site.

{% hint style="warning" %}
Please note that this section/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 %}

To begin customizing your cart, head over to the 'Components' section within the Penni Cart App and scroll to the 'Cart Page' section. Here, you'll find two primary components to choose from:

* **Pop Up Cart:** A center-aligned pop-up cart for a direct, attention-grabbing shopping experience.
* **Top Right Cart:** A sleek drop-down cart that emerges from the top right corner of your site.

These components are provided as non-styled, foundational blocks, allowing you the freedom to embed them directly into your project's Cart Page (automatically created when you installed the Penni Cart App). Now, as a Webflow connoisseur, it's your turn to inject your brand's unique flair into these elements.

{% embed url="<https://drive.google.com/file/d/1qPm6Lcmk5y5rjfg2y4jNRD4TEpc0npOo/view?usp=drive_link>" %}
How To Add Components
{% endembed %}

### <mark style="color:purple;">**Keys to a Successful Cart Design:**</mark>

* **Responsiveness:** Ensure your cart adapts smoothly across devices for a seamless shopping experience.
* **Preserve Required Attributes:** Our attribute grid below highlights the essential attributes for each component. Be mindful not to remove these to maintain functionality.
* **Brand Alignment:** Tailoring the cart's design to reflect your brand's identity not only elevates the user experience but can also significantly boost engagement and sales.

Dive into styling your cart with confidence, knowing you have the tools and guidance to create a captivating, brand-centric shopping cart.<br>


# Cart

Use powerful Cart components to elevate the potential of your Webflow e-commerce site.

{% hint style="warning" %}
Please note that this section/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 %}

To begin customizing your bag page, head over to the 'Components' section within the Penni Cart App and make your way to the 'Bag Components' segment. This section is dedicated to enriching the shopping bag experience with two crucial components:

* **Products List:** A comprehensive display of all items a customer has added to their cart, providing a clear and concise overview.
* **Order Summary:** Offers a quick snapshot of the order's essential details, including shipping, tax, and subtotal, ensuring customers have all the information they need at a glance.

These components come unstyled, granting you the freedom to design them according to your brand's identity on the Bag Page, which Penni Cart sets up automatically during installation.

{% embed url="<https://drive.google.com/file/d/1qPm6Lcmk5y5rjfg2y4jNRD4TEpc0npOo/view?usp=drive_link>" %}
How To Add Components
{% endembed %}

### <mark style="color:purple;">Edit Product Cart Item</mark>

<figure><img src="https://3075810000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fk0ZZSLFkvC65RrA50ZiI%2Fuploads%2FzY07Ra6wqT9TUirVQLW5%2FGroup%20481998.jpg?alt=media&amp;token=f80c9bed-9d14-4728-9821-fb18da2d6418" alt=""><figcaption></figcaption></figure>

These fields are intentionally left blank (not hidden) to ensure smooth loading of your actual product data. Your encouraged to edit as you normally would in Webflow, although we recommend leaving them blank to prevent loading issues.

* **Image:** *Image Block* - Product image
* **Text - Product Name:** *Text Block* - For your product name&#x20;
* **Text - Attributes:** *Text Block* - Here youll be able to display attributes such as size, color, style, etc
* **Div Block - Price:** *Div Block* - This displays both the quantity indicator and price of your product&#x20;

### <mark style="color:purple;">**Keys to a Successful Bag Page Design:**</mark>

* **Responsiveness:** Ensure your cart adapts smoothly across devices for a seamless shopping experience.
* **Ensure Clarity:** The Products List and Order Summary should be straightforward, fostering a hassle-free checkout experience.
* **Preserve Required Attributes:** Our attribute grid below highlights the essential attributes for each component. Be mindful not to remove these to maintain functionality.
* **Brand Alignment:** Tailoring the cart's design to reflect your brand's identity not only elevates the user experience but can also significantly boost engagement and sales.

Embark on customizing your Bag Page, equipped with the necessary tools for a design that's not only functional but also a true reflection of your brand within your Webflow store.


# Checkout

Use powerful checkout components to elevate the potential of your Webflow e-commerce site.

{% hint style="warning" %}
Please note that this section/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 %}

To begin customizing your checkout page, head over to the 'Components' section within the Penni Cart App and make your way to the 'Checkout Components' segment. This section is dedicated to enriching the final phase of your customers' shopping journey:&#x20;

* **Billing/Shipping:** Where customers can input their billing and shipping information.
* **Order Summary:** Provides a concise overview of the order, including selected items and total cost.
* **Shipping Method:** Allows customers to choose their preferred shipping method.
* **Product List:** Displays a summary of products ready for purchase.
* **Payment:** Integrates with your chosen payment processor, enabling secure transactions.
* **Promo Code:** A field for customers to apply discount codes for savings.

These components are provided in their basic form, ready for you to infuse with your brand’s style. Ensure you are editing the Checkout Page that Penni Cart automatically generates during app installation.

{% embed url="<https://drive.google.com/file/d/1qPm6Lcmk5y5rjfg2y4jNRD4TEpc0npOo/view?usp=drive_link>" %}
How To Add Components
{% endembed %}

### <mark style="color:purple;">**Keys to a Successful Checkout Page Design:**</mark>

* **Responsiveness:** Ensure your cart adapts smoothly across devices for a seamless shopping experience.
* **Preserve Required Attributes:** Our attribute grid below highlights the essential attributes for each component. Be mindful not to remove these to maintain functionality.
* **Brand Alignment:** Tailoring the cart's design to reflect your brand's identity not only elevates the user experience but can also significantly boost engagement and sales.

By customizing these components, you can offer a seamless and efficient checkout process, encapsulating your brand's essence and ensuring a positive end to your customers' shopping experience.


# Templates

Penni Cart offers pre-built templates to create a whole checkout experience within a few minutes.

Explore Penni Cart's collection of well-crafted templates to instantly upgrade your Webflow store. Learn how to deploy our fully responsive, animated and branded templates straight into your project once you finish the Quick Connect setup.

### <mark style="color:purple;">**Explore Our Template Galaxy**</mark>

Unlock an expansive collection tailored for every corner of your e-commerce journey—product pages, carts, bags, and checkouts—through Penni Cart. Crafted by certified Webflow experts, our templates are ready to instantly elevate your online store's look and functionality. For the widest selection, including daily updates and our most popular choices, visit our website at [Penni Cart Templates](https://www.pennicart.io/templates) and explore directly within the Penni Cart App.

### <mark style="color:purple;">**Effortless Integration for Immediate Impact**</mark>

Each Penni Cart template is more than just visually appealing. It comes pre-equipped with all necessary attributes for a smooth Penni Cart and Webflow integration. This ensures that you can launch a stunning, fully functional e-commerce platform swiftly, allowing you to focus on what truly matters—your brand and your customers.

* [<mark style="color:purple;">**Product Page Templates**</mark>](/templates/product-page)
* [<mark style="color:purple;">**Cart Templates**</mark>](/templates/bag-templates)
* [<mark style="color:purple;">**Bag Templates**</mark>](/templates/cart-templates)
* [<mark style="color:purple;">**Checkout Templates**</mark>](/templates/checkout-templates)

### <mark style="color:purple;">**Customization Meets Simplicity**</mark>

While our templates provide a professional and polished starting point, the power of customization remains in your hands. With the ability to adjust every element to perfectly match your brand identity, Penni Cart templates offer a blend of convenience and personalization unmatched in the digital marketplace.

<br>


# Product Page

Penni Cart product page offers pre-built templates to add products instantly to your Webflow e-commerce.

{% hint style="warning" %}
Please note that this section/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 %}

Navigate to the Product Page within the Penni Cart App to begin personalizing your e-commerce experience. This page offers a comprehensive list of both essential and recommended components for your product page. Each component is outlined with corresponding attributes and values to ensure seamless app functionality.

{% embed url="<https://drive.google.com/file/d/1QuCBh2Ufx0EFOuReXvs_eHObdgJ_6Ugo/view?usp=drive_link>" %}
How To Add Attributes
{% endembed %}

### <mark style="color:purple;">Follow These Steps Link Your Product Page</mark>:

1. **Open the Penni Cart App:** Start by navigating to the Product Page within the app. Here, you'll find a grid showcasing all the necessary components for your product page, including required attributes and their values.
2. **Copy and Paste Attributes:** In the Penni Cart App, select the attribute, such as "Product Name," to copy its value. In your Webflow project, navigate to the custom attributes section, entering "Product Name" as the attribute name and pasting the copied value accordingly.
3. **Validate Attributes:** After implementing all the required attributes, use the "Validate Attributes" function. This will check for any issues or missing links, ensuring everything is correctly configured.
4. **Address Feedback:** The app will highlight any areas needing attention or corrections, guiding you towards a fully functional setup.
5. **Complete Setup:** Once all required components are validated, your product page is all set.

This section serves as your quick-reference guide for attribute names and values. Should you need to adjust or replace any component attributes, simply copy the necessary information from here to ensure seamless functionality within your Webflow project.


# Bag Templates

Penni Cart offers bag pre-built templates to add products instantly to your Webflow e-commerce.

{% hint style="warning" %}
Please note that this section/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 %}

To begin customizing your cart, head over to the 'Templates' section within the Penni Cart App and scroll to the 'Bag Templates' section. Here, you'll find a variety of templates to choose from

These Templates are provided as styled, foundational blocks, allowing you the freedom to embed them directly into your project's Cart Page (automatically created when you installed the Penni Cart App). Now, as a Webflow connoisseur, it's your turn to inject your brand's unique flair into these elements.

### <mark style="color:purple;">**Keys to a Successful Cart Design:**</mark>

* **Responsiveness:** Ensure your cart adapts smoothly across devices for a seamless shopping experience.
* **Preserve Required Attributes:** Our attribute grid below highlights the essential attributes for each component. Be mindful not to remove these to maintain functionality.
* **Brand Alignment:** Tailoring the cart's design to reflect your brand's identity not only elevates the user experience but can also significantly boost engagement and sales.

Dive into styling your cart with confidence, knowing you have the tools and guidance to create a captivating, brand-centric shopping cart.<br>


# Cart Templates

Penni Cart offers cart pre-built templates to add products instantly to your Webflow e-commerce.

{% hint style="warning" %}
Please note that this section/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 %}

To begin customizing your cart page, head over to the 'Components' section within the Penni Cart App and make your way to the 'Cart Components' segment. This section is dedicated to enriching the shopping bag experience with two crucial components:

* **Products List:** A comprehensive display of all items a customer has added to their cart, providing a clear and concise overview.
* **Order Summary:** Offers a quick snapshot of the order's essential details, including shipping, tax, and subtotal, ensuring customers have all the information they need at a glance.

These components come unstyled, granting you the freedom to design them according to your brand's identity on the Bag Page, which Penni Cart sets up automatically during installation.

### <mark style="color:purple;">**Keys to a Successful Bag Page Design:**</mark>

* **Responsiveness:** Ensure your cart adapts smoothly across devices for a seamless shopping experience.
* **Ensure Clarity:** The Products List and Order Summary should be straightforward, fostering a hassle-free checkout experience.
* **Preserve Required Attributes:** Our attribute grid below highlights the essential attributes for each component. Be mindful not to remove these to maintain functionality.
* **Brand Alignment:** Tailoring the cart's design to reflect your brand's identity not only elevates the user experience but can also significantly boost engagement and sales.

Embark on customizing your Bag Page, equipped with the necessary tools for a design that's not only functional but also a true reflection of your brand within your Webflow store.


# Checkout Templates

Penni Cart offers checkout pre-built templates to add products instantly to your Webflow e-commerce.

{% hint style="warning" %}
Please note that this section/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 %}

To begin customizing your checkout page, head over to the 'Components' section within the Penni Cart App and make your way to the 'Checkout Components' segment. This section is dedicated to enriching the final phase of your customers' shopping journey:&#x20;

* **Billing/Shipping:** Where customers can input their billing and shipping information.
* **Order Summary:** Provides a concise overview of the order, including selected items and total cost.
* **Shipping Method:** Allows customers to choose their preferred shipping method.
* **Product List:** Displays a summary of products ready for purchase.
* **Payment:** Integrates with your chosen payment processor, enabling secure transactions.
* **Promo Code:** A field for customers to apply discount codes for savings.

These components are provided in their basic form, ready for you to infuse with your brand’s style. Ensure you are editing the Checkout Page that Penni Cart automatically generates during app installation.

### <mark style="color:purple;">**Keys to a Successful Checkout Page Design:**</mark>

* **Responsiveness:** Ensure your cart adapts smoothly across devices for a seamless shopping experience.
* **Preserve Required Attributes:** Our attribute grid below highlights the essential attributes for each component. Be mindful not to remove these to maintain functionality.
* **Brand Alignment:** Tailoring the cart's design to reflect your brand's identity not only elevates the user experience but can also significantly boost engagement and sales.

By customizing these components, you can offer a seamless and efficient checkout process, encapsulating your brand's essence and ensuring a positive end to your customers' shopping experience.


# Managing Your Store

Learn how to use Penni cart dashboard plus other integrations to elevate your Webflow e-commerce.

Dive into managing your store effortlessly with the Penni Cart Dashboard, your all-in-one platform for overseeing sales, adjusting settings, and analyzing performance. This central hub simplifies your workflow, making store management intuitive and efficient.

### <mark style="color:purple;">Quick Links:</mark>

To manage your store's dashboard and payment gateway settings, utilize the links below.

* [<mark style="color:purple;">**Dashboard**</mark>](/managing-your-store/dashboard)
* [<mark style="color:purple;">**Payment Gateways**</mark>](/managing-your-store/payment-gateways)<br>


# Dashboard

Penni cart dashboard offers a comprehensive overview of day to day operations on your e-commerce site.

Dive into the central hub of your Penni Cart operations. From here, access everything from order details to shipping configurations, ensuring your store runs smoothly and efficiently.

* [<mark style="color:purple;">**Payments**</mark>](/managing-your-store/dashboard/payments)
* [<mark style="color:purple;">**Coupons**</mark>](/managing-your-store/dashboard/coupons)
* [<mark style="color:purple;">**Tax**</mark>](/managing-your-store/dashboard/tax)
* [<mark style="color:purple;">**Shipping**</mark>](/managing-your-store/dashboard/shipping)
* [<mark style="color:purple;">**Account**</mark>](/managing-your-store/dashboard/account)
* [<mark style="color:purple;">**Invoice**</mark>](/managing-your-store/dashboard/invoice)


# Payments

Access a detailed summary of transactions within the "Payments" tab, where every aspect of your store's orders is meticulously organized and accessible.

{% hint style="warning" %}
Please note that this section/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 %}

{% embed url="<https://drive.google.com/file/d/1ihFJFIqKjN3pkSYtoQk2HgbN0yNRCyvC/view?usp=drive_link>" %}
Managing Your Orders
{% endembed %}

### <mark style="color:purple;">**Features:**</mark>

The Payments tab serves as your central hub for all transactional information, streamlining your sales management process with comprehensive insights into each order.

* **Amount:** Displays the total cost of each transaction, allowing you to keep track of sales at a glance.
* **Status:** Indicates whether an order was successful, declined, or pending, providing insight into transaction outcomes.
* **Description:** Offers a brief overview of each order, including items purchased.
* **Customer Email:** Shows the email address of the customer for each transaction, useful for follow-ups or customer service inquiries.
* **PDF Invoice:** A link to download a detailed invoice for each order, ideal for record-keeping or customer requests.
* **Order Date:** The date when each transaction was processed, helping you track sales over time.

<br>


# Coupons

Dive into the promotional aspect of your store by creating enticing coupons to drive sales and customer engagement.

{% hint style="warning" %}
Please note that this section/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 %}

{% embed url="<https://drive.google.com/file/d/1ktPRZ0r5mi5kPLii9zcbaggV3jU_nM-q/view?usp=drive_link>" %}
Managing Your Coupons
{% endembed %}

### <mark style="color:purple;">**How to Create a Coupon:**</mark>

1. **Start by Clicking + New Coupon:** Located at the top right of the dashboard, this button opens a customization pop-up for your new coupon.
2. **Coupon Name:** Assign a unique name to differentiate your coupons within the dashboard.
3. **Coupon Code:** This is the code your customers will use at checkout. Make it memorable and related to the promotion.
4. **Discount Type:** Choose between a percentage discount or a fixed rate off the order total.
5. **Discount Value:** Depending on your chosen discount type, input the percentage or fixed amount.
6. **Redemption Limits:**
   * Limit by Date Range: Specify the timeframe during which the coupon can be redeemed.
   * Limit by Total Redemptions: Set a cap on the number of times the coupon can be used.

{% embed url="<https://drive.google.com/file/d/1A4vLOYZhmxec5Kc8ll_KZLFRNVS5F23o/view?usp=drive_link>" %}
How To Create A Coupon
{% endembed %}

### <mark style="color:purple;">**How to Edit a Coupon:**</mark>

1. **Access Coupon Options:** Click the three dots next to your desired coupon to reveal options.
2. **Choose Edit:** Selecting "Edit" brings up the coupon's customization pop-up, allowing full access to modify its details.
3. **Update Your Coupon:**
   * **Coupon Name:** Modify the name to better suit your campaign or to correct any prior mistakes.
   * **Coupon Code:** Update the code to refresh the offer or make it more relevant to current promotions.
   * **Discount Type and Value:** Adjust the type of discount (percentage or fixed rate) and its value based on the campaign's performance or strategy shift.
   * **Redemption Limits:** Revise the date range for coupon validity or the total number of redemptions to adapt to your marketing needs.
4. **Save Your Changes:** After updating, click "Save Changes" to immediately apply the modifications.


# Tax

Add tax rates to your Webflow e-commerce site from the Penni Cart dashboard.

{% hint style="warning" %}
Please note that this section/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 %}

{% embed url="<https://drive.google.com/file/d/1bf3CI996XeyQeHW8PSZWzeLHt64Bz88v/view?usp=drive_link>" %}
Managing Your Taxes
{% endembed %}

Navigating taxes in your Penni Cart store is straightforward and essential for compliance. Given that taxes are manually set up for both products and services across the USA and Canada, with distinct rates for certain provinces, it's crucial to ensure accuracy in alignment with current regulations.

### <mark style="color:purple;">**Key Steps for Managing Taxes:**</mark>

1. **Review Taxes Regularly**: Access the Taxes tab in your dashboard to review the preset tax rates. While we strive to keep these updated, it's beneficial to verify them against the latest state and provincial regulations to ensure compliance.
2. **Editing Tax Rates**: Should you need to adjust a tax rate, locate the desired tax entry and click on the three dots to the right. A pop-up will allow you to modify the tax percentage. Confirm your changes by clicking 'Save'.

Remember, the tax setup in Penni Cart today relies on manual entry for both products and services, segmented by regions in the USA and Canada. We're committed to evolving this feature towards a more automated tax calculation system in the future to further simplify tax management for our users.

<br>


# Shipping

Shipping is a crucial part of the e-commerce experience, and Penni Cart gives you the flexibility to customize shipping options to suit your store's needs and enhance customer satisfaction.

{% hint style="warning" %}
Please note that this section/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 %}

### <mark style="color:purple;">**Standard Shipping Method:**</mark>

* **Non-Removable but Customizable**: The standard shipping method is a staple in your shipping options. While it can't be deleted, its name and value are fully customizable to align with your shipping strategy.
* **Editing Made Simple**: To modify the standard shipping method, click the three dots on the right and select 'Edit'. You'll be presented with a pop-up where you can adjust:
  * **Shipping Type**: Set as a fixed flat rate.
  * **Amount**: Determine the shipping charge, from $0.00 onwards.
  * **Description**: This will be visible in your online store, providing customers with clear information about this shipping option.
  * **Estimated Shipping Time**: Optionally specify the estimated shipping duration to set clear expectations for your customers.

### <mark style="color:purple;">**Adding New Shipping Classes:**</mark>

* **Quick Addition**: Introduce new shipping classes to cater to various customer needs by selecting 'Add New Shipping Class' at the top right of the dashboard.
* **Comprehensive Customization**: Similar to editing the standard method, define the Shipping Type, Amount, Description, and Estimated Shipping Time for each new class.
* **Visibility at Checkout**: All created shipping classes will be available for customers to choose from during the checkout process, ensuring a tailored shopping experience.

Leveraging Penni Cart's shipping management tools allows you to fine-tune your delivery options, ensuring your offerings meet both your business requirements and your customers' expectations for a seamless online shopping journey.

### <mark style="color:purple;">How To Edit A Shipping Class</mark>

{% embed url="<https://drive.google.com/file/d/1Rmzp8vIGKJ4nXQkUCzV1_zt5cBzclaDe/view?usp=sharing>" %}


# Account

The Account section of Penni Cart is your central hub for managing your profile, Webflow integration, payment gateways, plan subscriptions, and more.

Account is also designed to give you full control and flexibility over all your settings.

{% hint style="warning" %}
Please note that this section/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 %}

### <mark style="color:purple;">**Profile Management:**</mark>

* **Comprehensive Profile Settings**: Update your company name, contact person, email, and country. These details are crucial for personalizing your Penni Cart experience and ensuring our support team can assist you efficiently.
* **Account Reference Number**: While every aspect of your profile can be edited, your unique Account Number remains constant. It’s an important identifier for interacting with our support team.

### <mark style="color:purple;">**Connect Webflow Website:**</mark>

* **Website Verification**: Easily check if your website is verified with Penni Cart. Need to switch websites? Simply click 'Reconnect Website' to update your Webflow integration.

### <mark style="color:purple;">**Payment Gateway Integration:**</mark>

* **Seamless Setup**: Refer to the [Payment Gateway](/managing-your-store/payment-gateways) page for detailed instructions on integrating your preferred payment processors like Stripe, PayPal, or others.

### <mark style="color:purple;">**Subscription Plan Management:**</mark>

* **Flexible Plan Options**: View your current plan and easily switch between options. Upgrading or downgrading is just a click away, allowing you to adjust your subscription as your needs evolve.

### <mark style="color:purple;">**Payment Details:**</mark>

* **Update Payment Information**: Keep your payment method up-to-date by editing your card details, including expiration date and CVV. Ensuring your payment information is current avoids any interruption in your service.

### <mark style="color:purple;">**Plan Actions:**</mark>

* **Account Deletion**: While we hate to see you go, you have the option to delete your account, which will cease all future payments and subscriptions.
* **Log Out**: Securely log out of the Penni Cart App to ensure your account remains protected.

The Account section is designed to be intuitive, giving you easy access to manage your entire Penni Cart experience from one place. Whether updating your profile, managing subscriptions, or connecting your Webflow site, everything you need is at your fingertips.


# Invoice

Customize your invoices with your brand logo and colors within the Penni Cart dashboard.

{% hint style="warning" %}
Please note that this section/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 %}

{% embed url="<https://drive.google.com/file/d/1ihFJFIqKjN3pkSYtoQk2HgbN0yNRCyvC/view?usp=drive_link>" %}
Managing Your Invoice
{% endembed %}

Penni Cart allows for comprehensive invoice customization to ensure every detail reflects your brand's identity. Here's how you can personalize your invoices to enhance your brand presence and maintain consistency across all customer touchpoints.

{% embed url="<https://drive.google.com/file/d/1_5_IZ2iHewXLS78tcCGLxFsCrsx36rIK/view?usp=sharing>" %}
How To Edit An Invoice
{% endembed %}

### <mark style="color:purple;">**Upload Your Logo:**</mark>

* **Brand Representation**: Add or update the company logo on your invoice for a professional look. We recommend a size of 240px by 100px in PNG format for a sharp image with a transparent background.

### <mark style="color:purple;">**Company Information:**</mark>

* **Detailed Business Info**: Fill in your business address, including state/province, country, and zip code. This information is essential for maintaining transparency and trust with your customers.
* **Support Contact**: Provide a support email address. This ensures your customers know how to reach out for assistance or inquiries regarding their purchases.

### <mark style="color:purple;">**Brand Color:**</mark>

* **Visual Cohesion**: Select your brand color to apply to the invoice template. Use the color picker tool or enter RGB values to match your brand's visual identity perfectly.

### <mark style="color:purple;">**Save Your Customizations:**</mark>

* **Updating Your Invoice**: After personalizing your invoice template, click 'Update Invoice' to save your changes. These customizations will automatically apply to all future invoices, ensuring a consistent and branded customer experience.

By personalizing your invoice template within Penni Cart, you're not just sending out a transactional document; you're reinforcing your brand identity and creating a more cohesive and memorable shopping experience for your customers.<br>


# Payment Gateways

Connect your online store with your trusted payment processor of choice without an additional processing fee on top.

One of the few reason Penni Cart came to full realization was to have a solution many Webflow users and communities face; limited payment processor option.&#x20;

Our team are working hard to ship more payment gateways for all Webflow users, as of this stage of the product. The following three below are payment gateways Penni Cart will start to offer and support transaction connection with.

{% content-ref url="/pages/xIXkEGnaexpBzDEj7ASc" %}
[Stripe](/managing-your-store/payment-gateways/stripe)
{% endcontent-ref %}

{% content-ref url="/pages/VK0VCFwW3UYJmsJo0nHK" %}
[Elavon](/managing-your-store/payment-gateways/elavon)
{% endcontent-ref %}

{% content-ref url="/pages/YBv9023xZR07F6Yotq1q" %}
[Authorize.net](/managing-your-store/payment-gateways/authorize.net)
{% endcontent-ref %}

### <mark style="color:purple;">Got something to add?</mark>

We would love to hear your ideas, suggestions, and future request to help Penni Cart empower many more Webflow users. Please visit our [wishlist](https://wishlist.pennicart.io/) to request or see what is in the works.


# Stripe

Connect stripe payment gateway with Penni Cart.

{% hint style="warning" %}
Please note that this section/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 %}

{% embed url="<https://www.youtube.com/watch?v=JWFbdzlL7Rc>" %}

To have everything connect, navigate to your Stripe dashboard and start creating a webhook under the **Developer**, below are requirements in order to connect Stripe as the payment gateway on your store.

1. Public & Secret keys can be found on Stripe's Developer page
2. Setting the webhook url to <mark style="color:purple;">`https://api.pennicart.io/stripe/webhook`</mark>
3. Enable the following events <mark style="color:purple;">`payment_intent.succeeded`</mark> & <mark style="color:purple;">`payment_intent.payment_failed`</mark>
4. Once created, simply click on "Reveal" below **Signing secret** for the Webhook Secret needed on the Penni Cart Dashboard


# Elavon

Connect Elavon payment gateway with Penni Cart.

{% hint style="warning" %}
Please note that this section/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 %}


# Authorize.net

Connect Authorize.net payment gateway with Penni Cart.

{% hint style="warning" %}
Please note that this section/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 %}


# Zapier Integration

{% hint style="warning" %}
We're currently in closed-beta, invites only. Email <hello@pennicart.io>
{% endhint %}

Connect to 1,000+ essential business tools to take your automations to another level. Link store to Zapier to unlock automated tasks for your business.

### Triggers

* **Product Added to Cart**: Triggers when a product is added to the cart.
* **New Transaction**: Triggers when a customer successfully completes a purchase.
* **Failed Transaction**: Triggers when a customer’s checkout attempt is unsuccessful.
* **Abandoned Cart**: Triggers when a user leaves the checkout without completing their purchase after a set time.

### Actions

* **Create Coupon**: Generates a new discount coupon

We are excited to share many more updates and zaps in the future, request access and let us know what you think!

<br>

[<br>](https://pcstaging.webflow.io/feature/zapier#)