Checkout pages provide more customization and streamlined checkout experience for storefronts across all Ecwid stores. Check the available customization options below. If you apply any of the changes below after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function. If the JS code is called before loading the storefront, then you need to add a check using the Ecwid.refreshConfig && Ecwid.refreshConfig() function.
To ensure you have the latest version enabled, check Ecwid Control Panel > Settings > What's new for new available features.
Control visibility of elements on checkout pages
window.ec = window.ec || Object();
window.ec.storefront = window.ec.storefront || Object();
window.ec.storefront.CONFIG_NAME = VALUE;
Ecwid.refreshConfig();
window.ec = window.ec || Object();
window.ec.storefront = window.ec.storefront || Object();
window.ec.storefront.shopping_cart_show_qty_inputs = true;
Ecwid.refreshConfig();
Fields:
| Config name | Type | Description |
|---|---|---|
| shopping_cart_show_qty_inputs | boolean | If true, the QTY controls will be shown as input boxes on mobile instead of dropdowns on cart page. Possible values: true, false. Defalut value: false |
| shopping_cart_show_sku | boolean | Show or hide item SKU on cart page. Possible values: true, false. Defalut value: false |
| shopping_cart_show_weight | boolean | Show or hide item weight on cart page. Possible values: true, false. Defalut value: false |
| checkout_show_state_input | boolean | Show or hide state input in address forms. If true, state/region field is shown even if it is not required for this country. This option is ignored if state field is required for selected country. Possible values: true, false. Defalut value: false |
| checkout_show_address_line_2 | boolean | Show or hide address line 2 in address forms. Possible values: true, false. Defalut value: false |
Control layout of checkout pages
window.ec = window.ec || Object();
window.ec.storefront = window.ec.storefront || Object();
window.ec.storefront.CONFIG_NAME = VALUE;
Ecwid.refreshConfig();
| Config name | Type | Description |
|---|---|---|
| shopping_cart_products_collapsed_on_desktop | boolean | If true, cart items list is shown in collapsed view on desktop when more than 4 products added. Possible values: true, false. Default value: true |
| shopping_cart_products_collapsed_on_mobile | boolean | If true, cart items list is shown in collapsed view on mobile. Possible values: true, false. Default value: true |
Customize cart widget icon
You can change the look and feel of the Shopping Bag icon, define its position on the page, apply the redirect to a custom page or animated effects by means of special parameters that are added to the integration code.
Check out our article in Help Center for more information: https://support.ecwid.com/hc/en-us/articles/360000013659-Customizing-Shopping-Bag-icon-style