Design Controls
Layout
The controls in this section allow you to modify the overall layout of your checkout page, such as arranging content in a single column and specifying the screen size at which elements should stack vertically.
- Single Column – Choose whether to organize all elements in a single vertical column.
- Stack Vertically At – Define the breakpoint at which elements should start stacking vertically. This control becomes available when Single Column is not enabled.
Coupon
This section contains controls that enable or disable the use of coupons during checkout.
- Disable – Toggle to enable or disable the option for customers to apply coupons.
Billing Details
These controls allow you to style the billing details section, including background color, padding, and border aesthetics like radius, style, and shadow.
- Background – Set the background color for the billing details area.
- Padding – Adjust the space inside the billing details boundary.
- Padding – Fine-tune the specific padding amounts on all sides.
- Borders – Modify the billing details border properties.
- Radius – Round the corners of your billing details section.
- Styling – Customize border color, width, and style.
- Shadow – Add or adjust shadow effects for depth.
Shipping Address
Control the visual aspects of the shipping address section, including background, padding, and borders, to make it distinct and more readable.
- Background – Change the background color of the shipping address section.
- Padding – Control the spacing within the shipping address area.
- Padding – Specify the exact padding on each side of the shipping address section.
- Borders – Set the style for the shipping address borders.
- Radius – Adjust how rounded the border corners are.
- Styling – Alter the appearance of the borders (color, width, style).
- Shadow – Apply a shadow effect to the shipping address box for a 3D feel.
Additional Info
Enhance the ‘Additional Info’ section with custom background, padding, and borders, ensuring this portion is both eye-catching and consistent with your brand.
- Background – Select a background color to make the ‘Additional Info’ section stand out.
- Padding – Manage the inner spacing of the ‘Additional Info’ box to improve readability.
- Padding – Adjust the specific padding values on each side within the ‘Additional Info’ section.
- Borders – Personalize the borders of the ‘Additional Info’ area.
- Radius – Define the roundness of the borders’ corners.
- Styling – Style the borders with your choice of color, width, and type.
- Shadow – Add shadow to create a sense of depth for the ‘Additional Info’ box.
Your Order
This section provides options to customize the presentation of the customer’s order summary, allowing for changes in background, padding, and border style.
- Background – Choose the background color for the order summary area.
- Padding – Set the space inside the boundary of the order summary.
- Padding – Decide on the precise padding dimensions on all sides of the order summary.
- Borders – Configure the borders of the order summary section.
- Radius – Determine how curved the border corners will be.
- Styling – Design the borders by selecting color, width, and style.
- Shadow – Implement a shadow to give the order summary a more layered appearance.
Totals
Customize the display of the total amount, ensuring it’s clear and prominent for customers during checkout.
- Rows – Control the spacing and separator of total rows.
Payment
This section allows you to modify the checkout payment element, providing options to make it sticky, adjust its background, padding, and borders, and customize the payment button and information display.
- Sticky – Enable to make the payment element stay visible when scrolling.
- Sticky Offset – Set the distance between the sticky payment element and the viewport (only available when “Sticky” is enabled).
- Background – Choose a background color for the payment element.
- Padding – Define the spacing inside the payment element. More options available within the sub-menu.
- Borders – Customize the appearance of payment element borders, including radius, style, and shadow.
- Button – Tailor the checkout button’s size, background, appearance, typography, corners, effects, and icon to your liking. Certain features are conditional based on settings.
- Payment Info – Adjust the background, padding, and borders of the payment information section.
Typography
Enhance the aesthetics of your text with comprehensive typography controls. Modify font properties of headings, order details, and payment information to improve readability and style.
- Headings – Adjust the font properties of headings in the checkout section.
- Your Order – Fine-tune the typography of your order summary, including table headings, labels, prices, and totals.
- Payment – Customize the font settings for the payment section.
- Payment Info – Edit the typography of your payment information display.
Spacing
Control the layout of your checkout page by adjusting the spacing. Set the margins of the container, the gaps between elements, and the space below headings for a clean and organized appearance.
- Container – Set the top and bottom margins of the checkout container for better vertical spacing.
- Gap – Adjust the space between elements in the checkout section.
- Below Headings – Define the amount of space beneath the headings.
Advanced
Access advanced settings for further customization of the checkout page. These include options like adapting the width of form fields to ensure a consistent and user-friendly experience.
- Force Full Width Form Fields – Toggle to make form fields span the full width of the container, regardless of their content.
