Setup Floating Cart Plugin

Check out the video below:


Important Settings as shown in the video are revised below:

Importing Settings Under the "Settings" tab


Design Settings:


Design Settings Used on MegaMart Demo Site: Optional For You

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.

Cart Toggle Button:

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


Toast Notification Settings:

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


Cart Panel:

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)


Buttons in Cart:

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)

Miscellaneous Cart Elements:

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


Products in Cart

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)

Follow the next step to set up the Quick View plugin.

Last updated