Magento 2 Custom Option Image

Custom Option Image – Magento 2
USER MANUAL
Supported Version: 2.0, 2.1, 2.2, 2.3,2.4
www.mageants.com support@mageants.com 1

Table Of Content
Preface……………………………………………………………………………………….3
Installation………………………………………………………………………..………....4
option 1.............................................................................................................................4
option 2.............................................................................................................................5
Backend Example……………………………………………...….…...…………….……..6
Extension Configuration……..…………….………………...……………..……………...6
Frontend Example…………………………………………..…………………………….10

Preface
Custom Option Image for Magento 2 extension allows admins to add
images/colors to custom options of products. It supports uploading unlimited images
and assigning to custom options of different types, such as drop-down, multiple select,
checkbox, radio button.
Add image to Custom Options
– Easily assign, edit and remove particular image for different custom options of select
type.
– Admin can set different height and width of the image to be displayed for options of
different input types.

Installation
There are two ways of installing extension in magento2.
- Using COMMAND LINE.
- Manually Install extension.
Option 1: Magento 2 install extension using COMMAND LINE
(Recommended)
Follow below steps to install extension from the command line.
Step 1: Download the extension and unzip it.
Step 2: Upload it to code directory in your magento installation’s app directory If code
Directory does not exists then create.
Step 3: Disable the cache under System -> Cache Management.
Step 4: Enter the following at the command line:
Php bin/magento setup:upgrade
Php bin/magento setup:static-content:deploy
Step 5: Once you complete above steps log out and log in back to the admin panel
and switch to Menu STORES → Configuration → Mageants → Custom option
image, the module will be displayed in the admin panel.

Option 2: Magento 2 install extension manually
Step 1: Download the extension and unzip it.
Step 2: Upload it to code directory in your magento installation’s app directory If code
Directory does not exists then create.
Step 3: Disable the cache under System -> Cache Management Edit
app/etc/config.php file and add one line code:
‘Mageants_Customoptionimage’ => 1
Step 4: Disable the cache under System -> Cache Management
Step 5: Once you complete above steps log out and log in back to the admin panel
and switch to Menu STORES → Configuration → Mageants → Custom Option
Image, the module will be displayed in the admin panel.

Backend Example:
After Installation of Extension login to magento admin panel to set
configuration of the extension.
As per below screen shot you can set all the settings here.
Extension Configuration
Please, expand the General & Frontend View section:
Enabled — Set the option to Yes if you want to display custom options image on the
product detail page.
Drop-down Option View: Choose the options for show the all image or dropdown
option select after show image

Multiple Select Option View— Choose the options for show the all image or multiple
option select after show image.
Show image when selected: Image is only displayed when the custom option is
selected.
Show all images: All images are displayed in each custom option. If a customer selects
an option, its image will be highlighted.
Image Size Settings
Admin can also set the height and width of the image to be displayed for all custom
options having 'Display Mode' as Image.
Then, expand the Image size settings section:
Drop-down Option Image Height — set image height for drop-down option type.

Drop-down Option Image Width — set image width for drop-down option type.
Radio Buttons Option Image Height — set image height for radio buttons option type.
Radio Buttons Option Image Width — set image width for radio buttons option type.
Checkbox Option Image Height — set image height for checkbox option type.
Checkbox Option Image Width — set image width for checkbox option type.
Multiple Select Option Image Height — set image height for multiple select option
type.
Multiple Select Option Image Width — set image width for multiple select option type.
Upload Image for Custom Options
Add option in Product Clicked Menu CATALOG  PRODUCT  EDIT 
CUSTOMIZABLE OPTIONS.
Create new options and list of All created options will be displayed in the grid. Click
the Add Value button to create an options or select the one to edit it.
Now click the "Save" button to save the product.
Go to systemCache Management and click to "flush cache".

Frontend Custom Option Image Type — choose the appropriate option type for an
options. It’s possible to choose among various option types depending on your specific
needs:
 Dropdown
 Radio Buttons
 Checkbox
 Multi-Select

Frontend Examples
See the example of custom options image with different input types (Dropdowns, Radio
buttons,Checkbox Multiple select).
 Dropdown Image Options
Dropdown options view in frontend and show all options images.

 Radio Button Image Options
User can select at a time one radio button option.
Radio Button options view in frontend and show all options images.
 Checkbox Image Options
User can checked one or more checkbox options.
Checkbox options view in frontend and show all options images.

 Multiple Image Options
User can select multiple option Multiple Select options view in frontend and show
all options images.

 Order View Display Options
Frontend order view display all options in item grid.

Thank you!
Should you have any questions or feature suggestions, please contact us at:
http://mageants.com/contactus
Your feedback is absolutely welcome!

Magento 2 Custom Option Image

More Related Content

Similar to Magento 2 Custom Option Image

More from MageAnts

Recently uploaded

Magento 2 Custom Option Image