# Setup Floating Cart Plugin

### Check out the video below:

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAQnFMNqFRLSPEkGqkrtc%2Fuploads%2FG8IP9qB86xPKWnMbRu8x%2FSetup%20Floating%20Cart%20Plugin.mp4?alt=media&token=1d62457d-c000-495e-b48b-0fc440376fff>" %}

***

### <mark style="color:blue;">Important Settings as shown in the video are revised below:</mark>

### Importing Settings Under the "Settings" tab

<figure><img src="https://89335867-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAQnFMNqFRLSPEkGqkrtc%2Fuploads%2FeZL1eS5drVNXwNr5iY09%2FFloating%20Cart%20-%20Settings%20tab%20-%201.png?alt=media&#x26;token=fb67a742-8c44-4163-9b46-744435e897d7" alt=""><figcaption></figcaption></figure>

<figure><img src="https://89335867-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAQnFMNqFRLSPEkGqkrtc%2Fuploads%2FPWpi3Hw6WAGWYeaKRAke%2FFloating%20Cart%20-%20Settings%20tab%20-%202.png?alt=media&#x26;token=c40a61c9-6bb5-4cd5-a6a0-bebfdeffb662" alt=""><figcaption></figcaption></figure>

***

### <mark style="color:green;">Design Settings:</mark>

<figure><img src="https://89335867-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAQnFMNqFRLSPEkGqkrtc%2Fuploads%2FtJ9zJSOzRtLwf9r5sQWZ%2FFloating%20Cart%20-%20Design%20tab%20-%201.png?alt=media&#x26;token=e2ac5878-438c-4ab4-a491-67bad84ac5d8" alt=""><figcaption></figcaption></figure>

***

## <mark style="color:purple;">**Design Settings Used on MegaMart Demo Site: Optional For You**</mark>

{% hint style="info" %}
**default**: If below I have added default value. It simply means I haven't changed it. It is the same as the default plugin setting.
{% endhint %}

### <mark style="color:blue;">**Cart Toggle Button:**</mark>

| Setting Name                                    | Values                 |
| ----------------------------------------------- | ---------------------- |
| Badge width (unit: px)                          | 40                     |
| Badge font size (unit: px)                      | 13                     |
| Badge background color                          | rgba(33, 33, 33, 1)    |
| Badge background color on hover                 | rgba(33, 33, 33, 1)    |
| Badge label color                               | #ffffff                |
| Badge label color on hover                      | #ffffff                |
| Cart toggle button font color                   | rgba(33, 33, 33, 1)    |
| Cart toggle button background color             | #ffffff                |
| Cart toggle button border color                 | rgba(238, 238, 238, 1) |
| Cart toggle button label color on hover         | rgba(33, 33, 33, 1)    |
| Cart toggle button background color on hover    | rgba(248, 248, 249, 1) |
| Cart toggle button size (unit: px)              | 60                     |
| Cart toggle border radius (unit: px)            | 5                      |
| Cart toggle button icon font size (unit: px)    | 20                     |
| Cart toggle button horizontal offset (unit: px) | default OR 100px       |
| Cart toggle button vertical offset (unit: px)   | default OR 100px       |

***

### <mark style="color:blue;">**Toast Notification Settings:**</mark>

**I haven't used it. If you want, you can enable it and design it under the design tab.**

***

### <mark style="color:blue;">Cart Panel</mark><mark style="color:blue;">**:**</mark>

| Setting Name                           | Values                 |
| -------------------------------------- | ---------------------- |
| Cart width (unit: px)                  | 500                    |
| General cart text font size (unit: px) | 15                     |
| Cart background color                  | rgba(255, 255, 255, 1) |
| Cart overlay background color          | rgba(248, 248, 249, 1) |
| General border color                   | rgba(238, 238, 238, 1) |
| General text color                     | rgba(0, 0, 0, 1)       |
| General link color                     | rgba(188, 108, 37, 1)  |
| General link color on hover            | rgba(188, 108, 37, 1)  |
| Cart title color                       | rgba(0, 0, 0, 1)       |
| Cart title font size (unit: px)        | 20                     |
| Cart title font weight                 | Semo Bold              |
| Cart title letter spacing (unit: px)   | 0.25                   |
| Cart title text transform              | None                   |
| Badge label color                      | rgba(33, 33, 33, 1)    |
| Badge background color                 | rgba(248, 248, 249, 1) |
| Cart close icon color                  | rgba(33, 33, 33, 1)    |
| Cart close icon color on hover         | rgba(33, 33, 33, 1)    |

***

### <mark style="color:blue;">Buttons in Cart</mark><mark style="color:blue;">**:**</mark>

| Setting Name                               | Value                  |
| ------------------------------------------ | ---------------------- |
| Buttons font size (unit: px)               | 14                     |
| Buttons font weight                        | Normal                 |
| Buttons letter spacing (unit: px)          | 0.25                   |
| Buttons border radius (unit: px)           | 3                      |
| Buttons text transform                     | None                   |
| Primary button background color            | rgba(96, 108, 56, 1)   |
| Primary button label color                 | rgba(255, 255, 255, 1) |
| Primary button border color                | rgba(96, 108, 56, 1)   |
| Primary button background color on hover   | rgba(40, 54, 24, 1)    |
| Primary button label color on hover        | rgba(255, 255, 255, 1) |
| Primary button border color on hover       | rgba(40, 54, 24, 1)    |
| Secondary button background color          | rgba(33, 33, 33, 1)    |
| Secondary button label color               | rgba(255, 255, 255, 1) |
| Secondary button border color              | rgba(33, 33, 33, 1)    |
| Secondary button background color on hover | rgba(33, 33, 33, 1)    |
| Secondary button label color on hover      | rgba(255, 255, 255, 1) |
| Secondary button border color on hover     | rgba(41, 41, 41, 1)    |

### <mark style="color:blue;">Miscellaneous Cart Elements</mark><mark style="color:blue;">**:**</mark>

**I haven't used it. If you want, you can enable it and design it under the design tab.**

***

### <mark style="color:blue;">Products in Cart</mark>

| Settings                                        | Value                  |
| ----------------------------------------------- | ---------------------- |
| Product title color                             | rgba(33, 33, 33, 1)    |
| Product title color on hover                    | rgba(33, 33, 33, 1)    |
| Product title font size (unit: px)              | 15                     |
| Product title font weight                       | Semi Bold              |
| Product quantity & price color                  | rgba(33, 33, 33, 1)    |
| Remove product button background color          | rgba(238, 238, 238, 1) |
| Remove product button icon color                | rgba(33, 33, 33, 1)    |
| Remove product button background color on hover | rgba(33, 33, 33, 1)    |
| Remove product button icon color on hover       | rgba(255, 255, 255, 1) |

<mark style="color:green;">**Follow the next step to set up the Quick View plugin.**</mark>