|
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:
- Go to Products >Product List
- 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)
- Click on the Options Tab located along 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 in order 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 option listing and you will see three links to add option sets, delete the option altogether or edit it further.
- Click on the "Add [option name]" link to proceed
[option name] will reflect whatever you named the option label.
- Enter a description for the individual Option such as the name of the color that will be selected
- Type in the sorting number for the option. The higher the number, the farther along the list it will display
- 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
- If the option incurs any additional cost, enter that amount in the "Value" field.
- Click Add to complete the set up for the option set
- 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.
- Click the Select link in the Opt. column for each set
- 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
- 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.
- 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:
Tip
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:
- Use the left-hand navigation menu and go to Settings >General >Store Settings
- Then, click on the "Checkout" tab found along 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 view cart will now display as the selected Drop Image.
Tip
This setting also applies to the Color Swatch option type.
|