Home / Widgets

Measurement Unit Picker Widget

Tech Writers Team @ Ucraft

Last updated on Sep 02, 2024

A Measurement Unit Picker widget helps customers select from various measurement units on your website. It displays the units you set up in Settings > Project Details for the products (see Measurements). 

Adding a Measurement Unit Picker Widget 

To add a Measurement Unit Picker widget:

  1. Go to the Visual Editor by clicking Design on the Dashboard top panel or by navigating from Dashboard > Channels > Design.
  2. Navigate to the Widgets list on the Visual Editor Left Panel.

  3. Type the widget name in the search bar, or expand the Ecommerce > Physical Product Widgets grouping and select the Measurement Unit Picker widget.

Configuring the Measurement Unit Picker Widget

Once you have added the Measurement Unit Picker widget, click it to activate the Property Panel, where you can customize its Styles, Content, and Settings according to your preferences.

To configure the Measurement Unit Picker widget:

  1. Go to Styles to customize the widget styling features (see Global Styles).
  • Select the current condition of the widget from the State dropdown: Normal or Hover.
  • Select the widget display when triggered from the Mode drop-down list:
    • Dropdown - a compact menu that expands to show options.
    • Radio - a list of circular buttons that only one can be selected at a time.
    • Image Swatch - a grid of images, each representing an option.
    • Text Swatch - a grid of text options in button-like format.

2. Go to Content to add a hyperlink within the widget:

  • Expand the Link and click Add Link to add clickable phone numbers and email addresses or navigate your customers to your website's Main or System pages, products, collections, or collection items. You can redirect your users to external and internal websites, allowing your customers to navigate to specific destinations in a new tab or by replacing the current tab.

3. Go to Settings, expand Visibility, and select who can view the widget according to the customer’s location, session status, type of used device, browser, language preference, etc. (see Visibility Settings).

Tip: You can 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.

 

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