Home / Widgets

Continue Button Widget

Tech Writers Team @ Ucraft

Last updated on Sep 02, 2024

The Continue Button widget serves as a clear call-to-action prompt, guiding customers toward finalizing their purchase.

Tip: In order to be able to publish the shipping-related page, the required widgets must be present on that page:

  • Shipping Chooser
  • Continue Button

Adding a Continue Button Widget

To add a Continue Button widget:

  1. Go to the Visual Editor by clicking Design on the Dashboard top panel or by navigating from Dashboard > Channels > Design.
  2. Open Pages > Ecommerce > Checkout Payment page.
  3. Go to the Widgets list on the Visual Editor Left Panel.
  4. Type the widget name in the search bar or open the Ecommerce > General Widgets grouping.
  5. Drag and drop the widget from the list onto the desired crafting area of the Layout Canvas.

In the public mode, the checkout page concludes with a Continue button; after clicking it, the customers advance to the next checkout process step.

Configuring a Continue Button Widget

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

  1. Go to Styles of the Property Panel to modify the widget states and modes. 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.

See the Button Widget for more detailed information on Styles, Content, and Settings.

2. Go to Content of the Property Panel and modify the widget content, specifically:

  • Change the Icon. 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.

3. Go to Settings of the Property Panel and 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).

You can also 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.

You can use the Dotted Menu on the Property Panel to:

  • Access Reset Styles to discard the changes made to the Continue Button and restore their default style.
  • Access Override Styles to apply the changes made to the Continue Button widget (font, size, alignment, etc.) in order to change its default style.

💡 If you have any 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.