|
In your product options, you have the ability to set the option type as a "Drop Image" type.This feature is useful for when you want to show a graphical representation of what the product option will look like. For instance, you may have a fabric or product that comes in different colors, and you may want to display an image of the color swatch when customers choose that particular option. This article will teach you how to use the product "Drop Image" feature.
Upload Your Images
The first step is to upload the images for the product options to your store's Image Manager:
- Log into your Shift4Shop Online Store Manager
- Using the left hand navigation, go to "Products"
- On the next page, look towards the top of the page and click on the "Actions" drop down arrow
- Select Image Manager
Your store's Image Manager is a special interface that will allow you to upload images to your site without the need for FTP. With it, you can create folders for your product images, rename, as well as delete images as needed.
- Once in the Image Manager, look towards the top right of the page and click "Upload Files"
The Image Manager window will open up and you will be able to drag and drop images from your computer, directly into the image manager. Use this to upload your product's drop images.
Tip:
It's generally a good idea to make your drop image files separate from your product images in order to compensate for the resizing of the images in the drop down menu. It is also a good idea to make the images small in resolution in order to ensure they display correctly.
A uniform resolution between 50x50 pixels or 100x100 pixels usually works best.
Assign your product options
The next step is to assign options to your product.
- Using the left hand navigation, go to Products and search for the product that you'ld like to edit.
- Click on the product ID for the item or select the "Action >Edit" button at the far right of the listing.
- Next, click on the Options Tab for the product.
We'll now add a product option that will use Drop Image for its display
- Click on the "+Add New" button located at the top right of the page.
- Type in your Option Name, (e.g. Color)
- Choose your option display type as "Drop Image."
- Click "Add" to create the option.
Now that the option is added, we'll need to create the specific option sets that it will offer.
- Towards the top right of the Option listing, look for and click on +Add [option]"
[option] will be the name of the option you just created.
- Add your Option Sets. (e.g. Red, Blue, Yellow, etc) as needed
Note:
By choosing DropImage as the Option display type, your individual Option Sets will now have a "Select" link attached to their respective listings.
- Click on Select link in the "Opt." field and (using the file manager) navigate to your desired image.
- Click on the image then click "select" to assign it
- Repeat this process for as many options you have for the product.
Result: Your product's listing page will now show a selectable option drop down that will contain a small image that update when the respective options are selected.
Additional Information
Note that the size of the image used for drop image will be controlled by your specific theme's CSS file.
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.
|