The Quotes widget displays your customers' positive feedback and comments as motivational quotes on your website. The widget enables you to build trust with potential customers by providing social proof of the quality of the products or services offered. The Quotes widget includes features like star ratings, customer photos, and brief descriptions of the reviewer’s experience. You can strategically place the widget on product, home, or checkout pages to influence your customer's purchasing decisions.
Adding a Quotes Widget
To add a Quotes widget:
- Go to the Visual Editor by clicking Design on the Dashboard top panel or by navigating from Dashboard > Channels > Design.
- Navigate to the Widgets list on the Visual Editor Left Panel.
- Type the widget name in the search bar, or expand the Advanced grouping and select the Quotes widget.
- Drag and drop the Quotes widget from the list onto the desired crafting area of the Layout Canvas.
Configuring the Quotes Widget
Once you have added the Quotes widget, click it to activate the Property Panel, where you can customize its Styles, Content, and Settings according to your preferences.
To configure the Quotes widget:
- Go to Styles to customize the widget styling features (see Global Styles).
- Go to Content to configure the widget content:
- Click + Add Quote to add a customer’s quote.
- Click the Dotted Menu and select the corresponding option to rename or duplicate the quote.
- Click and hold the quote on the left side, then move it to the desired position to reorder the added quotes.
3. Go to Settings to modify the widget settings:
- Enable/disable Arrows to display/hide the navigation arrows that enable the users to move back and forth between items, giving them control over the displayed content.
- Enable/disable Pagination to display/hide the pagination that enables users to navigate through different pages of content.
- Tick Dots/Numbers to indicate how the pagination is presented: dots or numbers.
- Expand Auto-slide and enable/disable the Auto-slide toggle to activate/deactivate the automatic transition or movement of quote slides within a slideshow without user interaction.
- Expand Transitions and select the transition effect of quote slides: Horizontal, Vertical, and Fade in.
- Select the type of easing from the respective drop-down list.
- Indicate the easing duration.
- Expand Visibility and 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 Quote Element
Once you have added a quote, you can modify the Styles, Content, and Settings of the Quote element according to your preferences.
To do so:
- Click the Quote element.
- Go to Styles to configure the principal styling features (see Global Styles).
- Go to Content to modify the element content:
- Click Change Image and select the customer image or upload the media content from the computer, free stock (powered by Unsplash), or insert a URL and click Select.
- Select how the image is resized and fitted within its container from the Object Fit drop-down list:
- Cover - the image is scaled to cover the entire container, filling it without any letterboxing.
- Contain - the image is scaled to fit within the container while maintaining its aspect ratio.
- Fill - the image stretches to fill the entire container, potentially causing distortion if the aspect ratio is not maintained.
- Enter the customer’s name.
- Enter the customer’s feedback or comment.
3. 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 Quotes Widget Elements
Once you have configured the Quotes widget, you can modify its corresponding elements according to your preferences. This allows you to define the appearance and functionality of the widget on your website.
The following elements are available:
- Quote
The element allows you to manage the content of quotes displayed within the Quotes widget (see Modifying the Quote Element). - Image
The element allows you to modify the uploaded image. To do so:
1. Click the Image element.
2. Go to Styles to configure the principal styling features (see Global Styles).
3. Go to Content.
4. Click Change Image to change the customer image.
5. Select how the image is resized and fitted within its container from the Object Fit drop-down list.
6. Enter the Alt text.
7. 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.
Tip: You can also access the UI Elements in the Design System from the upper-right corner of the Property Panel. Select one as a base for the Image element, or create a new UI Element and style it according to your preferences. To do so:
1. Click the Dotted Menu on the Property Panel.
2. Select Reset Styles to discard the changes made to Image and restore its default style.
3. Select Override Styles to update the default style of the base element (font, size, alignment, etc.) and the elements derived from the base one.
- Title
The element allows you to modify the style and visibility of the customer’s first and last name. To do so:
1. Click the Title element.
2. Go to Styles to configure the principal styling features (see Global Styles).
3. Go to Content.
4. Edit the first and last name of the customer.
5. 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.
- Paragraph
It allows you to modify the text of the widget. To do so:
1. Click the Paragraph property.
2. Go to Styles to configure the principal styling features (see Global Styles).
3. Go to Content and edit the paragraph text.
4. 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.
- Button
The element allows you to add or change the icon of the navigation arrow that best suits your website design. To do so:
1. Click the Button element.
2. Go to Styles to configure the principal styling features (see Global Styles).
3. Go to Content.
4. Click Change Icon to add or change the icon of the navigation arrow.
5. Go to General Icons and select the corresponding icon from the list.
6. Go to My Icons and select the corresponding icon from the list uploaded in Media> Vectors.
7. Enter the label text.
- Pagination
The element allows you to modify the style of the Pagination icon on the right side Property Panel (see Global Styles). - Pagination Item
The element allows you to modify the style of the pagination item on the right side Property Panel (see Global Styles). You can set the state of the pagination item to define how the pagination is displayed on your website. The following states are available: Active and Inactive.
💡 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.