How To: Add Images for Option Variants and Combinations to a Product Page
When a product has multiple option combinations, customers select the combination by choosing variants for every option. Let’s enable customers to select variants by clicking on variant icons. We’ll also make the main image of the product change when a customer selects a specific combination.
As a result, the page of your product will look like in the picture below:
Step 1. Icons for Option Variants
Let’s add icons for option variants. By clicking these icons, customers will select the corresponding option variant.
1.1. In the Administration panel, go to Products → Products.
1.2. Click the name of the product you want to edit.
1.3. Switch to the Options tab.
We assume that you have already created the options and their variants for the desired product.
1.4. Click the name of the option you want to edit.
1.5. Switch to the Variants tab.
1.6. Add icons for the option variants. Make sure to specify alternative text that will appear when the image can’t be displayed for some reason—it’s good for SEO.
1.7. Click Save.
The icons should then appear on the product page. Customers can select the option variant by clicking those icons. The main product image won’t change, unless you follow instructions in step 2.
Step 2. Images for Option Combinations
Let’s make it so that the main product image changes when a different option combination is selected.
2.1. In the Administration panel, go to Products → Products.
2.2. Click the name of the product you want to edit.
2.3. Switch to the Options tab and click Option combinations.
We assume that you have already created option combinations. If the Option combinations button doesn’t appear, then the product doesn’t have options that can be a part of a combination.
2.4. Upload the images for option combinations. Make sure to specify alternative text that will appear when the image can’t be displayed for some reason—it’s good for SEO.
2.5. Click the Save button.
Now when a customer selects the option combination on the storefront, the image of that option combination will be displayed.