Image Slider Widget

Overview

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

The Image Slider Widget allows you to create one or more images with a title and text area overlaid on top of the image in a slider 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 an Image Slider Widget.

Content Entry Form

While entering content, you can upload the image, choose where the text should be overlaid (left, right, or center) and choose to either use lighter or darker text over the image. You can also enter the title and body (image caption) and add a link or button at the bottom of the image.

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

  • Image
    • The image to be used for the slider. For best results, the image should be rectangular. 
  • Text Position
    • Choose left, right or center positions, whichever works best for the image.
  • Use Light Text
    • By default, the text will be darker which works well for a lighter image. When selected, the text will be white, which works better for darker images. 
  • Title
    • The title to be displayed at the top of the text section. For best results, use only a few words.
  • Body
    • The caption text to be displayed below the title. For best results, a brief sentence fits best.
  • Link
    • Label
      • The text to use for the link, such as "Learn More".
    • URL
      • The url to link to.
    • CSS Classes
      • Classes to be added to the link to use your theme's styling.
    • Open in new window 
      • When selected, a visitor clicking the link will have the link open in a new browser tab or within the current tab.

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 Image Slider options:

  • Hide Arrows
    • When selected, the navigation arrows on the right and left of the active image will be removed.
  • Hide Pager
    • When selected, the navigation dots at the bottom of the image will be removed.
  • Randomize
    • By default, the order of the slides is the same order as they appear on the content entry form. Use this option to shuffle the order and display slides in a random order.
  • Slide interval
    • Controls auto-scrolling from slide to slide. If no value is entered, the widget will not automatically change slides. If a value is entered (in milliseconds), the value will be used as the delay between slides. For example, 1000 would delay the transition 1 second. 
  • Animation Effect
    • By default the transition between slides is a left to right slide motion. Alternatively, "Fade" can be selected here to fade from slide to slide instead of sliding.
  • Animation Speed
    • The time it takes to animate from slide to slide. The default is 500 milliseconds or 1/2 a second.

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.