Knowledgebase: Product Options

How do I 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 the 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:

  1. Go to Products >Product List
  2. Find the product that you'd like 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)
  3. Click on the Options Tab located along the top of the product information pages
  4. Then click the "+Add New" button located towards the top right
  5. Type in the Option label's name. For example, "Available Colors"
  6. 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.
  7. Using the "Type" drop down menu, select the one labeled "DropImage"
  8. Check the Required checkbox if you would like this option to be selected in order for the product to be added to the shopping cart.
  9. 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 option listing and you will see three links to add option sets, delete the option altogether or edit it further.

  1. Click on the "Add [option name]" link to proceed
    [option name] will reflect whatever you named the option label.
  2. Enter a description for the individual Option such as the name of the color that will be selected
  3. Type in the sorting number for the option. The higher the number, the farther along the list it will display
  4. 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 appeneded to it
  5. If the option incurs any additional cost, enter that amount in the "Value" field.
  6. Click Add to complete the set up for the option set
  7. 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.

  1. Click the Select link in the Opt. column for each set
  2. 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
  3. Repeat for each option set

Additional Information
While you are setting up your option sets, you will see these configurable settings as well:

  • Description
    The option's name
  • Default
    Makes the option pre-selected on the product listing page.
  • Hide
    Hides the option form the listing page.
  • Value
    Adds an additional amount when the option is selected.
  • Part #
    The part number for the individual option if needed.
  • Display Order
    The sorting number for the option's display.
  • Custom Item
    Used if the option is for a Product Bundle where an additional item is added to the order when the option is selected.

These settings are available with any option type (not just DropImage). For more complete information on setting up Product Options in general, please click here.

  1. After setting up your DropImage options, click "Save" at the top right to commit your changes.

Your Option will look like this on your website:

In the illustrated example above, 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.

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 view cart by following these next steps below.

While still in the Shift4Shop Online Store Manager:

  1. Use the left-hand navigation menu and go to Settings >General >Store Settings
  2. Then, click on the "Checkout" tab found along the top
  3. Within the "View Cart" section, place a mark in the "Use Dropdown Image option as cart thumbnail" checkbox
  4. Click "Save" at the top right of the page

The product's image in view cart will now display as the selected Drop Image.

This setting also applies to the Color Swatch option type.


Help Desk Software by Kayako fusion