Slideshow Component

The slideshow component is perfect for communicating with your shoppers.



Add the Slideshow Component to your Store

Navigate to the Store you wish to add the Slideshow component to:

  • Click Style Editor


  • Click Blue Plus Sign (+) on the bottom right


  • Filter to SlideShow
  • Click Layout 1


Slideshow Component Setup

Once you have selected to add the Slideshow component to your store, a set of options will appear on the toolbar to your left and the Slideshow box will appear on your homepage in a live preview. Here you can add images, buttons, and specific settings to optimize the use of this feature. 

Note: This component and its text will automatically inherit the styling and font of your Store.

Choose from the following Settings:

  • Colors
  • Options
  • Slides



Colors: This allows you to choose the background color of the slideshow component. You may use the color box to move and click on a color, or if you have a hex value you can insert that value into the Hex field.  

Pro Tip: You may click the arrows to the right of the Hex field to view the colors in Hex, RGB, or HSL. (See Image #2 below)


Options: Here you can select the Animation Type and Rotational Interval (speed). (See Image #3 below)  

When selecting Animation type, you have the option to display the image with a Fadeor Slide.

When selecting Rotational Interval, you have the option to choose the speed from 0s(seconds) to 12s (seconds) in intervals of 2 seconds. If 0s (seconds) is chosen, the image stays static and will only move manually.


Slides: Here you can add up to as many "Slides"/slideshow images as you desire. The minimum slide count is two, so when you add this component to your store it will preload two slide drop-downs to complete settings for. There is no maximum slide count. You are free to add as many as you would like. 

Upload an Image: The recommended size of the image being uploaded is 1200 px by 500 px.

Note: Only .png, .jpg, .jpeg, and .gif files are compatible for upload. No vector images can be uploaded.

  • Increase Contrast: This option will change the text color to make it contrast better on the image you have uploaded.
  • Heading: This is the title of the slide or the banner you are marketing.
  • Subheading: This is the text that goes beneath the heading. You may use this for a quick marketing tagline or description.
  • Button Text: If you wish to enter text into this field, it will add a button to your Slide that will be a clickable link.
  • Link: This field allows you to enter the URL of the Button text that will be clickable. When a user clicks on the Button, it will navigate them to the web page you have indicated here. If no Button text is added, but the link field has a URL, the whole Slide image will be clickable and redirect.

NOTE: When linking to a URL, make sure to include the entire url address, including the http:// or https://. Example:

  • Text Position: Allows you to dictate the alignment of the Slide text and button. Left, Center, and Right alignment are available to choose from.
  • Delete Slide: This will remove this slide from your Slideshow component.

If you wish to add additional slides you can do so by clicking the blue link at the bottom.

When you are satisfied with the Slides you have configured, be sure to Save & Publish at the top right-hand corner of the edit component screen.