Knowledgebase: Product Options

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 the 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 hand navigation menu:

  1. Go to Products >Product List
  2. Find the product that 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:

  1. Click on the product's Options Tab.
  2. Look to the top right of the page and click on the "+Add New" button to create your option.
  3. Type in your Option Name,
    ( i.e. Color, Pattern)
  4. 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.
  5. Choose DropImage in the Type field
  6. 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.
  7. Add any additional information for the option as needed
  8. Click "Add" when finished.

At this point in the process, you've create 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.

The option set "+Add" link will be labelled with the name specifed in step 5 above. For example, if you labeled the option "Pattern" then the +Add link will be labeled "+Add Pattern"

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

  1. Type the specific option name in the Description field
    i.e. "Red" for a Color option or "Paisley" for a pattern option.
  2. Set the option's sorting with the "Sorting" Field and add a part number designation using the "Part" field if necessary.
  3. 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.
  4. 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 article, we'll continue onto specifying your images for the drop image functionality.

  1. While viewing your newly created selectable options, click the "Select" link located under the "Opt." column.
  2. Next, use the file manager to choose the image that will correspond to this option.

If the image is not already uploaded to the File Manager, look to the top right of the File Manager page and click the "+Upload Files" button to browse for the file on your computer

  1. Repeat the drop image steps for each of your additional selectable options
  2. Once you've completed all of your selectable options, click on the "Save" button at the top right of the Options page to finish.

Your Option will look like this on your website:

In this example, we used a simple color swatch to represent the available option color. However, you can also use a small thumbnail image of the product in its available color to further illustrate the option set.

Furthermore, since the actual display of the drop iomage is very small, there's really no need to use a hi-resolution image for the drop image. A simple thumbnail sized image will suffice.


Help Desk Software by Kayako fusion