Ecwid (Premium) — Storefront — Buttons

Learn more about the Ecwid (Premium) — Storefront — Buttons Adobe Muse widget

Buttons customizes the buttons in the Storefront.

Buy Now $19.99

Table of contents

  1. How to use
  2. Documentation
    1. Removables
    2. Icons
    3. Font
    4. Dimensions
      1. Normal Buttons
      2. Small Buttons
    5. Styling
      1. Color
      2. Background
      3. Border
      4. Duo Colors
    6. Plugins
  3. Discussion

How to use

Ecwid (Premium) — Storefront — Buttons
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:
  1. all borders
  2. the bottom border
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 Color button exampleTip — This feature will only affect the buttons that have icons added to them.
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:
  1. Default Shadows
  2. Custom Shadows
  3. No Shadows
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.

Discussion