Slider

Use the Slider content type to add a slideshow of images to the stage. You can upload new images, or choose existing images from the gallery or product catalog. A slider can be set to play automatically, or be controlled manually with navigation buttons. In the following example, you will learn how to create a responsive slider that features and links to specific products. To associate the slider with a specific promotion, see: Dynamic Block.

Slider in Storefront

Step 1: Add a Slider

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

  2. In the Page Builder sidebar under Media, drag a Slider placeholder to a row, column, or tab on the stage.

    In this example, the background color of the row is yellow (#ffd16).

    Drag Slider to Stage

  3. Sliders have two toolboxes. Hover anywhere over the slide to show the main toolbox at the top of the container. Then, click the navigation dot at the bottom of the slide to show the toolbox for individual slides.

    Individual Slide Toolbox

Step 2: Set Up the First Slide

  1. On the individual slide toolbox, choose Settings ( ). Then, complete the settings, as needed, in the following sections:

    Appearance

    • Set Appearance to one of the following:

      • Poster
      • Collage Left
      • Collage Center
      • Collage Right

        Appearance

    • 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.

      Slide Name In Navigation

    • Enter the Minimum Height of the slide in pixels.

      The minimum height of the slide in this example is the default 300 pixels.

    Background Color

    Use one of the following methods to set the background color of the slide:

    Method 1: Enter the Value

    In the “No Color” box, enter one of the following:

    • A predefined color name, such as “White”
    • The hexadecimal color value for the color, such as “#ffffff”
    • The rgba value for the color, with opacity percent, such as “rgba(255, 255, 255, 0.75)”

    In this example, the background color of the slide is the same yellow (#ffd16) as the background color of the row.

    Background Color

    Method 2: Choose the Value

    • Click the swatch to the left of the “No Color” box. Then, do one of the following:

      • In the color picker palette, choose the color swatch.
      • In the color picker, drag the cursor to the color that you want.

        Choose Swatch

    • You can use the opacity slider, just below the color picker, to create backgrounds with varying degrees of transparency.

      If you want a partially transparent background, drag the slider to the opacity setting that you want to apply to the background color. Then, tap Apply.

      The box below the slider shows the current red, green, blue, and alpha values (rgba). The last number indicates the current opacity percentage as a decimal. Set Opacity

    Background Image

    • To add a standard Background Image for desktop devices, do one of the following:

      • Tap Upload. Then, navigate to the image in your local file system, and choose the file that you want to use. The image is uploaded to the gallery, and a thumbnail of the uploaded image appears.
      • Tap Select from Gallery. Find the image in the gallery. Then, click the thumbnail of the image and tap Add Selected.

        Background Image

    • To add a Background Mobile Image, do one of the following:

      • Tap Upload. Then, navigate to the image in your local file system, and choose the file that you want to use. The image is uploaded to the gallery, and a thumbnail of the uploaded image appears.
      • Tap Select from Gallery. Find the image in the gallery. Then, click the thumbnail of the image and tap Add Selected.

        For mobile devices, the Background Mobile Image is used instead of the standard background image.

    • To determine the size of the background image in relation to the width of the slide, set Background Size to one of the following:

      • Cover
      • Contain
      • Auto

      In this example, the Background Size “Contain” prevents the background image from extending the full width of the slide, which in this case is the full width of the row. Rather, the background image is limited to the width of the active content area of the slide, according to the slide’s Appearance setting.

      Background Size

    • To anchor the image in relation to the slide, set Background Position to one of the following positions at the top, center, or bottom of the slide:

      • Left
      • Center
      • Right

      If you want to repeat the background image, set Background Repeat to “Yes.”

    Slider Content

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

    • 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 that will be added later.

      Text can be entered and edited either from the stage or from Slider Settings.

    Slide Links and Buttons

    Each slide can have either single, or multiple links and buttons. Use one of the following methods to add links and/or buttons to a slide.

    Method 1: Single Link or Button

    The slide Appearance setting places a single link or button below the text. Simply follow the instructions below to complete the properties of the link or button that you want to add.

    Appearance with Text and Button (or Link)

    Method 2: Multiple Links or Buttons

    • Create a separate block with the links or buttons that you want to include.

      To avoid conflict, keep all the links or buttons in the separate block, and do not add a link or button directly to the slide.

      Add a block placeholder to the slide stage. Then, choose the block that you prepared, and place it where you want it to appear on the slide.

    • To link the slide to a page, set Link to one of the following destination types. Then, follow the instructions for the type of link you want to create.

      The first slide in this example is linked to the Women >Tees category.

    URL

    Set Link to “URL.” Then, enter the destination URL.

    Link to URL

    Product

    Set Link to “Product.” Then, do one of the following:

    • Begin typing the product name or SKU.
    • Choose the product from the search results list.
    • Click the down arrow, and choose the product from the list.

    Link to Product

    Category

    Set Link to “Category.” Then, do one of the following:

    • Begin typing the category name.
    • In the category tree, drill down to the category.

    To choose the category, click the category name in the category tree.

    Link to Category

    Page

    Set Link to “Page.” Then, do one of the following:

    • Begin typing the page name. Then in the list, click the name of the page.
    • Click the down arrow, and choose the page from the list.

    Link to Page

    If the link points to a URL that is outside of your store, and you want to prevent the visitor from navigating away from your store, mark the Open in new tab checkbox.

    Set Show Button to one of the following:

    • Always
    • On Hover
    • Never Show

    In the Button Text field, enter the text to appear on the button.

    Set Button Type to one of the following:

    • Primary
    • Secondary
    • Link

    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. You can find examples of primary and secondary buttons in the Magento Admin.

    Slide Overlay

    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 continues to be visible for the full width of the banner.

    Set Show Overlay to one of the following:

    • Always
    • On Hover
    • Never Show

    In the Overlay Color field, do one of the following:

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

    Then, tap Apply.

    Do not use the opacity slider in the color picker to set the overlay transparency.

    Overlay Color

    In the Overlay Transparency field, specify the percentage of transparency that you want to apply for the overlay.

    Overlay Settings

  2. Complete the remaining settings as needed, using the field descriptions at the end of this page for reference.

  3. When complete, tap Save to close the Edit Slide page and return to the Page Builder workspace.

Step 3: Add More Slides

Use one of the following methods to add slides.

Method 1: Duplicate an Existing Slide

You can save time by duplicating a slide that has already been configured with the needed settings.

  1. Complete the settings for the first slide.

  2. Click the navigation dot below the slide. Then in the slide toolbox, click Duplicate ( ).

  3. Click the navigation dot for the new slide, and update the content and link as needed.

    Duplicate Slide 1

Method 2: Add a New Blank Slide

  1. Hover over the current slide. Then in the main slider toolbox, click Add ( ).

    Add Blank Slide

    A new blank slide with its own navigation dot and toolbox are added to the slider. Slide 2 Toolbox

  2. Update the content and links as needed.

  3. Repeat these steps to add as many slides as you want.

  4. To view each image in the slider, click the next dot below the current image.

    Completed Slider

The slide in this example has a background image, a transparent mobile image, and an inline image that was added from the text editor. This technique works well on mobile devices by turning off the background image, and displaying only the smaller inline image. The product slide in this example has the following additional settings:

AppearanceCollage Right
Background Color#ffffff (White)
Background ImageThe image on this slide was saved from the product page, and uploaded to the gallery.
Mobile Background ImageThe mobile background image is a transparent image that is 10 pixels square. Using a blank image for mobile effectively replaces the standard background image with an invisible image.
Background SizeAuto
Message Text

Minerva LumaTech™ V-Tee (Align center)

with inserted image scaled at 40% (Align center)

Link

Product

Show Button

Always

Button Text

Buy Now

Show Overlay

Never Show

Alignment

Center (to align the button)

Border

Solid

Border Color

#000000 (Black)

Border Width

1 px

If the slide is duplicated, you must update each duplicate slide with the correct information for each tee shirt.

Step 4: Add a Title

If you want a title above the slider, simply add a Text content type above the slider. Then, format the text as needed.

  1. In the Page Builder panel under Elements, drag a Text placeholder to the top edge of the slider. A red guideline marks the insertion point above the banner.

    Drag Text Placeholder Above Slider

  2. Use the editor to format the text as needed.

    Edit the Text

Step 5: Configure the Slider

  1. Hover over the slider container to show the main toolbox. Then, choose Settings ( ), and do the following:

    Slider Toolbox

    • If you want the slider to begin as soon as the page loads, set Autoplay to “Yes.” Then, set Autoplay Speed to the number of milliseconds in the delay between slides. By default, the Autoplay Speed is set to 4000 ms, which is four seconds.

      Autoplay

    • 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.

      Fade and Infinite Loop

    • 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.”

      Show Arrows and Dots

    • Enter the Minimum Height of the slider in pixels.

      Minimum Height

  2. Complete the remaining slider settings as needed, using the field descriptions at the bottom of this page for reference. Then on the Save menu, choose Save & Close to return to the Page Builder workspace.

  3. To test the slider in your store, scroll to the top of the page, and set Enable Page to “Yes.” Then on the Save menu, choose Save & Close to return to the Pages grid.

  4. To preview the slider, find the page in the grid. Then in the Action column, select View. When you preview the slider, resize the window so you can see how it appears on a mobile device.

    Desktop View

    Mobile View

Individual Slide Toolbox

TOOLIconDescription
(label)Slide #Identifies the number of the current slide.
SettingsOpens the Edit Slide page, where you can change the properties of the current slide.
DuplicateMakes a duplicate copy of the current slide.
RemoveDeletes the current slide from the slider.

Slider Toolbox

TOOLIconDescription
MoveMoves the slider to another position on the stage.
SettingsOpens the Edit Slider page, where you can change the properties of the video and container.
HideHides the current slider.
ShowShows the hidden slider.
DuplicateMakes a duplicate copy of the slider.
RemoveDeletes the slider from the stage.

Individual Slide Settings

SettingDescription
APPEARANCE
AppearanceDetermines the slide layout. Options:
PosterCenters content and button on the slide. The overlay, if used, extends the full width of the slide.
Collage LeftPlaces content and button in a defined area on the left side of the slide. The overlay, if used, covers only the defined area.
Collage CenterPlaces content and button in a defined area that is centered on the slide. The overlay, if used, covers only the defined area.
Collage Right

Places content and button in a defined area on the right side of the slide. The overlay, if used, covers only the defined area.

Slide NameSpecifies a name for the slide.
Minimum HeightDetermines the minimum height of the slide in pixels.
BACKGROUND
Background ColorDetermines the background color and opacity of the slide.
Background ImageDetermines the location of the background image file to use, and applies the image to the slide. Options:
UploadUploads an image file from your local computer to the gallery, and applies it as the background image.
Select from GalleryPrompts you to choose an existing image from the gallery as the background image.
Allows you to either drag the background image to the camera tile, or browse to the image in your local file system.
Background Mobile ImageDetermines the location of the background image file to use for mobile devices, and applies the image to the slide. If left blank, the standard desktop background image is used. Options:
UploadUploads an image file from your local computer to the gallery, and then applies it as the background image.
Select from GalleryPrompts you to choose an existing image from the gallery to be the background image.
Allows you to either drag the mobile background image to the camera tile, or browse to the image in your local file system.
Background SizeDetermines how the background image is scaled in relation to the width of the slide. Options:
CoverThe background image covers the full width of the slide.
ContainLimits the background image to the width of the content area of the slide. 
AutoApplies the background image size from the current style sheet.
Background PositionDetermines the anchor point of the image in relation to the slide. Options:Top LeftTop CenterTop RightCenter LeftCenterCenter RightBottom LeftBottom CenterBottom Right
Background RepeatDetermines if the background image is repeated to fill the available space in the slide. Options:tbody></tbody>
YesThe background image is repeated to fill the available space.
NoOnly a single instance of the background image appears.
content
Message TextA text box with editor that is used to enter and edit the text message that appears on the slide.
LinkDetermines the destination page that appears when the slide button is clicked. Options:
URLLinks to either a relative or fully-qualified URL.
ProductIdentifies the destination page based on the product name or SKU. The product name can be searched for based on either a partial or full name. The product is then chosen from the search results list.
CategoryIdentifies the destination page as a specific category or subcategory in the category tree.
PageIdentifies the destination page as a specific content page.
Show ButtonSpecifies if and when a button appears on the slide. Options:
AlwaysA button always appears on the slide.
On HoverA button appears on the slide only on hover.
Never ShowA button never appears on the slide.
Button TextDetermines the text that appears on the button. The button text can be updated directly from the stage, or from the Edit Slide page.
Button TypeDetermines the button format. Options:
PrimaryApplies the primary button style from the current style sheet.
SecondaryApplies the secondary button style from the current style sheet, if applicable.
LinkCreates a hyperlink rather than a button.
Show OverlayApplies a background color to the content area that is defined by the Appearance setting. The background image or color continues to be visible for the full width of the slide. The overlay does not apply to images that are added inline from the editor. Options:
AlwaysThe overlay is always visible.
On HoverThe overlay appears only on hover.
Never ShowThe overlay is not visible.
Overlay ColorDetermines the color of the overlay. To specify the overlay color, choose a swatch, click the color picker, or enter a valid color name or hexadecimal value.
Overlay TransparencySpecifies the transparency of the overlay as a percentage. For example, an overlay transparency of 85% is the equivalent of 15% opacity.
ADVANCED
AlignmentDetermines the horizontal alignment of the slide. Options:
DefaultApplies the alignment default setting that is specified in the style sheet of the current theme.
LeftAligns the slide along the left border of the slider, with allowance for any padding that is specified.
CenterAligns the slide in the center of the slider, with allowance for any padding that is specified.
RightAligns the slide along the right border of the slider, with allowance for any padding that is specified.
BorderDetermines the border style that is applied to all four sides of the slide. Options:
DefaultApplies the default border style that is specified by the associated style sheet.
NoneDoes not provide any visible indication of the slide borders.
DottedThe slide border appears as a dotted line.
DashedThe slide border appears as a dashed line.
SolidThe slide border appears as a solid line.
DoubleThe slide border appears as a double line.
GrooveThe slide border appears as a grooved line.
RidgeThe slide border appears as a ridged line.
InsetThe slide border appears as an inset line.
OutsetThe slide border appears as an outset line.
Border ColorDetermines the color of the slide border. Specify the color by choosing a swatch, clicking the color picker, or by entering a valid color name or equivalent hexadecimal value.
Border WidthDetermines the width in pixels of the slide border.
Border RadiusSpecifies the size of the radius that is used to round each corner of the border.
CSS ClassesSpecifies the names of CSS classes from the current style sheet which apply to the slide. Separate multiple class names with a space.
Margins and PaddingDetermines the size, in pixels, of the outer margins and inner padding of the slide. Enter the corresponding values in the diagram. Options:
MarginsThe amount of blank space, in pixels, that is applied to the outside edge of all sides of the slide. Options: Top, Right, Bottom, Left.
PaddingThe amount of blank space, in pixels, that is applied to the inside edge of all sides of the slide. Options: Top, Right, Bottom, Left.

Slider Settings

SettingDescription
SETTINGS
AutoplayDetermines if the slideshow begins automatically when the page loads. Options:
YesThe slider and its automated properties become active as soon as the page loads.
NoAfter the first slide, which appears by default, the slide navigation (dots or arrows) must be clicked to display the next slide in sequence.
Autoplay SpeedSpecifies the delay in milliseconds between each slide when Autoplay is used. Default value: 4000 ms (4 seconds)
FadeDetermines if a fade effect is used to smooth the transition from one slide to the next. Options:
YesThe current slide has a fade-out effect before the next slide fades in to view.
NoThere is no special effect during the transition from one slide to the next.
Infinite LoopDetermines if the slide show replays from the beginning after the last slide. Options:
YesThe slide show replays indefinitely while the page is open.
NoThe slide show plays only once.
Show ArrowsDetermines if each slide includes “next” and “previous” navigation arrows on the left and right side of each slide. Options:
YesNavigation arrows appear on the left and right side of each slide.
NoThe slides do not have navigation arrows.
Show DotsDetermines if the slider includes navigation dots below the slides. Options:
YesNavigation dots appear at the bottom of the slider.
NoThe slider does not include navigation dots.
Minimum HeightSpecifies the minimum height of the slider in pixels.
Advanced
AlignmentDetermines the horizontal alignment of the slider. Options:
DefaultApplies the alignment default setting that is specified in the style sheet of the current theme.
LeftAligns the slider along the left border of the parent container, with allowance for any padding that is specified.
CenterAligns the slider in the center of the parent container, with allowance for any padding that is specified.
RightAligns the slider along the right border of the parent container, with allowance for any padding that is specified.
BorderDetermines the border style that is applied to all four sides of the slider container. Options:
DefaultApplies the default border style that is specified by the associated style sheet.
NoneDoes not provide any visible indication of the container borders.
DottedThe container border appears as a dotted line.
DashedThe container border appears as a dashed line.
SolidThe container border appears as a solid line.
DoubleThe container border appears as a double line.
GrooveThe container border appears as a grooved line.
RidgeThe container border appears as a ridged line.
InsetThe container border appears as an inset line.
OutsetThe container border appears as an outset line.
Border ColorDetermines the color of the container border. Specify the color by choosing a swatch, clicking the color picker, or by entering a valid color name or equivalent hexadecimal value.
Border WidthDetermines the width in pixels of the container border.
Border RadiusSpecifies the size of the radius that is used to round each corner of the border.
CSS ClassesSpecifies the names of CSS classes from the current style sheet which apply to the slider. Separate multiple class names with a space.
Margins and PaddingDetermines the size, in pixels, of the outer margins and inner padding of the slider container. Enter the corresponding values in the diagram. Options:
MarginsThe amount of blank space, in pixels, that is applied to the outside edge of all sides of the container. Options: Top, Right, Bottom, Left
PaddingThe amount of blank space, in pixels, that is applied to the inside edge of all sides of the container. Options: Top, Right, Bottom, Left