The Add to Cart widget allows your customers to add a product to their shopping cart, making it easy for them to begin the purchase process.
Adding an Add to Cart Widget
To add an Add to Cart widget:
- Go to the Visual Editor by clicking Design on the Dashboard top panel or by navigating from Dashboard > Channels > Design.
- Navigate to the corresponding product page from Pages > Ecommerce.
- Go to the Widgets list on the Visual Editor Left Panel.
- Type the widget name in the search bar, or expand the corresponding product type grouping under Ecommerce and select the Add to Cart widget.
- Drag and drop the Add to Cart widget from the list onto the desired crafting area of the Layout Canvas.
Configuring the Add to Cart Widget
Once you have added the Add to Cart widget, click it to activate the Property Panel where you can customize its Styles, Content, and Settings according to your preferences.
To configure the Add to Cart 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.
- 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.
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.
3. Go to Settings:
- Select Added to Cart Action to opt for the desired action, when your customer adds a product to the cart. The following options are available:
- No Action
- Open on Cart Page
- Redirect to Cart Page
- Start Checkout
- Expand Visibility to modify the visibility of the widget 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. 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 specifically, 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 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.