Design Controls
Totals
These controls let you customize the appearance and spacing of the Cart Totals section. Make it blend seamlessly with your website’s design by adjusting titles, wrappers, rows, and buttons. Fine-tune elements like background color, border styling, typography, and even button icons.
- Hide Title – Toggle this option to decide whether you’d like to display the title for the Totals section or keep it hidden.
- Space After Title – Adjust the spacing immediately after the Totals title to create a balanced look.
- Wrapper – Customize the overall container holding the Totals. This allows for a uniform look and feel.
- Max Width – Set a maximum width for the Totals container to ensure it fits neatly within your page layout.
- Background – Choose a background color that complements your site’s design and enhances readability.
- Borders
- Radius – Round the corners of your Totals container for a softer look.
- Styling – Define the style, width, and color of the Totals container borders.
- Shadow – Add a shadow to your Totals container to give it depth and prominence on the page.
- Padding – Adjust the internal spacing of the Totals container for better content alignment and spacing.
- Padding – Set the specific padding values for top, right, bottom, and left sides of the container.
- Rows – Adjust the individual rows within the Totals section.
- Spacing – Define the space between consecutive rows to make the content more legible.
- Separator – Toggle to add or remove a separator line between rows.
- Separator Color – Choose the color of the separator line. (Note: This control is only available when the separator is set.)
- Separator Height – Adjust the thickness of the separator line. (Note: This control is only available when the separator is set.)
- Button – Personalize the button within the Totals section to make it align with your website’s style.
- Space Above – Add space above the button to prevent it from feeling cramped.
- Alignment – Align the button to the left, center, or right of the Totals container.
- Styles
- Size
- Size – Choose from preset sizes or define your custom size for the button.
- Padding – Adjust the internal spacing of the button. (Note: This control is only available when the size is set to custom.)
- Override Width – Define a specific width for the button regardless of its content size.
- Full Width At – Choose a breakpoint where the button should stretch to the full width of its container.
- Background – Set the background color of the button to make it stand out or blend in.
- Outline – Toggle to decide if the button should have an outline style.
- Color – Define the color of the button’s outline. (Note: This control is only available when the outline is set.)
- Width – Set the thickness of the button’s outline. (Note: This control is only available when the outline is set.)
- No Fill On Hover – Decide whether the button should maintain its background color when hovered over. (Note: This control is only available when the outline is set.)
- Typography – Fine-tune the font style, size, and weight of the button text.
- Corners – Define the shape of the button’s corners, choosing from sharp, slightly rounded, or fully rounded corners.
- Corner Radius – Specify the exact curvature for the button’s corners. (Note: This control is only available when corners are set to custom.)
- Effects
- Transition Duration – Set how quickly or slowly button effects, like hover, take place.
- Scale On Hover – Decide how much the button should enlarge when hovered over.
- Shadow – Add a shadow to your button, making it pop on your webpage.
- Icon
- Icon – Choose an icon to accompany the button text, enhancing its meaning or appeal.
- Position – Decide whether the icon should be to the left or right of the button text.
- Size – Adjust the size of the icon to ensure it complements the button text.
- Color – Set the color of the icon to match or contrast with the button design.
- Space Before – Add space before the icon, separating it from any content to its left.
- Space After – Add space after the icon, separating it from any content to its right.
- Hover Transform – Define how the icon should move or rotate when the button is hovered over.
- Typography – Adjust the text styles within the Totals section to ensure clarity and consistency.
- Heading – Customize the font style, size, weight, and color of the Totals section heading.
- Rows – Adjust the font style, size, weight, and color of the individual rows within the Totals section.
- Footer – Modify the font style, size, weight, and color of the Totals section footer, if any.
Spacing
Adjust the spacing around the Cart Totals Element to ensure it fits seamlessly within your page layout and maintains clear visual separation from other elements.
- Margin Top – Set the space above the Cart Totals Element, providing breathing room from content or elements above.
- Margin Bottom – Manage the space below the Cart Totals Element, allowing for distance from content or elements below.
