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

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

Appearance

  1. Set Appearance to one of the following:

    • Poster
    • Collage Left
    • Collage Center
    • Collage Right

    Appearance

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

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

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

  2. 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, click 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

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

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

    • Click Select from Gallery. Find the image in the gallery. Then, click the thumbnail of the image and click Add Selected.

      Background Image

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

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

    • Click Select from Gallery. Find the image in the gallery. Then, click the thumbnail of the image and click Add Selected.

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

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

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

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

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

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

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

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

  3. 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, select 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, click 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

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

  5. When complete, click 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, click Duplicate ( ) in the slide toolbox.

  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, click Add ( ) in the main slider toolbox.

    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:

    Appearance Collage Right
    Background Color #ffffff (White)
    Background Image The image on this slide was saved from the product page, and uploaded to the gallery.
    Mobile Background Image The 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 Size Auto
    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 descriptions at the bottom of this page for reference.

  3. On the Save menu, choose Save & Close to return to the Page Builder workspace.

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

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

Tool Icon Description
Move Move icon Moves the slide to another position on the slider.
(label) Slide # Identifies the number of the current slide.
Settings Settings icon Opens the Edit Slide page, where you can change the properties of the current slide.
Duplicate Duplicate icon Makes a duplicate copy of the current slide.
Remove Remove icon Deletes the current slide from the slider.

Slider Toolbox

Tool Icon Description
Move Move icon Moves the slider to another position on the stage.
(label) Slide # Identifies the number of the current slide.
Settings Settings icon Opens the Edit Slider page, where you can change the properties of the video and container.
Hide Hide icon Hides the current slider.
Show Show icon Shows the hidden slider.
Duplicate Duplicate icon Makes a duplicate copy of the slider.
Remove Remove icon Deletes the the slider from the stage.

Individual Slide Settings

Setting Description
Appearance Determines the slider layout. Options:
Poster - Centers content and button on the slide. The overlay, if used, extends the full width of the slide.
Collage Left - Places content and button in a defined area on the left side of the slide. The overlay, if used, covers only the defined area.
Collage Center - Places 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 Name Specifies a name for the slide.
Minimum Height Specifies the minimum height of the slide in pixels.

Background

Setting Description
Background Color Determines the background color and opacity of the slide.
Background Image Determines the location of the background image and applies the image to the slide. Options:
Upload - Uploads an image file from your local computer to the gallery and then applies it as the background image for the slide.
Select from Gallery - Prompts you to choose an existing image from the gallery as the background image for the slide.
Camera icon - Allows you to either drag the image to the camera tile or browse to the image in your local file system.
Background Mobile Image Determines 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:
Upload - Uploads an image file from your local computer to the gallery and then applies it as the background image for the slide.
Select from Gallery - Prompts you to choose an existing image from the gallery as the background image for the slide.
Camera icon - Allows you to either drag the image to the camera tile or browse to the image in your local file system.
Background Size Determines how the background image is scaled in relation to the width of the slide. Options:
Cover - The background image covers the full width of the slide.
Contain - The background image is limited to the width of the content area of the slide.
Auto - Applies the default background size that is specified in the stylesheet of the current theme.
Background Position Determines the anchor point of the image in relation to the slide. Options: Top Left / Top Center / Top Right / Center Left / Center / Center Right / Bottom Left / Bottom Center / Bottom Right
Background Repeat Determines if the background image is repeated to fill the available space in the slide. Options:
Yes - The background image is repeated to fill the available space.
No - Uses only a single instance of the background image.

Content

Setting Description
Message Text A text box with editor that is used to enter and edit the text message that appears on the slide.
Link Determines the destination page that appears when the slide button is clicked. Options:
URL - Links to either a relative or fully-qualified URL.
Product - Identifies 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.
Category - Identifies the destination page as a specific category or subcategory in the category tree.
Page - Identifies the destination page as a specific content page.
Show Button Specifies if and when a button appears on the slide. Options:
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.
Button Text Determines the text that appears on the button. The button text can be updated directly from the stage, or from the Edit Slide page.
Button Type Determines the button format. Options:
Primary - Applies the primary button style from the current stylesheet.
Secondary - Applies the secondary button style from the current stylesheet, if applicable.
Link - Creates a hyperlink rather than a button.
Show Overlay Applies 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:
Always - The overlay is always visible.
On Hover - The overlay appears only on hover.
Never Show - The overlay is not visible.
Overlay Color Determines 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 Transparency Specifies the transparency of the overlay as a percentage. For example, an overlay transparency of 85% is the equivalent of 15% opacity.

Advanced

Setting Description
Alignment Determines the horizontal alignment of the slide. Options:
Default - Applies the default setting that is specified in the stylesheet of the current theme.
Left - Aligns the slide along the left border of the slider, with allowance for any padding that is specified.
Center - Aligns the slide in the center of the slider with allowance for any padding that is specified.
Right - Aligns the slide along the right border of the slider with allowance for any padding that is specified.
Border Determines the border style that is applied to all four sides of the slide. Options:
Default - Applies the default border style from the stylesheet that is associated with the current theme.
None - Provides no visible indication of slide borders.
Dotted - The slide border appears as a dotted line.
Dashed - The slide border appears as a dashed line.
Solid - The slide border appears as a solid line.
Double - The slide border appears as a double line.
Groove - The slide border appears as a grooved line.
Ridge - The slide border appears as a ridged line.
Inset - The slide border appears as an inset line.
Outset - The container border appears as an outset line.
Border Color Determines 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 Width Determines the width in pixels of the slide border.
Border Radius Specifies the size of the radius that is used to round each corner of the slide border.
CSS Classes Specifies the names of CSS classes from the current stylesheet that apply to the slide. Separate multiple class names with a space.
Margins and Padding Determines the size, in pixels, of the outer margins and inner padding of the slide. Enter the corresponding values in the diagram.
Margins - The amount of blank space, in pixels, that is to be applied to the outside edge of all sides of the slide. Options: Top / Right / Bottom / Left
Padding - The amount of blank space, in pixels, that is to be applied to the inside edge of all sides of the slide. Options: Top / Right / Bottom / Left

Slider Settings

Autoplay Determines if the slideshow begins automatically when the page loads. Options: Yes - The slider and its automated properties become active as soon as the page loads. No - After the first slide, which appears by default, the slide navigation (dots or arrows) must be clicked to display the next slide in sequence.
Autoplay Speed Specifies the delay in milliseconds between each slide when Autoplay is used. Default value: 4000 ms (4 seconds)
Fade Determines if a fade effect is used to smooth the transition from one slide to the next. Options: Yes - The current slide has a fade-out effect before the next slide fades in to view. No - There is no special effect during the transition from one slide to the next.
Infinite Loop Determines if the slide show replays from the beginning after the last slide. Options: Yes - The slide show replays indefinitely while the page is open. No - The slide show plays only once.
Show Arrows Determines if each slide includes next and previous navigation arrows on the left and right side of each slide. Options: Yes - Navigation arrows appear on the left and right side of each slide. No - The slides do not have navigation arrows.
Show Dots Determines if the slider includes navigation dots below the slides. Options: Yes - Navigation dots appear at the bottom of the slider. No - The slider does not include navigation dots.
Minimum Height Specifies the minimum height of the slider in pixels.

Advanced

Setting Description
Alignment Determines the horizontal alignment of the slider. Options:
Default - Applies the default setting that is specified in the stylesheet of the current theme.
Left - Aligns the slider along the left border of the parent container, with allowance for any padding that is specified.
Center - Aligns the slider in the center of the parent container, with allowance for any padding that is specified.
Right - Aligns the slider along the right border of the parent container, with allowance for any padding that is specified.
Border Determines the border style that is applied to all four sides of the slider container. Options:
Default - Applies the default border style from the stylesheet that is associated with the current theme.
None - Provides no visible indication of slider borders.
Dotted - The slider border appears as a dotted line.
Dashed - The slider border appears as a dashed line.
Solid - The slider border appears as a solid line.
Double - The slider border appears as a double line.
Groove - The slider border appears as a grooved line.
Ridge - The slider border appears as a ridged line.
Inset - The slider border appears as an inset line.
Outset - The slider border appears as an outset line.
Border Color Determines the color of the slider border. Specify the color by choosing a swatch, clicking the color picker, or by entering a valid color name or equivalent hexadecimal value.
Border Width Determines the width in pixels of the slider border.
Border Radius Specifies the size of the radius that is used to round each corner of the slider border.
CSS Classes Specifies the names of CSS classes from the current stylesheet that apply to the slider. Separate multiple class names with a space.
Margins and Padding Determines the size, in pixels, of the outer margins and inner padding of the slider container. Enter the corresponding values in the diagram.
Margins - The amount of blank space, in pixels, that is to be applied to the outside edge of all sides of the container. Options: Top / Right / Bottom / Left
Padding - The amount of blank space, in pixels, that is to be applied to the inside edge of all sides of the container. Options: Top / Right / Bottom / Left