Home / Widgets

Cart Widgets

Tech Writers Team @ Ucraft

Last updated on Sep 02, 2024

The Cart Widgets grouping consists of widgets that are used to manage and display the contents of customers' shopping carts. These widgets help users keep track of the items they have selected for purchase and provide a smooth and efficient shopping experience. You can access the whole list of Cart Widgets from Pages > Ecommerce > Cart page. You can access and drop the Shopping Cart and Cart Summary widgets on any other page.

Adding Cart Widgets

To add Cart Widgets to your website:

  1. Go to the Visual Editor by clicking Design on the Dashboard top panel or by navigating from Dashboard > Channels > Design.
  2. Open Pages > Ecommerce > Cart page.
  3. Navigate to the Widgets list on the Visual Editor Left Panel.
  4. Type the widget name in the search bar or open the Ecommerce > Cart Widgets grouping.
  5. Drag and drop the relevant widget from the list onto the desired crafting area of the Layout Canvas.

Configuring Cart Widgets

The Cart Widgets grouping consists of widgets that help customers organize their cart items and allow them to review their selected items before checkout.

You can access the Property Panel of these widgets to configure them according to your product requirements.

Combining these widgets enhances the shopping experience by providing precise product information in a customer cart.

Shopping Cart

The Shopping Cart widget allows you to structure and manage your cart items, ensuring they are displayed to your customers in a structured manner in the public mode. The widget Property Panel includes Styles, Content, and Settings with several customization options. All the product-related information is generated from the Dashboard, where you set up the relevant details.

1. Go to Styles to modify:

  • The CSS design framework States - Normal, Hover.
  • Global Styles - Make the necessary configuration of principal styling features from the Property Panel (see Global Styles). Global Styles are a set of predefined style settings that can be applied to widgets across the website. They provide a constant appearance by defining default styles for all the widget types.

2. Go to Content to modify:

  • Icon of the widget. Icon allows you to add or change the icon next to the item that best suits your website design. To do so:
    • Click Change Icon.
    • Go to General Icons and select the corresponding icon from the list.
    • Go to My Icons and select the corresponding icon from the list uploaded in Media> Vectors.

3. Go to Settings to modify:

  • Action - allows you to have control over the widget behavior and action. You can set it for the widget:
    • Slide - allows the cart to be displayed as a drawer in the public mode.
    • Cart Page - redirects customers to the cart page in public mode.
  • Visibility - allows you to modify the visibility setting of the widget on your website. You can specifically select who can view the widget according to the customer's location, session status, used device type, browser, language preference, etc. (see Visibility Settings).

After you have customized the Styles, Content, and Settings of the Shopping Cart widget, click the arrows to expand the Shopping Cart Drawer.

The Shopping Cart Drawer allows you to customize and make changes to the cart display in public mode.

Once you finished editing the drawer, click the space inside the widget to access and edit the Shopping Cart Drawer Wrapper.

Note: To access the Shopping Cart Drawer, you must drop the Shopping Cart widget and click the arrows of the widget, which will make the Shopping Cart Drawer Wrapper visible in your widgets list on the Left Panel.

Once you click the arrows, the Shopping Cart Drawer Wrapper opens, allowing you to edit and customize the cart display in public mode. You can edit and customize each element inside the drawer.

The Shopping Cart Drawer Wrapper displays the relevant information on the Cart Summary and other widgets according to your business requirements.

Modifying the Widget Modes

You can define the Shopping Cart Drawer Wrapper modes available from the Property Panel. The following modes are available:

  • Shopping Cart - provides a cart with a list of products for purchase and displays product quantity, price, and options for checkout and managing the items in the cart.
  • Empty Cart - indicates the empty cart with no items added and allows you to add a button encouraging customers to explore products by redirecting them to your product, category, and other pages.

Choose the state and customize it per your product requirements.

Note: You can also customize the Empty Cart page from Pages > Ecommerce > Empty Cart template page.

Due Today

The Due Today widget indicates the portion of the total cost that must be paid immediately to complete the transaction. The widget displays this information during checkout to provide customers with transparency regarding their immediate payments.

The widget becomes visible to the Visual Editor if you have enabled the Partial Payment from the Dashboard > Checkouts section.

1. Go to Styles to modify:

  • The CSS design framework States - Normal, Hover.
  • Global Styles - Make the necessary configuration of principal styling features from the Property Panel (see Global Styles). Global Styles are a set of predefined style settings that can be applied to widgets across the website. They provide a constant appearance by defining default styles for all the widget types.

2. Go to Settings to modify the widget Visibility on your website. You can specifically select who can view the widget according to the customer's location, session status, used device type, browser, language preference, etc. (see Visibility Settings).

Remaining Amount

The Remaining Amount widget refers to the sum of money that indicates the amount left to be paid after any initial payments or deposits have been made. This is displayed to customers during checkout to provide transparency about their financial responsibilities. The widget also displays the balance after applying loyalty points, assisting customers in tracking their final payment.

The widget becomes visible to the Visual Editor if you have enabled the Partial Payment from the Dashboard > Checkouts section.

1. Go to Styles to modify:

  • The CSS design framework States - Normal, Hover.
  • Global Styles - Make the necessary configuration of principal styling features from the Property Panel (see Global Styles). Global Styles are a set of predefined style settings that can be applied to widgets across the website. They provide a constant appearance by defining default styles for all the widget types.

2. Go to Settings to modify the widget Visibility on your website. You can specifically select who can view the widget according to the customer's location, session status, used device type, browser, language preference, etc. (see Visibility Settings).

Cart Summary

The Cart Summary widget allows your customers to review their selected items before proceeding to checkout, providing detailed information on their chosen products. The Property Panel of the widget includes Styles and Settings with several customization options.

1. Go to Styles to modify:

  • The CSS design framework States - Normal, Hover.
  • Layout - Customize the layout to match your product requirements by modifying the number of columns and rows, as well as adjusting the gap between them. This allows you to suit your specific needs based on the product type.
  • Global Styles - Make the necessary configuration of principal styling features from the Property Panel (see Global Styles). Global Styles are a set of predefined style settings that can be applied to widgets across the website. They provide a constant appearance by defining default styles for all the widget types.

2. Go to Settings to modify the widget Visibility on your website. You can specifically select who can view the widget according to the customer's location, session status, used device type, browser, language preference, etc. (see Visibility Settings).

Discount

The Discount widget on the Cart page allows customers to apply discounts to their orders. In the public mode, your customers enter the Coupon Code of the Manual discount type. All the product-related information is generated from the Dashboard > Discounts, where you have set up the relevant details.

You can also access the UI Elements available in the Design System from the upper-right corner of the Property Panel. Select one as a base for the widget, or create a new UI Element and style it according to your preferences.

Order Calculations

The Order Calculations widget shows the prices and costs (such as subtotal, tax, shipping costs, discounts, etc.) that should be calculated in the total widget.

All the product-related information is generated from the Dashboard > Settings, where you have set up the relevant details.

Total

The Total widget provides a total amount, covering the sum of all prices (tax, shipping, products, etc.), clearly representing the final amount to be paid.

These widgets have general Styles and Settings that you can modify from the Property Panel.

  1. Go to Styles to make the necessary configuration of principal styling features (see Global Styles). They are a set of predefined style settings that can be applied to widgets across the website. They provide a constant appearance by defining default styles for all the widget types.
  2. Go to Settings to modify the visibility setting of the widget on your website. You can specifically select who can view the widget according to the customer's location, session status, used device type, browser, language preference, etc. (see Visibility Settings).

💡If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.