The Buy Now widget allows your customers to quickly purchase a product with a single click or interaction. It takes your customers directly to the checkout page without affecting the items stored in the Cart. The widget makes it easier for customers to make purchases or complete transactions without having to navigate through multiple pages or forms.
Adding a Buy Now Widget
To add a Buy Now widget:
- Go to Visual Editor by selecting Advanced mode from the mode switcher on the Dashboard top panel, or navigate to Dashboard > Channels > Advanced.
- Open Page on the top panel and navigate to the corresponding product page.
- Open the Widgets list on the left panel.
- Type the widget name in the search bar, or expand the corresponding product type grouping under Ecommerce and select the Buy Now widget.
- Drag and drop the Buy Now widget from the list onto the desired crafting area of the Layout Canvas.
Configuring the Buy Now Widget
Once you have added the Buy Now widget, click it to activate the Property Panel where you can customize its Styles, Content, and Settings according to your preferences.
To configure the Buy Now widget:
- Go to Styles to modify the widget styling features:
- Select the widget mode from the Mode drop-down list to provide users with information or functionality based on the product's current state. 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.
Note: If the Out of Stock mode is selected, the public mode displays the out-of-stock disabled button based on the Button widget customizations. You can style each state with different colors or symbols to signify their status.
- Configure the principal styling features (see Global Styles).
2. Go to Content to modify the widget content:
- Click Change Icon to add or change the icon next to the widget that best suits your website design.
- 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.
- Modify the brief and descriptive text of the widget in the Label Text field. The label provides a brief description or name for the action or feature associated with the item, e.g. “Purchase Now“, “Shop Now“, etc.
3. Go to Settings and expand Visibility to modify the widget visibility on your website. 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: You can access the UI Elements 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. 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 widget, and restore its default style.
- Select Override Styles to update the default style of the base element (font, size, alignment, etc.) and the elements derived from the base one.
💡 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.