Product Slider

Creating a WooCommerce Product Slider in Breakdance

This tutorial guides you through the process of creating a product slider in Breakdance, allowing you to showcase your WooCommerce products in a dynamic and interactive way. No additional add-ons or coding are required, as this functionality is natively supported by Breakdance’s built-in products list element.

Setting Up the Products List

Adding the Products List Element & Selecting Specific Products

1. Open Breakdance.
2. Click the “Add” button in the top left of the builder interface.
3. Search for the “Products List” element.
4. Click or drag and drop this element onto your page. By default, it displays a list of products from your store.
5. Decide on the specific products you wish to showcase in the slider. You can choose from options such as “featured” or “on sale,” or select products manually.
6. To pick products manually, click on each product you want to include in the list.
7. Confirm your selection. The products list should now display the chosen products.

Configuring the Slider

Adjusting Layout Settings

1. Go to the “Design” tab of the products list element.
2. Navigate to “Layout.” The default layout is “Grid.”
3. Change the layout to “Slider.” Your products will now be displayed in a slider format.

Customizing Slider Options

1. Expand the “Slider” options panel and then the “Settings” options panel for more detailed settings.
2. Adjust the “Speed” to control how fast the slider transitions between products.
3. Set the slider to “Infinite” if you want it to loop continuously.
4. Expand the “Advanced” options panel and modify the “Space Between Slides” to control the distance between individual products in the slider.
5. Change “Slides Per View” to specify the number of products displayed at once. For example, set it to “three” for displaying three products side by side.
6. Preview the changes to ensure the slider looks as expected.

Finalizing and Reviewing

1. Once satisfied with the configuration, save your changes.
2. Exit the editor to view the product slider live on your site.
3. Test the slider functionality, ensuring it transitions smoothly between products and displays correctly.

Additional Notes

This feature enhances user experience by offering a dynamic way to explore products. It’s particularly useful for highlighting specific items, deals, or collections. Remember, the customization options allow you to align the slider’s appearance and behavior with your brand’s aesthetics and user interface design preferences.