Image Product Option Tutorial

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 in different colors when a customer chooses a specific color.

Create Drop Image Product Options

Log into your Shift4Shop Online Store Manager and, using the left navigation menu:

1. Go to Products > Product List.

2. Find the product you'd like to edit and click on its thumbnail image, ID or name to open it up.
   You can also look to the far right of the product and click on its Action > Edit button.

The next steps will involve creating options for the product. We will use an option type called "Drop Image" which will show a drop-down menu with the option labels as well as an image representing the option. To continue:

3. Click on the product's Options tab.

4. Look to the top right of the page and click on the +Add New button to create your option.

5. Type in your Option Name (i.e., Color, Pattern).

6. Type in the Sorting number – this is used to control how the option will display on the product page if you have multiple option sets for the same product. Lower numbers will display before higher numbers.

7. Choose DropImage in the Type field.

8. Check the Req. checkbox if you would like this option required to be chosen by the customer to be able to add the product to the shopping cart.

9. Add any additional information for the option as needed.

10. Click Add when finished.

At this point in the process, you've created an Option Set. Now we'll go over creating the actual selectable options for the set. Look for the option set you've just created and click on its +Add link.

After clicking the +Add Link for the option set, continue following the steps below.

11. Type the specific option name in the Description field, i.e., "Red" for a Color option or "Paisley" for a pattern option.

12. Set the option's sorting with the "Sorting" Field and add a part number designation using the "Part" field if necessary.

13. You may also add a value to the option's "Value" field if it will add to the base price of the item when the option is selected.

14. Once you've created the first option selection, click the Add button to continue.

Repeat this process for each selectable option needed in the set. If you need more in-depth information on creating product options, please click here. For the purposes of this guide, we'll continue to specify your images for the drop image functionality.

15. Viewing your newly created selectable options, click the Select link under the "Opt." column.

16. Next, use the file manager to choose the image that will correspond to this option.

17. Repeat the drop image steps for each of your additional selectable options

18. Once you've completed all your selectable options, click on the Save button at the top right of the Options page to finish.

Your Option will look like the above image on your website.