Tutorial: Adding Content Slider via Block Editor

Description: Learn how to add new Content Slider with the help of Block Editor.

Things We Cover:

Adding Content Slider

Design

Open Online Store > Design

Choose template

Select active template and click Modify.

Place for Slider

Select Look & Feel tab and choose where to place a slider. Most common options is Home Page > Custom HTML Slider Area 1 and Custom HTML Slider Area 2.

In new window click on Open in editor and select Open in external browser.

Block Editor

Click + on the left side menu. Then drag Containter in the center of the page.

Select Container in the center of the page. On the right side menu will be block with settings. If you don't want to display slider on some of devices, then click on its icon. Also you can select there width type of container.

Click +. Drag Columns inside of the Container. Select Columns. On the right side menu, in Layout tab, select the first option.

Click + and choose JavaScript. Drag Content Slider inside of the column.
Select slider. On the right side there will be settings. Most common among them:
Transition Delay. Sets a timer for switching between slides. By default it's turned off.
Show Pagination and Show Navigation. To turn this options On - just click on Off button.

By default you can add two slides, but you can enable more by clicking on Enable Slide. To remove it - just click on Remove Slide.

Click + and select Elements. Then drag Image inside one of the slides.

To add image click on Add image button or insert url with image.
If you choose first option - there will be popup window. Choose a folder you want (left side) and click on Add file button above. Click on Select and choose image from your PC/Laptop. Click Upload and then double click on image inside the project folder.

If you will select image inside Block Editor, you will get access to its settings on the right side. There, for example, you can change image by clicking on Change image only and set a link, which activates when someone clicks on image.
Note: If you are adding link to your current store, do not use absolute URL. Instead use the short one. For example - /category
To delete an image - select it and click on trash icon, that wil appear on the top.

If you need to delete whole slider - click Clear button on the top left. Just remember - in that case will be deleted everything that you have added through Block Editor.
To delete only slider - select Container and click on trash icon.