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.
Tips:
- 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:
- Go to the Visual Editor from Channels on the Dashboard Left Panel.
- Open Pages > Ecommerce > Physical Product page.
- Navigate to the Ecommerce > Physical Product Widgets grouping on the Visual Editor Left Panel.
- Type the widget name in the search bar, or find it in the widget grouping.
- 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.
- 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.
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).
Tips:- 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 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.
- 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.