Media - Slider

Open the page, block, or dynamic block where you want to place the slider and expand the Content section.

In the Page Builder panel, expand Media and drag a Slider placeholder to a row, column, or tab on the stage.

In the following example, the background color of the row is yellow (#fffd16).

{width="600" modal="regular"}

The slider container is displayed on the stage with a single, empty slide.

Click in the slider container to display the text editor and enter content for the first slide.

You can also include more complex banner content using the Content settings.

Click the navigation dot at the bottom of the slider to display the toolbox for the individual slide and choose the Settings ( {width="20"} ) icon.

Sliders have two toolboxes. Be sure that you are using the slide toolbox at the bottom.

Complete the settings, as needed, according to following sections:

• Appearance
• Background
• Content
• Search Engine Optimization
• Advanced

When complete, click Save to apply the settings and return to the Page Builder workspace.

Click the navigation dot below the slide to display the toolbox and choose the Duplicate ( {width="20"} ) icon.

{width="500" modal="regular"}

Click the navigation dot for the new slide and to display the toolbox and choose the Settings ( {width="20"} ) icon.

Modify the settings, as needed, according to following sections:

• Appearance
• Background
• Content
• Advanced

When complete, click Save to apply the settings and return to the Page Builder workspace.

Hover over the slider container at the top to display the toolbox and choose the Add ( {width="20"} ) icon.

{width="500" modal="regular"}

A new blank slide with its own navigation dot and toolbox is added to the slider and displayed on the stage.

{width="500" modal="regular"}

Click the navigation dot for the new slide and to display the toolbox and choose the Settings ( {width="20"} ) icon.

Modify the settings, as needed, according to following sections:

• Appearance
• Background
• Content
• Advanced

When complete, click Save in the upper-right corner to close the Edit Slide page.

Create the widget that you want to see on a slide.

Open the page, block, or dynamic block where you want to place the slider and expand the Content section.

In the Page Builder panel, expand Media and drag a Slider placeholder to a row, column, or tab on the stage.

Click in the slider container to display the text editor toolbar and click the Insert Widget ( {width="20"} ) icon.

Select the Widget Type you need.

Specify the settings, which are different depending on the type of widget

{width="600" modal="regular"}

When complete, click Insert Widget in the upper-right corner.

Modify the other settings as needed.

When complete, click Save in the upper-right corner.

{width="600" modal="regular"}

Change the slider display on the stage and view the slide you want to change.

On the individual slide toolbox, choose the Settings ( {width="20"} ) icon and complete the settings, as needed, according to following sections.

In the upper-right corner, click Save to apply the settings and return to the Page Builder workspace.

Choose one of the following slide placement types:

{width="600" modal="regular"}

Enter the Slide Name.

When you are working in edit mode, the slide name appears as a tooltip above the navigation dot. The slide name is not visible from the storefront.

{width="500" modal="regular"}

Enter the Minimum Height for the slide.

The minimum height can be a number with any valid CSS unit (such as 100px, 50%, 50em, 100vh) or a calculation (such as 100vh - 237px).

For example, you can set the slide’s minimum height to cover the full height of the page, then use background images and videos for compelling design options.

Click the placeholder or existing text and enter the new text that you want to appear on the slide.

The editor toolbar appears above the text box.

Use the editor toolbar to enter and format text, as well as insert elements, such as links, images, and widgets.

{width="500" modal="regular"}

Click the navigation dot at the bottom of the slider to display the toolbox for the individual slide and choose the Settings ( {width="20"} ) icon.

In the Content section, enter the Message Text that you want to appear with the slide.

Scroll down to the Content section and use the Message Text editor to enter and format banner text.

You can also insert elements, such as text links, images, and widgets.

Format the text as needed using the editor toolbar.

The first slide in this example has a background image, but no message text. The Buy 3 Get 1 Free text above the slider is in a Text container (added later).

If needed, specify a Link for the slide.

The link is the destination page that appears when the customer clicks the slide area. You can use one of three link types:

• URL - Links to either a relative or fully qualified URL.

• Product - Identifies the destination page based on the product name or SKU. Search for the product by name based on either a partial or full name. Choose the product from the search results list.

  {width="600" modal="regular"}

• Category - Identifies the destination page as a specific category or subcategory in the category tree. Search for the category based on either a partial or full name. Choose the category from the expanded section of the displayed tree.

  {width="600" modal="regular"}

• Page - Identifies the destination page as a specific content page. Search for the page based on either a partial or full name. Choose the page from the search results list.

  {width="600" modal="regular"}

Starting with the 2.4.1 release, Page Builder no longer supports linking the slide and links within the nested text due to issues with display on the storefront. If you are using a link in the _Message Text_, you cannot configure the _Link_ option. If you prefer to use a single link for the whole slide, you can remove all links from the text.

{width="300"}

If you want to prevent the visitor from navigating away from your store, select the Open in new tab checkbox. When the checkbox is cleared, the linked destination opens in the same browser tab, which could effectively navigate the visitor away from your store.

If needed, add a button to prompt customers to follow the link.

The slide Appearance position places a single link or button below the text. Complete the properties of the link or button that you want to add.

{width="600" modal="regular"}

• Set Show Button to one of the following:

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Option	Description
  Always	A button always appears on the slide.
  On Hover	A button appears on the slide only on hover.
  Never Show	A button never appears on the slide.

• Enter the Button Text to display on the button.

• Set Button Type to one of the following:

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Option	Description
  Primary	Applies the primary button style from the current style sheet.
  Secondary	Applies the secondary button style from the current style sheet, if applicable.
  Link	Creates a hyperlink rather than a button.

  The button style from the current theme determines the button format. Typically, a primary button has a more prominent background color than a secondary button.

Set Show Overlay to one of the following:

You can use an overlay to apply a background color to the active content area that is defined by the Appearance setting. The slide background image remains visible for the full width of the slide.

{width="600" modal="regular"}

If you choose to show an overlay, set the Overlay Color:

• Click the No Color swatch, and choose a swatch.
• In the Color field, either enter a valid color name, or hexadecimal value.

{width="600" modal="regular"}

To control the horizontal positioning of content added to the slide, choose the Alignment:

Set the Border style that is applied to all four sides of the slide:

If you set a border style other than None, complete the border display options:

{width="600" modal="regular"}

(Optional) Specify the names of CSS classes from the current style sheet to apply to the slide.

Separate multiple class names with a space.

Enter values, in pixels, for the Margins and Padding to specify the outer margins and inner padding of the slide.

Enter each corresponding value in the slide diagram.

In the Page Builder panel, expand Elements and drag a Text placeholder to a row, column, or tab set on the stage.

As you drag, a red guideline marks the insertion point above the slider.

{width="600" modal="regular"}

Use the editor to format the text as needed.

{width="500" modal="regular"}

Hover over the slider container to show the main toolbox and choose the Settings ( {width="20"} ) icon.

{width="500" modal="regular"}

Enter the Minimum Height for the slide.

The minimum height can be a number with any valid CSS unit (such as 100px, 50%, 50em, 100vh) or a calculation (such as 100vh - 237px).

For example, you can set the minimum height of a slider to stretch the full height of the page, giving you compelling options for full-page background images and videos.

{width="400"}

If you want the slider to begin when the page loads, set Autoplay to Yes and set Autoplay Speed to the number of milliseconds in the delay between slides.

By default, the speed is set to 4000 ms, which is four seconds. If you set autoplay to No, the first slide appears by default and the customer must click the slide navigation (dots or arrows) to display the next slide in sequence.

{width="600" modal="regular"}

To smooth the transition from one slide to the next, set Fade to Yes.

With fade, the slides seem to stay in place, but the content changes smoothy from one to the next. Without fade, you see the horizontal movement from one slide to the next.

{width="600" modal="regular"}

To make the slideshow repeat indefinitely while the page is open, set Infinite Loop to Yes.

To choose the type of navigation controls for the slider, do the following:

• To include Next and Previous arrows on the left and right side of each slide, set Show Arrows to Yes.

• To include a set of navigation dots below the slider, set Show Dots to Yes.

{width="600" modal="regular"}

Complete the Advanced slider settings as needed.

When complete, click Save to apply the settings and return to the Page Builder workspace.

To control the positioning of the slides within the parent slider container, choose the Alignment:

Set the Border style that is applied to all four sides of the slider container:

If you set a border style other than None, complete the border display options:

(Optional) Specify the names of CSS classes from the current style sheet to apply to the slider container.

Separate multiple class names with a space.

Enter values, in pixels, for the Margins and Padding to determine the outer margins and inner padding of the slider container.

Enter the corresponding values in the diagram.

Open the page where you have included the slider, set Enable Page to Yes.

In the upper-right corner, click the Save arrow and choose Save & Close.

Find the page in the Pages grid and select View in the Action column.

{width="600" modal="regular"}

When you preview the slider, resize the window so you can see how it appears on a mobile device.

{width="400" modal="regular"}