Magento for B2B Commerce

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 navigationThe primary group of web page links that a customer uses to navigate around the website; the navigation links to the most important categories or pages on an online store. 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: Add Dynamic Block.


Slider in Storefront
  • Individual Slide Toolbox

    TOOL

    Icon

    Description

    (label)

    Slide #

    Identifies the number of the current slide.

    Settings

    Opens the Edit Slide page, where you can change the properties of the current slide.

    Duplicate

    Makes a duplicate copy of the current slide.

    Remove

    Deletes the current slide from the slider.

  • Slider Toolbox

    TOOL

    Icon

    Description

    Move

    Moves the slider to another position on the stage.

    Settings

    Opens the Edit Slider page, where you can change the properties of the video and container.

    Hide

    Hides the current slider.

    Show

    Shows the hidden slider.

    Duplicate

    Makes a duplicate copy of the slider.

    Remove

    Deletes the slider from the stage.

  • Individual Slide Settings

    Setting

    Description

    APPEARANCE

    Appearance

    Determines the slide 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

    Slide Name

    Specifies a name for the slide.

    Minimum Height

    Determines the minimum height of the slide in pixels.

    BACKGROUND

    Background Color

    Determines the background color and opacity of the slide.

    Background Image

    Determines the location of the background image file to use, and applies the image to the slide. Options:

    Upload

    Uploads an image file from your local computer to the gallery, and applies it as the background image.

    Select from Gallery

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

    Select from Gallery

    Prompts 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 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

    Limits the background image to the width of the content area of the slide. 

    Auto

    Applies the background image size from the current style sheet.

    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

    Only a single instance of the background image appears.

    content

    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 style sheet.

    Secondary

    Applies the secondary button style from the current style sheet, 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

    Alignment

    Determines the horizontal alignment of the slide. Options:

    Default

    Applies the alignment default setting that is specified in the style sheet 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 that is specified by the associated style sheet.

    None

    Does not provide any visible indication of the 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 slide 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 border.

    CSS Classes

    Specifies the names of CSS classes from the current style sheet which 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. Options:

    Margins

    The amount of blank space, in pixels, that is 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 applied to the inside edge of all sides of the slide. Options: Top, Right, Bottom, Left.

  • Slider Settings

    Setting

    Description

    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

    Alignment

    Determines the horizontal alignment of the slider. Options:

    Default

    Applies the alignment default setting that is specified in the style sheet 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 that is specified by the associated style sheet.

    None

    Does not provide any visible indication of the container borders.

    Dotted

    The container border appears as a dotted line.

    Dashed

    The container border appears as a dashed line.

    Solid

    The container border appears as a solid line.

    Double

    The container border appears as a double line.

    Groove

    The container border appears as a grooved line.

    Ridge

    The container border appears as a ridged line.

    Inset

    The container border appears as an inset line.

    Outset

    The container border appears as an outset line.

    Border Color

    Determines 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 Width

    Determines the width in pixels of the container border.

    Border Radius

    Specifies the size of the radius that is used to round each corner of the border.

    CSS Classes

    Specifies the names of CSS classes from the current style sheet which 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. Options:

    Margins

    The amount of blank space, in pixels, that is 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 applied to the inside edge of all sides of the container. Options: Top, Right, Bottom, Left.