Ecwid (Premium) — Shopping Carts — Lightweight Cart
- eCommerce
- Ecwid (Premium)
- Shopping Cart
- Lightweight Cart
Lightweight Cart is a static shopping cart that loads instantly on your page. It comes with 6 vector cart icons that you can add to your cart.This widget is one of the 3 Shopping Cart widgets. If you're looking for information on a different Shopping Cart widget, take a look here.
Table of contents
How to use
| Ecwid Info | |
|---|---|
| Store URL | The Store URL is the URL of the page where the Storefront widget is placed. Watch the video below for more details. |
| Text/Icon | |
| Add Cart Text | Toggle this feature on to add text to the button. |
| Add Cart Icon | Toggle this feature on to add a vector icon to the button. |
| All Caps | Force text to appear in all caps.Tip — This feature is only available if 'Add Cart Text' is activated. |
| Cart Text | The text that you want to appear on the shopping cart button.Tip — This feature is only available if 'Add Cart Text' is activated. |
| Place icon | You have 2 options:
|
| Space Around Icon | This adjusts the space before/after the icon before/after the text. Tip — This feature is only available if 'Add Cart Text' is activated. |
| Cart Text | The text that you want to appear on the shopping cart button. Tip — This feature is only available if 'Add Cart Text' is activated. |
| Styling | |
| General | |
| Transition Speed | This will adjust the animation speed between each state of the button (i.e. normal, hover, active). |
| Color | |
| Edit Together | Toggle this on to edit the button text color in every state. |
| Color | Adjusts the text color in every state. |
| Color (Normal) | Adjusts the text color normal state. |
| Color (Hover) | Adjusts the text color hover state. |
| Color (Active) | Adjusts the text color active state. |
| Background | |
| Edit Together | Toggle this on to edit the button background color in every state. |
| Color | Adjusts the background color in every state. |
| Color (Normal) | Adjusts the background color normal state. |
| Color (Hover) | Adjusts the background color hover state. |
| Color (Active) | Adjusts the background color active state. |
| Border | |
| Add Border | Toggle this on to add a border to your buttons. |
| Border (Width) | |
| Adjust the width in... | You have 2 options:
|
| Width (All) | Adjusts the width in all borders. |
| Width (Bottom) | Adjusts the width of the bottom border. |
| Remove Bottom Border When Clicked | Removes the bottom border when clicked: Tip — This option can only be used when the bottom border is selected in Adjust the width in... |
| Border (Color) | |
| Edit Together | Toggle this on to edit the button border color in every state. |
| Color | Adjusts the border color in every state. |
| Color (Normal) | Adjusts the border color normal state. |
| Color (Hover) | Adjusts the border color hover state. |
| Color (Active) | Adjusts the border color active state. |
| Shadow | |
| Add Shadow | Toggle this feature on to add a shadow. |
| Right/Left (Normal) | Adjusts the distance that the shadow will spread to the left or right side of the button in the normal state. |
| Top/Bottom (Normal) | Adjusts the distance that the shadow will spread to the top or bottom side of the button in the normal state. |
| Blur (Normal) | Adjusts the amount that the shadow will blur in the normal state. |
| Opacity (Normal) | Adjusts the opacity of the shadow in the normal state. |
| Right/Left (Hover) | Adjusts the distance that the shadow will spread to the left or right side of the button in the hover state. |
| Top/Bottom (Hover) | Adjusts the distance that the shadow will spread to the top or bottom side of the button in the hover state. |
| Blur (Hover) | Adjusts the amount that the shadow will blur in the hover state. |
| Opacity (Hover) | Adjusts the opacity of the shadow in the hover state. |
| Right/Left (Active) | Adjusts the distance that the shadow will spread to the left or right side of the button in the active state. |
| Top/Bottom (Active) | Adjusts the distance that the shadow will spread to the top or bottom side of the button in the active state. |
| Blur (Active) | Adjusts the amount that the shadow will blur in the active state. |
| Opacity (Active) | Adjusts the opacity of the shadow in the active state. |