Slideshow

The Slideshow extension lets you add a carousel of images to your website using Site Management Tools. You can upload several images, select the focus of the image, and apply a dark or light overlay. Images slide automatically, and you can select the duration in seconds between each slide transition. You can link each image to an external or internal URL and add a call-to-action button. You can choose the text color based on your theme settings and select the position of your content. For example, with Slideshow, you can showcase featured products or highlight new collections.

Important:

Commerce extensions are only available if provisioned, installed, and activated for a selected domain in your account. For more information, see Commerce Extensions.

Note:

Extensions require SuiteCommerce or the Aconcagua release of SCA or later.

You can add a slideshow to multiple areas on your website using Site Management Tools. For more information on Site Management Tools, see Site Management Tools Overview.

To add a slideshow:

Go to the page where you want to add a slideshow.
Click Add on the Site Management toolbar.
Drag the Slideshow content type to the page.

Note:
If you do not see this content type, check that the extension has been installed and has been activated. Click Settings on the Site Management toolbar to access the Custom Content Type Settings. Drag the content type from the Inactive Content Types list to the Active Content Type list.

You can drag the Slideshow content type to multiple areas on the page:
- If you drag it to an area marked as all pages, then the content displays on any page that contains that area.
- If you drag it to an area marked as page type, then the content displays on any page of that type.
- If you drag it to an area marked as this page, then the content displays only on the page that you add it to.
In the General tab:
1. Use the Name field to enter a description of your new content.
2. Set the content visibility options.
  
  See Visibility Dates.
3. If you do not want images to change automatically, clear the Automatic Slideshow box.
4. In Transition Duration, select the delay in seconds between each image change.
5. In Section Height, determine the size of your slideshow.
  
  Note:
  On desktops, an image is resized to fit the container. On mobile devices, the section height is always small, and an image is cropped to fit the container.
6. Use the Tags field to enter keywords that help you filter your content.
  
  See Content Tags and Filter Tools.
In the Image tabs:
1. Select the image you want to display using the Image Manager.
  
  See Image Manager. A preview displays in the page.
  
  Note:
  If you upload several images, all images should have the same resolution for optimum display.
2. In the Image Alignment field, select the positioning of the image within the content box.
  
  You can choose the focus of your image. The options are top, center, or bottom.
3. In the Image Overlay field, select the opacity for your image.
  
  You can select dark, light, or no overlay.
4. In the Alt Text field, enter a description of the image.
  
  This text is used to improve web accessibility for visually impaired users and for SEO purposes.
5. Enter the text you want to display in the slideshow in the Text field.
  
  You can use basic HTML formatting tags such as <strong> for bold text, <em> for italic, and <li> for bullet lists, for example. When entering your text, you should enclose any body text with <p> tags and use <h> tags to create headers.
6. In Text Alignment, select the positioning of the text content and the button.
  
  You can choose left, right, or center aligned.
7. In the Text Color field, choose the color you want for the text fields.
  
  By default, the colors are taken from your theme. If you select Dark, the text uses the dark text color as defined in your theme. If you select Light, the text uses the light text color as defined in your theme.
8. Enter the text you want to display on the button in the Button Text field.
  
  If you leave this field blank, the button does not display.
9. In the Button Style field, choose the appearance of the button that you want to display. The button definition is taken from the theme.
10. In Button Link, enter the URL address you want to open when the user clicks the button.
11. Select Open in New Window if you want the button link to open in a new tab or window.
Repeat step 5 to include additional images. You can add up to 8 images.
Click Save.

If you have not published your slideshow and you decided to remove it, you can discard it. If you have already published your slideshow, you can remove it directly from the page where it is located. For more information on the differences between discarding or expiring content, see Discard Content Vs Expiring Content.

To discard a slideshow:

Go to the Review & Publish Changes list.
Select the slideshow content in the list.
Click Discard.
Click OK.

To remove a slideshow:

Go to the page that contains the slideshow you want to remove.
Click the Slideshow box.

This highlights it and displays the content controls.
Click Remove.
Click OK.

To change the button link or alternative text:

Go to the page that contains the slideshow.
Click the Slideshow box, and then click the Settings button.

This displays the Slideshow Settings in the side panel.
Enter the URL for the link in the Button Link field or enter the alternative text in the Alt Text field.
Click Save.

Example

This example shows a slideshow with a button applied to the image.