Home / Widgets

Continue Button Widget

Unknown Author

Last updated on Nov 25, 2024

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

Tip: 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 Visual Editor by selecting Advanced mode from the mode switcher on the Dashboard top panel, or navigate to Dashboard > Channels > Advanced.
  2. Go to Pages > Ecommerce > Checkout Payment page.
  3. Open the Widgets list on the 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, expand Visibility and modify the widget visibility on your website. Select who can view the widget according to the customer’s location, session status, type of used device, 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, you can use the Dotted Menu to reset or override the widget styles. To do so:
  1. Click the Dotted Menu in the right corner of the Property Panel.
  2. Select Reset Styles to discard the changes made to the Continue Button and restore their default style.
  3. Select 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.