Use the Drop Image Option Type
Some of your products may have multiple options. For instance, if you sell clothes in your online store, a sweater may come in red, blue, and green. You may want to create an option that displays a thumbnail picture of your sweater or the color swatch in different hues when a customer chooses a specific color.
Create Drop Image Product Options
To create an option with images, we'll first create the option label. This is where the shopper will see the individual options listed on the page. To do this:
Go to Products > Product List.
Find the product you want to edit and click on its name. (You can also look to the far right of the item and click on its Action > Edit button)
Click on the Options tab located at the top of the product information pages.
Then click the +Add New button located towards the top right.
Type in the Option label's name. For example, "Available Colors."
Type in the Sorting number – this is used to control how your options display if you have more than one for the same product.
Lower numbers will display before higher numbers.Using the "Type" drop-down menu, select the one labeled "DropImage."
Check the Required checkbox if you would like this option to be selected for the product to be added to the shopping cart.
Click the Add button to add the Option Label.
Next, we'll create the Option Sets.
Once you've added the Option Label, you will see it listed in the Options Tab. Now, we'll go over the steps involved in setting up the individual option sets - in other words, the actual selections - for that option.
Look to the far right of the options listing, and you will see three links to add option sets, delete the option altogether or edit it further.
10. Click on the Add [option name] link to proceed. [option name] will reflect whatever you named the option label.
11. Enter a description for the individual option, such as the name of the color that will be selected.
12. Type in the sorting number for the option. The higher the number, the farther along the list it will display.
13. Enter a Part Number for the option. If you have a part number written for the product in its information tab, the option part number described here will be appended to it.
14. If the option incurs additional costs, enter that amount in the "Value" field.
15. Click Add to complete the setup for the option set.
16. Repeat for all of the remaining selections on the Option.
The final step in our process is to assign the images to the option sets that will display when those options are selected.
After creating the option sets, they will be listed under the label created earlier. Within the set listings, you will see a column labeled "Opt" and a link for each set labeled "Select." This link will open up the store's file manager so you can browse for and select the image(s) that will be used for the drop image.
17. Click the Select link in the Opt. column for each set.
18. Using the file manager, click Select for the image you would like to display next to the option.
If the image is not already uploaded to the File Manager, click Upload Files, then browse for the file on your computer.
19. Repeat for each option set.
20. After setting up your DropImage options, click Save at the top right to commit your changes.
Your Option will look like the image pictured above on your website.
Use Dropdown Image Option as Cart Thumbnail
Normally, the image shown to the shopper on the view cart page is the product's main image. However, you can also have the store display the selected drop-down image in the view cart by following the next steps below.
While still in the Shift4Shop Online Store Manager:
Use the left navigation menu and go to Settings > General > Store Settings.
Then, click on the Checkout tab found at the top.
Within the "View Cart" section, place a mark in the "Use Dropdown Image option as cart thumbnail" checkbox.
Click Save at the top right of the page.
The product's image in the view cart will now display as the selected Drop Image.