Testimonials Widget

Overview

This article covers specific setup and content entry for the Image Testimonials Widget. If you've never set up a Widget, check the Setup Guides Section for a step by step guide for getting started.

The  Testimonials Widget is a flexible content area that allows you to configure a one or more testimonials that can cycle that will be displayed on the front end of your store. 

Widgets in Custom Fields do not require custom development. They come with all fields configured, as well as basic styling including CSS, Javascript and all metafield code needed. Widgets are also easily customized to suit your theme style or content entry requirements.   

The image below shows an un-styled version of a  Testimonials Widget.

Content Entry Form

While entering content, you can enter the quote and the quote's author using the default widget setup.

By default, the Widget's content entry form will include the following:

• Quote
  
  • The text of the quote to be displayed.
• Author
  • The author to attribute the quote to. 

Theme Settings

Many customization options are built into Shopify's theme editor for this widget. In addition to basic design settings that apply to all widgets, such as margins, fonts, line heights, and more, this widget also includes Testimonials options:

• Hide Arrows
  • By default, when multiple testimonials have been added, the widget will have left and right arrows for navigation. Selecting this checkbox will hide the arrows.
• Hide Pager
  • By default, when multiple testimonials have been added, the widget will have dots at the bottom of the widget for navigation and a visual cue to the number of testimonials. Selecting this box will remove the dots.
• Randomize
  • By default, slides will be shown in the order they are set in the the content entry form. Checking this option will randomize the slide order.
• Slide Interval
  • By default, the slides will not automatically move to the next slide. Setting this to an interval in milliseconds will change the behavior to show a slide, then pause for the interval set, then show the next slide. For example, entering 1000 would create a 1 second interval.
• Variable Height
  • By default, the slide with the most text in the body field will determine the height of the widget. If one slide has much more text than the other slides, this option will change the height of the widget dynamically, depending on which slide is being shown.
• Animation Speed
  • As slides change, the change in text and height is animated. Speed up or slow down the animation with this value.

Customization

To edit configuration for this Widget, head into the Configure section in the sidebar under your item type, for example, under Products, choose Configure. Hover on the Widget to see options. 

Adding New Fields

From the Configure screen, select the plus to add more fields to this widget. 

Code

Select the code symbol to edit the basic HTML and liquid code for this widget.

HTML and liquid in our templates may be edited in the app or directly in your theme. 

CSS can only be edited in your theme. The code page links to the correct theme file to edit the CSS. 

Javascript for this widget is not editable. You may use your own javascript or a library if you wish. Simply remove the css class "cf-auto-init" in the widget template to prevent the built-in javascript from firing.

Customizing Content Entry Fields

Some fields may have additional configuration options. For example, you might want to add some help text for your administrator on a particular field.