You can create a "Featured Products" slider on any CMS page by using the Product Slider block. This lets you showcase your products in dynamic and visually appealing slider layout.
Add a block
To begin, open your CMS page to the edit screen where you want to add the new product slider.
Type "/productslider" and hit "Enter" in a new paragraph block to add one quickly.
Alternatively, you can click the "+" icon then type "product" in the search bar.
Select the "Product Slider" block.
Adjust block settings
Now that you have your new Product Slider block on your page, you can see the block settings in the right-hand menu. If you do not see the right hand menu, navigate to the Setting "cog" icon in the upper right corner.
Click the "Block" tab.
Adjust the Product Slider settings under the Slider Settings section:
Height – manually set the height of the slider using the slider bar to increase or decrease the height, or by entering a value into the field.
Display navigation buttons – enable the navigation buttons on the slider by toggling the button.
Auto Height – allow the slide heights to adjust automatically by using the toggle button.
Add products
To add products to your slider, type the product name in the "Product autocomplete" box. Product names will appear related to what you have entered in the box as you type.
Once the product you wish to select appears, click on it to add it to the slider.
Remove products
Click on the product to select it and show it in the right-hand menu.
Hit the “Delete Product” button to remove the product from the slider.
Set the margins
If you want to adjust margins for the product slider as a whole, you can do so under the "Dimensions" section in the right-hand menu.
Click the "Block" tab.
Select the Dimensions section; you can either adjust all four margins at the same time by entering in a value into the open field, or you can click the "link" button to be able to enter in individual values for each side.
To select a different measurement value besides pixels (px), click on "px" to view the dropdown menu; you can select from %, EM, REM, VW, and VH.
Block toolbar
Finally, as with most CMS blocks, you can use the Block Toolbar to reposition, remove, or manipulate the Product Slider block in various ways.
The Product Slider block toolbar has icons you can utilize for these functions:
Transform to – to convert the Buttons block into a "Group" or "Columns"block.
Drag – click and hold the rectangle with six dots, then drag to move the block to its new location (the blue separator line indicates where the block will be placed). Release the left mouse button when you find the new location to place the block.
Move up or down – click the up arrow to move the block up on the page; click the down arrow to move the block down on the page.
Change alignment – choose to either leave the block at its current size, or use the wide width toincrease the width of the block beyond the content size or the full width to extend the block to cover the full width of the screen.
More options – use this option to see more features available to customize the block.
Product Documentation
