EasifyApps EasifyApps
  • About
  • Apps
    Easify Product Options
    Easify Product Attachments
  • Resources
    Help Center
    Easify Product Options
    Easify Product Attachments
    Video Tutorials
    Easify Product Options
    Easify Product Attachments
  • Partners
  • Blog
  • Contact
All Easify Apps
EasifyApps EasifyApps
  • About
  • Apps
    Easify Product Options
    Easify Product Attachments
  • Resources
    Help Center
    Easify Product Options
    Easify Product Attachments
    Video Tutorials
    Easify Product Options
    Easify Product Attachments
  • Partners
  • Blog
  • Contact

Product Attachments

App Activation
  • Activate the app on your theme
  • Video Tutorial
User Guide
  • Upload Product Attachments
  • Upload Attachment Icons
  • Add Attachments To Templates
  • Import Bulk Product Attachments
  • Export Product Attachments
Customization & Support
  • Get support
  • Request a new feature

Product Options

Getting Started
    Key Terminology Simplified
    • Custom options & variants
    • Option set
    • Option set templates
    • Option type (Option input)
    • Your option sets
    • Option label
    • Option name
    • Option value
    • Option group
    • Price Add-ons
    • Conditional logic
    • Live preview
    • Help text
    • Placeholder
    • Information (Tooltip)
    • Option widget
    Option Input Types
    • Text Box
    • Text Area
    • Number Text Box
    • Color Swatches
    • Image Swatches
    • Radio Buttons
    • Dropdown
    • Checkbox
    • Button(s)
    • Switch
    • File Upload
    • Option Group
    • Product List
    • Modal
    • Date Range
    • Date Picker
    • Time Picker
    • Font Picker
    • Color Picker
    • Dimension
    • Quantity
    • HTML
    • Heading
    • Paragraph
    • Spacer
    • Divider
    App Activation
    • Activate the app on your theme
    • Video Tutorial
User Guide
    Set Up Option Sets
    • Create A New Option Set From Scratch
    • Use A Template To Create Your Option Set
    Conditional Logic
    • What is Conditional Logic (CL)?
    • Examples of Conditional Logic
    • How To Set Up Conditional Logic
    Add-on Products
    • Set Up Add-on Products
    • Video Tutorial
    Tiered Wholesale Pricing
    • What is Tiered Wholesale Pricing?
    • Set up a Tiered Wholesale Pricing rule
    • Customize the Tiered Wholesale Pricing box
    Option Import/Export
      Option Export
      • Export All Option Sets
      • Export Specific Option Sets
    • Option Import
    App Settings
    • General Settings
    • App Translation
    • App Design
  • Set Up Add-on Prices (Add Charge)
  • Switch Image With Custom Options (Beta)
Subscription & Billing
  • Pricing Plans
  • How to upgrade
  • How to cancel subscription
Customization & Support
  • App Maintenance Notification
  • Get support
  • Request a new feature
Frequently Asked Questions
  • My options don’t show on the product page, what should I do? 
  • How many custom options can I create per product?
  • Does the app work with Shopify Online Store 2.0?
  • Will the app slow down my website?
  • How can I stay informed about updates for the app?
  • What happens if I uninstall the app?

Recommended Shopify Apps

  • Affiliate programs
  • Marketing
  • Invoices and receipts

Switch Image With Custom Options (Beta)

Table of Contents
  • Follow these simple steps to set up the Image Switcher for your product options:
  • IMPORTANT NOTES:

(Linking Custom Product Options with Product Images)

The Image Switcher feature allows you to link your custom product options with product images. When customers select an option on your Shopify product pages, the product image will automatically change to reflect their selection.

Notes: This feature is applicable for the following option types: Dropdown, Radio Buttons, Buttons, Checkbox, Color Swatches, and Image Swatches.

Example:

Follow these simple steps to set up the Image Switcher for your product options: #

1. Enabling Image Mapping

When editing an option, locate the checkbox labeled Change product image/thumbnail on option selection.

Notes: By default, this checkbox is not selected. Make sure to check it to enable the image mapping feature.

2. Adding Option Values’ Labels

Add the labels for your option values, which will be displayed on the storefront. These labels will be used in the later steps.

3. Uploading Product Images

Upload the product images that you want to show corresponding to your custom options. Navigate to your product details setting page and add the images there.

4. Setting Alt Tags for Images

After uploading your images, click on each image to add an alt text. The alt text should be the same as the option value label you created in the previous step.

For example, if you have option values labeled “A”, “B”, and “C”, assign alt texts to the images as “A”, “B”, and “C” respectively.

Notes: After entering the alt text, make sure to click on Save alt text to save your changes.

5. Verifying Image Changes

Check the product page to ensure that the images change correctly based on the selected options.

IMPORTANT NOTES: #

If your site is using a Free theme from the Shopify Theme Store, following the above guide is sufficient to enable the Image Switcher feature on your site.

However, if your site is using a Paid theme from the Shopify Theme Store or from another theme marketplace, it requires additional steps required to enable the feature, which involves adding Target Selectors.

*Adding Target Selectors can be a bit technical and may require some understanding. If you’re not familiar with this process, we recommend reaching out to our dedicated support team for assistance.

Our support team is available via Live Chat or you can send your request to support@tigren.com. We are here to help you with the setup process at no additional cost. Don’t hesitate to contact us if you have any questions or need guidance.*

Here’s a quick demonstration on how to find and add the Target Selectors:

  • Open a product page on your website storefront and zoom out the page to approximately 25%.
  • Right-click on the first product image and choose “Inspect” from the context menu.
  • In the opened code view, hover your mouse to find the code line that contains all of your product images.
  • Copy the class content inside the “…” and modify it (append a “.” after each word and eliminate spaces). For example:

From:

product_media-item grid_item slider_slide is-active

To:

.product_media-item.grid_item.slider_slide.is-active

  • Go back to the App Settings in the Easify Product Options app and open the Target Selectors tab.
  • Paste the class you copied earlier into the “Product image parents selectors” field.
  • Save your settings and check the results on the storefront.

Remember, our support team is always here to assist you. Feel free to contact us if you encounter any issues while setting up the app.

Table of Contents
  • Follow these simple steps to set up the Image Switcher for your product options:
  • IMPORTANT NOTES:
Essentials Logo

Make the Complex Simple for Shopify Stores

Our AppsHelp CenterPartner ProgramAffiliate ProgramBlogContact Us

Copyright © 2023 Easify. All rights reserved.

Close
Search

Hit enter to search or ESC to close

cookie By using this website, you agree to our cookie policy. Close