Home / Widgets

Checkout Shipping Widgets

Tech Writers Team @ Ucraft

Last updated on Sep 02, 2024

The Checkout Shipping widget grouping includes widgets that display information related to the shipping checkout process. They help customers make informed decisions about their shipping options and provide a structured layout for checkout steps.

Note: In order to access the Checkout Shipping widget grouping, open Pages > Ecommerce > Checkout Shipping template, and then open the required widgets list.

Adding Checkout Shipping Widgets

To add Checkout Shipping Widgets:

  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 > Checkout Shipping 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 > Checkout Shipping Widgets grouping.
  5. Drag and drop the requested widget from the list on the Layout Canvas.

Configuring the Checkout Shipping Widgets

You can configure and edit all the widgets under this grouping using the widget Styles and Settings on the Property Panel.

  1. Go to Styles to modify the necessary configuration of general styling features (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 Visibility of the widget on your website. 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).

Checkout Steps Summary

The Checkout Steps Summary widget provides an overview of the steps involved in the shipping checkout process. It displays a list of actions, indicating the customer's current position. Each step is accompanied by a description to give the customer a clear understanding of the process.

The purpose of this widget is to guide the customer through the checkout stages and to help them understand the overall structure of the checkout process.

Once you have added the Checkout Steps Summary widget, you can modify its Styles (see Global Styles), Content (label texts, icons), and Settings (see Visibility Settings).

Shipping Chooser

The Shipping Chooser widget enables customers to select their preferred shipping method from a list of available options. The product-related information is generated from the Dashboard > Settings > Shipping & Delivery, where you set up all the relevant details.

The widget displays various shipping options along with their corresponding titles, prices, estimated delivery times, and costs. The purpose of this widget is to allow customers to choose the shipping option that best suits their needs and preferences.

The Shipping Chooser widget data is derived from the Shipping Profile option that you have set up in the Dashboard > Settings > Shipping & Delivery section. When a customer selects a product for purchase, the Shipping Chooser widget displays a range of shipping options based on the customer's location and the Shipping Profiles you have configured (including a delivery time slot; see Dashboard > Settings > Shipping & Delivery).

Once you have added the Shipping Chooser widget, you can modify its Styles (see Global Styles) and Settings (see Visibility Settings).

You can define widget-specific modes for the Shipping Chooser:

  • Activated - in the public mode, the Shipping Chooser widget is displayed with its relevant information.
  • Not Activated - in the public mode, the following message is displayed (The support for shipping will be available soon).

In the Shipping Chooser widget, you can configure and select the mode of the Shipping Method.

  • Selected - in the public mode, the form becomes visible to the customer.
  • Not Selected - in the public mode, the widget does not display any form.

💡 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.