Rental Product Widgets

The Rental Product Widgets grouping includes the widgets referring to an item or service that is offered for temporary use or lease. The grouping includes a collection of widgets designed to facilitate the temporary lease of items.
Tip: To use the Rental Product Widgets, make sure to drop the Product List widget onto the Layout Canvas and drop your required widget from the grouping.

Adding Rental Product Widgets

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

To add the Rental Product Widgets:

Go to Visual Editor by selecting Advanced mode from the mode switcher on the Dashboard top panel, or navigate to Dashboard > Channels > Advanced.
Navigate to Pages > Ecommerce > Rental Product page.
Open the Widgets list on the left panel.
Navigate to the Ecommerce > Rental Product Widgets grouping.
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 Rental 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).
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, press CTRL.

Rent Now

The Rent Now 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 Rent Now widget, you can modify its Styles, Content (see Global Styles), and Settings (see Visibility Settings). The product-related information is generated from the Dashboard > Products > Rental, where you set up the relevant details.

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

Added to Cart Action allows you to customize the behavior after adding a product to the cart. You can also customize the widget-specific mode 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.

Tip:

You can access the UI Elements in the Design System. To do so, click the bookmark icon in the upper-right corner of the Property Panel. Select one as a base for the widget, or click the plus icon to create a new UI Element and style it according to your preferences.
Once you have customized each mode, you can use the Dotted Menu to reset or override the widget styles. To do so:

Click the Dotted Menu in the right corner of the Property Panel.
Select Reset Styles to discard the changes made to the Rent Now and restore its default style.
Select Override Styles to apply the changes made to the Rent Now widget (font, size, alignment, etc.) to change its default style.

Renting Options

The Renting Option widget refers to a choice that is available when renting a particular product or service.

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

You can customize widget-specific modes. The following modes are available:

Hourly Rental
The option enables your customers to rent the product for a specific number of hours.
Daily Rental
The option enables your customers to rent the product for a full day.

In the Dashboard > Products, you can set Daily, Hourly, and Both (Daily and Hourly basis) options, and business hours from the Settings section within Dashboard.

Location Link

The Location Link widget refers to a URL or link that provides the location details. It includes information on the address and directions. The product-related information is generated from the Dashboard > Products, where you set up all the relevant details. You can also add or change the location from Dashboard > Settings > Warehouses.

Once you have added the Location Link widget, you can modify its Styles, Content (see Global Styles), and Settings (see Visibility Settings).

Availability

The Availability widget refers to the time periods or dates during which a renting item is open for scheduling. It specifies the times when products can be rented based on your configured date and time availability. Public users can view the available time slots and choose a suitable one for their time.

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

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