AvisPlus Product Options v2
  • Get started!
    • Key Terminology Simplified
      • Avis Options and variants
      • Option Set
      • Option template
      • Option Set template
      • Option type
      • Option name
      • Label on Product
      • Label on Cart
      • Option value
      • Add-on product (Add charge)
      • Bundle variant
      • Conditional logic
      • Option URL
      • Tooltip
      • Help Text
      • Placeholder Text
      • Option widget
    • Option Types
      • Single line text
      • Multiple-line text
      • Number
      • Datetime
      • Email
      • Phone
      • Font Selector
      • Color Picker
      • File Upload
      • Switch
      • Quantity
      • Hidden field
      • Color swatch
      • Image swatch
      • Radio button
      • Checkboxes
      • Button
      • Dropdown menu
      • Color dropdown menu
      • Image dropdown menu
      • Combo box
      • Option Group
      • Space
      • Paragraph
      • HTML
      • Heading
      • Divider
      • Pop-up
      • Size chart
    • Activate App
  • User guide
    • Create Avis Option Set
      • Avis Option Set Template
      • Avis Option Template
    • Change product image upon option selection
    • Translate Avis options
    • Customize Shopify Option
    • Add Charge for an option value
      • One-time add charge feature
      • Add-charge by Quantity
      • Add-charge by Character
      • Hide Add charge product from Storefront
      • Hide Add charge product from Search bar
      • Hide Add charge product from 'Related Products' section
      • Hide Add charge product from Google Search
    • Add Bundle for an option value
    • Conditional Logic (Avis and Avis)
      • Conditional Logic (Avis and Shopify)
    • File Upload for Customers
      • File Upload Advanced Options
    • App Settings
      • Avis Option Settings
      • Shopify Option Settings
    • App Design
      • Avis Option Design
      • Shopify Option Design Library
    • OPTION URL feature
    • Import/Export Option Sets
    • Shopify Point Of Sale (POS) integration
    • Customize tooltip
    • Delete Span tags around the Add charge
    • Changing the option position on the Product page
      • Getting the HTML element
      • Reposition Avis options in EComposer Landing Page Builder
  • Subscription and billings
    • Pricing plans
    • How to Upgrade Your Plan
    • How to Cancel Your Subscription
  • Frequently Asked Questions
    • The differences between "Avis Option" tab and "Shopify Option" tab
    • How can I reposition Avis Options on Product Page?
    • What to do if Avis options aren’t visible on Product Page?
    • How can I set up Conditional Logic for options?
    • How can I add a charge to an option/ a variant?
    • Why aren't the option's Add charge included in Orders?
    • How can I show Avis Options on Packing Slips?
    • How can I show Avis option on Order confirmation Email/Order invoice/New order?
    • How can I show Avis option on Shipping Confirmation Email?
    • Can I add bundling products with the app?
    • Does the app work with Shopify Online Store 2.0?
    • Will the app slow down my website?
    • What happens if I uninstall the app, and how does it affect my store?
  • support and features request
    • 📩Contact Us
Powered by GitBook
On this page
  • Step 1. Create Your Options
  • Step 2. Enable Image Switching feature
  • Step 3: Set the Desktop Layout to "Thumbnail"
  • Step 4: Upload Your Product Images
  • Step 5. Set Alt Tags for Images
  1. User guide

Change product image upon option selection

You can automatically switch the main product image based on the selected custom options using Avislus Product Options! This feature helps you create a more dynamic, interactive shopping experience

PreviousAvis Option TemplateNextTranslate Avis options

Last updated 1 month ago

Step 1. Create Your Options

In the Basic tab, enter option values and upload an image that matches or is associated with the product variant you want shown.

The option value you created here will be used in later steps.

Step 2. Enable Image Switching feature

In the Advanced settings tab, select "Change product image on option selection"

Step 3: Set the Desktop Layout to "Thumbnail"

  • In the Theme Editor, open the Default Product template and locate the Product Information section.

  • Update the Desktop Layout setting to Thumbnails, as this layout will be the foundation for enabling the image change functionality.

Step 4: Upload Your Product Images

  • Upload all relevant images to your Shopify product media.

  • Ensure the image you want to show for a specific option is already attached to the product.

Step 5. Set Alt Tags for Images

  • Click on each image to find Alt text field, the Alt text of each image must exactly match the Value title of its corresponding option value.

  • This connection allows the product image to update automatically when a customer selects an option.

For instance, if your option values are "Cyan Blue", "Green", and "Black", you should set the Alt texts of the related images to "Cyan Blue", "Green", and "Black" accordingly.

NOTE: This feature only works on the product page. It may not function correctly on other pages like collection or homepage, because those pages usually do not display product image thumbnails in the same dynamic way.

That's it! Your product images will now dynamically change when a customer selects an option.