How to Add a Homepage Slider in Magento 2

A homepage slider is a great way to grab the attention of your visitors as soon as they land on your website. You can use it to highlight new content and direct visitors to a product or promotional landing page.

This guide will show you how to add a homepage slider in Magento 2.4.3 using the Magento Page Builder.

Note: using earlier versions of Magento 2, you can only add a slider using third-party extensions such as the Owl Carousel Slider.

  1. Log in to the Magento admin panel and navigate to Content > Elements > Pages.

    Pages in Magento admin panel
    Pages in the Magento admin panel
  2. Go to the “Action” column of the “Home Page” listing and select Edit from the dropdown.

    Edit hyperllink on the Pages page
    Click Edit from the dropdown of the corresponding listing on the Pages page
  3. Expand the Content section and select Edit with Page Builder button on the right side.

    Edit with Page Builder button in the Content Section
    Click the Edit with Page Builder button in the Content Section

Add a Slider

  1. In the Layout dropdown, drag and drop the Row element onto the stage area.

    Row element on the stage area
    Drag and drop the Row element on the stage area
  2. Expand the Media section and drag and drop the Slider element inside the Row. The slider container has a single slide with no contents.

    Slider element on the stage area
    Drag and drop the Slider element inside the Row
  3. Click on the Navigation Dot icon and select the Edit icon to add a slide.

    Navigation Dot icon and Edit Icon
    Click the Navigation Dot icon and select the Edit icon to add a slide

Add Elements to the Slide

On the “Edit Slide” page, configure the following details:

Appearance

  • Select the position of the slide from the available four options 一 Poster, Collage Left, Collage Center, or College Right.
  • Slide Name: Add a slide name that appears as a hint above the navigation dot. This value is not visible on the frontend – it’s only for your internal reference.
  • Minimum Height: Set a minimum height for the slide. This value can be a single number with any valid CSS unit (200px, 50%, 50em, 100vh) or a calculation (50% + 100px).
Appearance section on the Edit Slide page
Select slide position and add Slide Name and Minimum Height in the Appearance section

Background

First, we’ll select the row’s background color by either selecting a swatch, choosing a color with the color picker or adding the hex value of the color. You also have the option to adjust the opacity of the color.

The “Background” configuration depends on the “Background Type” you choose. You can select one of the two available options 一 Image or Video. We’ll show you both the settings below.

Image

  • Background Image: Select a background image using the Upload button, Select from Gallery button, or the Camera icon. The file type can be JPG, GIF, or PNG.
  • Background Mobile Image: Select a background image to display on mobile devices. You can skip this option or use the same tools as the “Background Image.”
  • Background Size: Determine the background image size concerning the banner width by selecting either of these three options 一 Cover, Contain, or Auto.
  • Background Position: Determine how the background image is embedded in the banner.
  • Background Repeat: Select Yes if you want the background image to fill the space.
Background Image section
Configure the details in the Image Background Type

Video

  • Video URL: Enter a link to a YouTube video, Vimeo video, or .mp4 video file.
  • Overlay Color: Add a filter of a transparent tint over the video by selecting a color.
  • Infinite Loop: Select Yes (default) to play the video on repeat.
  • Lazy Load: Select Yes (default) to load the video only when visible on the screen.
  • Play Only When Visible: Select Yes (default) only when it’s visible on the screen. Select No to let the video play as soon as it loads.
  • Fallback Image: Select an image to display if the video fails to load.
Video Background Type
Configure the details in the Video Background Type

Content

  • Message Text: Add a text message that will appear on the slide. You can change the styling and insert elements like images and links.
  • Link: Determine the destination when the customer clicks on the slider. This can be a Product, Category, or Page. The dropdown on the right will update based on the option selected. Tick the checkbox below the “Link” field to open the page in a new tab.
    Note: the Page Builder no longer supports the URL option.
  • Show Button: Add a button to direct your customers to click on the above link. You can choose Always, On Hover, or Never Show.
  • Button Text: Insert text that will appear on the button.
  • Button Type: Determine the button format by selecting either of the three options 一 Primary, Secondary, or Link. Each has its style, but the “Link” option adds a hyperlink instead of a button.
  • Show Overlay: Choose an option if you want to add a filter of a transparent tint behind the content.
  • Overlay Color: Pick an overlay color if you’ve selected one.
Content section
Configure the details in the Content section on the Edit Slider page

Advanced

  • Alignment: Select the alignment of the content 一 Default, Left, Center, or Right.
  • Border: Add a border on the four sides of the slider by selecting Default, None, or the other options.
  • Border Color: Select a border color.
  • Border Width: Insert the border width in pixels or go with the “Default” option.
  • Border Radius: Insert the border-radius in pixels to round the corners or proceed with the “Default” option.
  • CSS Classes: Add optional CSS for additional styling.
  • Margins and Padding: Insert a value in pixels. This adds a padding outside and a margin inside the slide.
Advanced section
Configure the details in the Advanced section on the Edit Slider page

Click the orange Save button on the top right of the page to save the new configurations.

Add Optional Elements Above or Below the Slider

  1. Click on the Elements dropdown on the left panel to expand it.

    Elements in the left panel
    Click on the Elements dropdown on the left panel
  2. Select and drag the Text, Heading, Buttons, Divider, or HTML Code element and drop it above or below the slider.
    We’ve added the Text element above the slider in the below image.

    Elements example
    Text Element added above the Slider

Add More Slides

You can add a slide by either duplicating the existing slide or creating a slide from scratch.

Duplicate Slide Method

  1. To duplicate a slide, click on the Navigation Dot at the bottom of the slide and select Duplicate.

    Navigation Dot and Duplicate icon
    Click on the Navigation Dot and then click on the Duplicate button
  2. To modify the settings of the duplicate slide, click on its Navigation Dot again and select Edit.

    Navigation Dot on the duplicate slide
    Click the Navigation Dot on the duplicate slide
  3. Make changes in the “Appearance,” “Background,” “Content,” and “Advanced” sections of the “Edit Slide” page as described above.

    Edit Slide page of the duplicate slide
    Modify the Edit Slide page of the duplicate slide and then click on the Save button
  4. Click the orange Save button.

New Slide Method

  1. To create a new slide from scratch, hover over the slider and click on the Plus icon.

    Plus icon on the slide
    Click on the plus icon
  2. Click on the Navigation Dot at the bottom of the slide and select Edit.

    Navigation Dot on the new slide
    Click the Navigation Dot icon and select the Edit icon to add a slide
  3. Configure the slide on the “Edit Slide” page as described above.
  4. Click the orange Save button.

Save the Homepage Slider

  1. Click on the Save as Template button on the top-right hand side of the page.

    Save as Template button
    Click on the Save as Template button
  2. Add a template name in the Template Name text area on the “Save Content as Template” pop-up.

    Save Content As Template pop up
    Add Template Name and select appropriate option from the Created For dropdown on the Save Content As Template pop up
  3. Select Any, Product, Category, or Block using the “Created For” dropdown menu to filter the templates. Note that this does not restrict where the template can be used.
  4. Click on Save.

Apply the Homepage Slider

  1. Click on the Apply Template button on the top right side of the page.

    Apply Template button
    Click on the Apply Template button
  2. Select the template you want to apply by clicking on the corresponding Apply button on the right side.

    Apply Template page
    Select the template by clicking on the Apply button and then click OK to proceed
  3. Click on OK.

Test the Homepage Slider

  1. Close the full screen by clicking on the top-right Minimize icon.

    Minimize icon
    Click the Minimize icon on the top tight side
  2. Set Enable Page to Yes if it isn’t enabled.

    Enable Page and Save button on the Home Page
    Set Enable Page to Yes and click on Save
  3. Click on the Save button.
  4. Go back to “Pages,” locate the “Home Page” title and select View under the “Action” column.

    View in the Action Column
    Select View under the Action column of the Home Page listing.

Clear Cache

  1. Go to Systems > Tools > Cache Management.
  2. Select all the invalidated cache types and click on Submit to refresh the cache.

Congrats! You’ve successfully created a homepage slider.

Homepage Slider on the frontend
Homepage Slider on the frontend

Was this article helpful?

Leave a Comment