Checkout pages

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

Control expandable billing address section on the checkout

When you enable billing address for the checkout, it is collapsed by default at the checkout. You can turn on auto-expand option through the Control Panel ('Billing address section' setting at the bottom of the #Design page) or the following config:

window.ec = window.ec || Object();
window.ec.storefront = window.ec.storefront || Object();
window.ec.storefront.checkout_expand_billing_address_form = true; //default value is false

Full code example:

<script>  
  Ecwid.OnAPILoaded.add(async () => {
    window.ec = window.ec || Object();
    window.ec.storefront = window.ec.storefront || Object();
    window.ec.storefront.checkout_expand_billing_address_form = true;
    Ecwid.refreshConfig();
});
</script>

Alternatively, you can make REST API request to update store profile (PUT /api/v3/{storeId}/profile):

{
	"designSettings": {
		"checkout_expand_billing_address_form": false
	}
}