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.

Navigate to the Slider

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

2. Go to the “Action” column of the “Home Page” listing and select Edit from the dropdown.

3. Expand the Content section and select Edit with Page Builder button on the right side.

Add a Slider

1. In the Layout dropdown, drag and drop the Row element onto 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.

3. Click on 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).

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.

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.

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.

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.

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.

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.

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.

2. To modify the settings of the duplicate slide, click on its Navigation Dot again and select Edit.

3. Make changes in the “Appearance,” “Background,” “Content,” and “Advanced” sections of the “Edit Slide” page as described above.

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.

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

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.

2. Add a template name in the Template Name text area 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.

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

3. Click on OK.

Test the Homepage Slider

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

2. Set Enable Page to Yes if it isn’t enabled.

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

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.