How to show an image for a products attributes option
Overview of Products, Attributes and Options.
Products, Attributes and Options are ways of organising items in your store to make it easy for shoppers to buy from you. Used correctly, they can reduce the amount of actual product pages you have in your online store - making it easy for customers to find items, as well as helping improve SEO, by stopping search engines listing duplicate content for your site.
When would you use Attributes and Options?
You would use Attributes and Options when you sell an item that is available in various forms.
Example: You sell paint. The paint is available in 6 colours, and all the paints colours are sold in the one size - 1 litre cans. Instead of displaying 10 individual products (10 product pages 1 page for each colour), you display 1 product page, with 1 Attribute named Colour that displays 10 different Options, which in this case are colours - all on the one page. See Image 1
How are Products, Attributes and Options structured?
In the image 1 below:
1. The Product is called Paint 75ml.
2. Attributes are assigned to the Product "Paint 75ml
" (Example: Paint Colour)
3. Options are assigned to the Attribute "Paint Colour
" (Example: Yellow, Lemon Yellow, Pymol Red etc.)
The Product "Paint 75ml"
has 1 Attribute "Paint Colour"
, with 6 Options "Colours"
- So the page shows that: 75ml Paint tubes are available in 6 different colours.
The shopper can enter how many they want to buy of each colour and add them to the cart, with one click!
|What are Images as options?
Images as options allow you to display an image for an option, instead of a dropdown menu or text.
Each of your products options can display 1 image. You can have as many options as you like.
See example image below:
|You add images to a products attributes option by navigating to:
ADMIN->Categories/Products->Images for Options (see A below).
|Then follow these steps.
Select the Products Attribute from the drop down menu and click the "Edit " Button (see B above)
Select the Attributes Option you want to give an image to (see A below) and click the "Edit" Button (see B below)
Click the "Browse" button to locate the image you want to use on your computer. (see A below)
Click the "Update" Button (see B below) - you can leave the "Choose URL" box empty.
NOTE: You can ignore the bottom "Update" button as well (see C above)
Now you have added an image to one of your Products attributes options.
It should look like the image below. (your images will be displayed instead of mine!)
The images you use should be small in file size. Whilst images will be resized by your website, large images will take longer to display and small image may be blurry.
For best results these are the image requirements:
Size: 100px X 100px
File Type: jpeg