Magento 2 Product Improvement Extensions

  1. Home
  2. Docs
  3. Magento 2 Product Improvement Extensions
  4. Magento 2 Bundle Option Image
  5. User Guide

User Guide

1. Overview

Bundle Option Image for Magento 2 extension allows showing images of children products in Bundle products page. It supports all input types of bundle product options: drop-down, radio button, check box and multiple select. This is the ideal extension for Bundle product type.

2. How Does It Work?

Please go to Stores ⇒ Configuration ⇒ BSSCommerce ⇒ Bundle Option Image

2.1 General

magento 2 bundle option image

  • In Enabled: choose Yes to enable the extension, or No to disable it.

Note: The module works with only Bundle product.

  • In Class Options of Bundle Product: in case your website theme was customized, which makes this theme not have classes of bundle product options like default Magento 2, therefore, the module is not compatible with your website. In this situation, you can add classes to theme of your website:
    • Add class “input.bundle.option” to show product images in radio button option and checkbox option.
    • Add class “select.bundle.option” to show product images in drop-down option and multiple select option.
    • Add both 2 classes to show product images for all input types.

Note: if your website does not have theme customized and this module is completely compatible with your website, you needn’t configure this section.

2.2 Image size setting

magento 2 bundle option image

  • In Option Image Width (px): set image width for displayed children products.
  • In Option Image Height (px): set image height for displayed children products.

2.3 Images sliders with Multiple Select

magento 2 bundle option image

  • In Number of items per slide: set Number of child product images per slide in the slider of Multiple Select option.
  • In Slide Speed: set the duration between the transfer of 2 continuous sliders (unit: milliseconds)
  • In Auto Slider (Yes/No): choose Yes to set the automation of showing sliders (sliders run each 5 seconds) in Multiple Select option, or No to not set it.

Note: After setting, you must save your configuration then flush cache to start using the module.

2.4. Custom CSS

custom style

In case you want to make some changes to the bundle product page, you should add custom CSS in this filed. Let's follow our instructions under the box to make the right modification.

Was this article helpful to you? Yes No

How can we help?