Ecwid (Premium) — Storefront — Buttons
Buttons customizes the buttons in the Storefront.
How to use
| Removables | |
|---|---|
| Remove 'Add More' Button | Remove Add More button that appears inside the product details when a product is added to the cart. |
| Remove 'Back to Store' Button | Remove Back to Store button that appears inside throughout the store. |
| Remove 'Clear Cart' Button | Remove Clear Cart button that appears at the checkout. |
| Icons | |
| Add 'Clear Cart' Icon | Add/remove 'Clear Cart' button icon. |
| Add 'Checkout' Icon | Add/remove 'Checkout' button icon. |
| Add 'Add to Cart' Icon | Add/remove 'Add to Cart' button icon. |
| Add 'Add More' Icon | Add/remove 'Add More' button icon. |
| Add 'Back to Store' Icon | Add/remove 'Back to Store' button icon. |
| Font | |
| Weight | Change the font weight of the button text (i.e. bold, normal, light, etc) |
| Size (Normal Button) | Adjust the font size of the normal buttons. |
| Size (Small Button) | Adjust the font size of the small buttons. |
| Dimensions | |
| Normal Buttons | |
| Make Full Width | Enable this feature to force the normal buttons stretch to the width of their container. |
| Width (px) | The width of the normal buttons if Make Full Width is not enabled. |
| Height (px) | The height of the normal buttons. |
| Small Buttons | |
| Width (px) | The width of the small buttons. |
| Height (px) | The height of the small buttons. |
| Styling | |
| Transition Speed | The speed that the button changes styling between each state (i.e. hover, active, etc). |
| Color | |
| Edit Together | Enable this feature 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 | Enable this feature to edit the button background color in each state. |
| Color | Adjusts the background color in every state. |
| Color (Normal) | Adjusts the background color in the normal state. |
| Color (Hover) | Adjusts the background color in the hover state. |
| Color (Active) | Adjusts the background color in the active state. |
| Border | |
| Border Radius | Adjusts the roundness of the button corners. |
| Add Border | Enable this feature 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 | Enable this feature 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. |
| Duo Colors | |
| Enable Duo Color | Enabling Duo Colors will allow you to create icons like this: |
| Duo Colors (Icon Color) | |
| Edit Together | Enable this feature to edit the button's icon color in every state. |
| Color | Adjusts the icon color in every state. |
| Color (Normal) | Adjusts the icon color normal state. |
| Color (Hover) | Adjusts the icon color hover state. |
| Color (Active) | Adjusts the icon color active state. |
| Duo Colors (Icon Background) | |
| Edit Together | Enable this feature to edit the button's duo background color in every state. |
| Background Color | Adjusts the duo background color in every state. |
| Background Color (Normal) | Adjusts the duo background color normal state. |
| Background Color (Hover) | Adjusts the duo background color hover state. |
| Background Color (Active) | Adjusts the duo background color active state. |
| Shadow | |
| Add Shadow | You have 3 options:
|
| 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. |
| Plugins | |
| 'Back to Store' Redirect | When this is activated, it will allow you to change the URL of the 'Back to Store' button. |
Disqus Comments