Home / Widgets

Physical Product Widgets

Customer Success Team

Last updated on Mar 22, 2024

The Physical Product Widgets grouping includes the widgets referring to all physical products. The widget grouping is designed to support the sale and management of physical products, providing a seamless and efficient shopping process.

Tip:

  • To use the Physical Product Widgets, make sure to drop the Product List widget onto the Layout Canvas and drop your required widget from the grouping.

  • You can access a single physical product page from Pages > Ecommerce > Physical Products.

Adding Physical Product Widgets

After creating the product, you can add its related widgets.

To add the Physical Product Widgets:

  1. Go to the Visual Editor from Channels on the Dashboard Left Panel.

  2. Open Pages > Ecommerce > Physical Product page.

  3. Navigate to the Ecommerce > Physical Product Widgets grouping on the Visual Editor Left Panel.

  4. Type the widget name in the search bar, or find it in the widget grouping.

  5. Drag the widget from the list and drop it into the Product List widget.

Configuring the Physical Product 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). \ Tip:

    • To get more widgets in the widget list of the Visual Editor, you need to add the product-related fields from the Dashboard > Products > Fields.

    • To drop the product-related widgets within the Product List, hold down the CTRL while doing so.

    Add to Cart

    The Add to Cart widget encourages your customers to start the purchase process. The label text area can be customized to suit your product requirements.

    Once you have added the Add to Cart widget, you can modify its Styles, Content (Global Styles), and Settings (Visibility Settings).

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

    1. Go to Styles to modify:
    • States - you can customize the styles for different states, such as Active, Disabled, or Selected. For instance, when an item is out of stock and in a disabled state, you can apply specific styles to convey this to your customers. These customized styles will be visible to the public when the product is out of stock.

    2. Go to Content to modify:

    • Icon - you can change and customize the widget Icon. The following Icon Styles are available:

      • Outlined

      • Filled

      • Two Tone

      • Animated

    • Label - you can edit the button text/label.

    3. Go to Settings to modify:

    • Added to Cart Action - when your customer adds a product to the cart, you have the option to choose the desired action:

      • No Action

      • Open on Cart Page

      • Redirect to Cart Page

    The Added to Cart Action allows you to customize the behavior after adding a product to the cart. You can also customize the widget-specific modes from the Property Panel. The following modes are available:

    • Normal - indicates the static state of the widget, referring to the state of the widget when it is not affected by any interaction.

    • Loading - indicates that it is currently processing or loading data. This often includes animations or indicators to show the loading state.

    • Out of Stock - alerts customers that the product is unavailable and cannot be purchased until it is restocked or becomes available again, either temporarily or permanently.

    • Success - indicates that a particular action or operation has been completed successfully. It is often used to provide positive feedback to the customer after they have taken a desired action.

In the case of out-of-stock, the public mode displays the out-of-stock disabled button, which is based on the Button (see Button Widget) widget customizations. You can style each mode with different colors or symbols to signify their status.

Once you have customized each mode specifically, you can use the Dotted Menu to either Reset or Override the widget styles.

  • Access Reset Styles to discard the changes made to the Add to Cart Button and restore its default style.

  • Access Override Styles to apply the changes made to the Add to Cart Button widget (font, size, alignment, etc.) to change its default style.

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

Stock Level

The Stock Level widget is essential for inventory management since it helps to provide real-time information on product availability and helps to manage stockout situations. The initial number provided in the template is 10 (including 10), and you can modify it according to your preferences from the Dashboard. The out-of-stock mode shows a disabled button on the public mode.

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

Once you have added the Stock Level widget, you can modify its Styles (Global Styles) and Settings (Visibility Settings).

Go to Settings to modify:

Quantity - refers to the number of available items in stock for a particular product, which is generated from your Project Dashboard.

Quantity

The Quantity widget allows your customers to select the desired quantity of a product before adding it to their cart. It is beneficial for your business to track your customer demand and manage inventory.

Once you have added the Quantity widget, you can modify its Styles (Global Styles) and Settings (Visibility Settings). All the product-related information is generated from the Dashboard > Products, where you set up the relevant details.

Width

Once you have added the Width widget, you can modify its Styles (Global Styles) and Settings (Visibility Settings). The product-related information is generated from the Dashboard > Products, where you set up the relevant details.

The Settings include showing/hiding the label of the widget.

Height

Once you have added the Height widget, you can modify its Styles (Global Styles) and Settings (Visibility Settings). The product-related information is generated from the Dashboard > Products, where you set up the relevant details.

The Settings include showing/hiding the label of the widget.

Depth

Once you have added the Depth widget, you can modify its Styles (Global Styles) and Settings (Visibility Settings). The product-related information is generated from the Dashboard > Products, where you set up the relevant details.

The Settings include showing/hiding the label of the widget.

Weight

Once you have added the Weight widget, you can modify its Styles (Global Styles) and Settings (Visibility Settings). The product-related information is generated from the Dashboard > Products, where you set up the relevant details.

The Settings include showing/hiding the label of the widget.

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