Home / Widgets

Slide Bar Widget

Tech Writers Team @ Ucraft

Last updated on Oct 15, 2024

The Slide Bar widget is commonly used in the mobile application. It serves as a container that slides up from the bottom of the screen to display additional information without obstructing the main content of the screen. The Slide Bar widget gives customers easy access to the order summary or filter widget, enhancing the mobile experience. You can use the Slide Bar widget on any page to assemble all the required widgets inside it, creating overlay content and layout.

Adding a Slide Bar Widget

To add a Slide Bar widget:

  1. Go to the Visual Editor by clicking Design on the Dashboard top panel or by navigating from Dashboard > Channels > Design.
  2. Navigate to the corresponding page on the Top Bar.
  3. Go to the Widgets list on the Visual Editor Left Panel.
  4. Type the widget name in the search bar, or expand the Essentials grouping and select the Slide Bar widget.
  5. Drag and drop the Slide Bar widget from the list onto the desired crafting area of the Layout Canvas.

Configuring the Slide Bar Widget

Once you have added the Slide Bar widget, click it to activate the Property Panel, where you can customize its Styles and Settings according to your preferences.

To modify the Slide Bar widget:

  1. Go to Styles to configure the principal styling features (see Global Styles).
  2. Go to Settings and 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, type of used device, browser, language preference, etc. (see Visibility Settings).

Modifying the Slide Bar Widget Properties

Once you have configured the Slide Bar widget, you can modify its corresponding properties. This allows you to define the appearance and functionality of the widget on your website.

The following properties are available:

  • Paragraph allows you to modify the text of the widget. To do so:
    • Click the Paragraph property.
    • Go to Styles to configure the principal styling features (see Global Styles).
    • Go to Content and edit the paragraph text.
    • Expand Link and click Add Link to add clickable phone numbers and email addresses or navigate your customers to your website's Main or System pages, products, collections, or collection items. You can redirect your users to external and internal websites, allowing your customers to navigate to specific destinations in a new tab or by replacing the current tab.
  • Icon allows you to add or change the slide bar icon that best suits your website design. To do so:
    • Click the Icon property.
    • Go to Styles to configure the icon principal styling features (see Global Styles).
    • Go to Content.
    • Click Change Icon to add or change the slide bar 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.
    • Go to Settings and expand Visibility to select who can view the widget property according to the customer’s location, session status, type of used device, browser, language preference, etc. (see Visibility Settings).

Adding Content within the Slide Bar Widget

You can add widgets within the Slide Bar widget to create overlay content. To do so:

  1. Click the expand icon on the Slide Bar widget to open Overlay Container․
  2. Go to Styles on the right side Property Panel to configure its principal styling features (see Global Styles).
  3. Drag and drop the required widgets onto the container and customize their style according to your website design.

 

💡 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.