Can I have have the dropimage function change the main image?

One of the option selectors that you can use for your product listings is called “Dropimage” and it lets you specify small images for each option that change as the option is selected. Like this:

The default action of this feature is to show the image change alongside the option selector as shown above. However, a question we get often is in regards to tailoring the function so that it changes the product’s main image instead. Like this:

Can it be done?

Yes! However, it takes some customization of the HTML and scripting that is used by your store. While we do offer this as a service for 3dcart Merchants, in the spirit of sharing, we’ve decided to list the steps here in case you’d like to try adding the customization yourself.

Please Note
The information in this article is provided solely as a courtesy and to offer basic instructions on making changes to your store’s HTML templates.

Please understand that – regardless of how simple or complex the changes may be – HTML changes and troubleshooting fall outside the scope of our support department. The 3dcart support team is neither trained, qualified, nor allowed to make these changes for you. The boundary of our scope in this matter is limited to providing these instructions and helping you reset the template if the changes don’t work as you wanted.

If you are uncomfortable with making changes to your site’s HTML, please contact your sales representative and inquire about our HTML and design services which can make these changes for you.

Thank you for your understanding

I’m willing to risk it! What do I need?

To make these changes you’ll need the following:

  • An HTML5 theme folder
    (Recommended for best results!)
  • Access to and comprehesion using your 3dcart store’s FTP access
    (click here for some quick instructions on using FTP)
  • Some level of basic HTML editing knowledge
    (Just basics like finding and replacing certain elements)
  • A text or HTML editor of your choice
    (notepad, notepad++, dreamweaver, etc)
  • The modified listing.js file attached on this article
    (see download links below)
  • Patience and a penchant for trial and error
    (OPTIONAL: although highly recommended)

I got all that! I can do this!

Great! Let’s get started then. First, some prep work.

Setting up your product

We assume that your product is already set up for using the dropimage option selector. If not, please click here and learn how to set up your options and dropimage selector images.

Here are a few notes to consider when setting up or updating the drop image options:

  • Make the drop images the same size as your product images
    Normally drop images are very small but now, the drop images will appear in the same section as the main images, so they’ll need to be the same size.
    For example, if your product images are 500×500, make the drop image selector images the same size.
  • Make sure that the first drop image is the same as your main product file.
    In other words, if your main product image is “product-image_01.jpg” use that image also for the first drop down image.
    This is because – as the page loads – the first option will already be selected, and you want to have it match the main image.
  • Find out which theme you’re using
    Finally, while creating/updating the product in the online store manager, make a note of the theme your store is using.
    Go to Settings ->Design ->Themes & Styles and just have a quick look at what’s listed for “Selected Theme”

If the theme name contains “-html5” in its name, then it is an html5 theme which is information that will come into play in the next sections

Getting the necessary files

The overall process involves uploading a special version of the store’s listing.js javascript file to your theme folder which can be found on this article. Just click the appropriate download link below and unzip the file to your desktop.

  • listing1.js (if your theme is HTML5 *RECOMMENDED*)
  • listing1.js (if your theme is non-HTML5 *results may vary*)

Once you download and unzip the file, keep it on your desktop. We’ll come back to it in a moment.

Next, you’ll need to connect to your store’s FTP access.

  1. Connect to your store’s FTP access
  2. Navigate your FTP program to web/assets/templates

Your will see a series of folders listing your store’s installed themes along with a “common” folder and a “common-html5” folder. Let’s begin with the common folders.

  • If you are using an HTML-5 theme for your store, proceed to the common-html5 folder.
  • If you are using an older non-HTML5 theme, please proceed to the common folder instead

The common folder will contain all of the default templates used by the store. They will be listed alphabetically. Again, be sure to go into the common folder appropriate for your selected theme.

  1. Once in the appropriate common folder, locate and download a clean copy of the listing_0.html template
  2. Download the file to your computer and rename it (on your computer) as listing_10.html

Now we need to make two small edits on the file:

  1. Open up the listing_10.html file with your favorite text or HTML editor.
  2. Locate the line of code at the top that says:
<script type=”text/javascript” src=”assets/templates/common/js/listing.js”></script>
  1. Remove and replace that line with the following:
<script type=”text/javascript” src=”assets/templates/[template]/js/listing1.js”></script>
  1. Next, locate the following line farther down on the file:

If using an HTML5 theme, find this line:

<div class=”dropdown-image”><img name=”img_[oname]” width=”50″ src=”assets/templates/common-html5/images/spacer.gif” /></div>

If using a non-HTML5 theme, find this line:

<img name=”img_[oname]” src=”assets/templates/common/images/spacer.gif” alt=”” border=”0″ />
  1. Remove this line completely. (Remove only this line!)
  2. Save your file

Great job! That was the hard part. Now let’s get these files up to your store.

  1. Once again connect to your store’s FTP
  2. This time, navigate to web/assets/templates/[theme_folder]
    (where [theme_folder] is your store’s selected theme)
  3. Upload your edited listing_10.html file into the theme folder.
  4. While in the theme folder, navigate to the js folder
    (It’s unlikely, but if your theme doesn’t have a “js” folder, just create it)
  5. Once in the theme’s js folder, upload the listing1.js file you downloaded and unzipped earlier.

Now, let’s get the product and the store ready to use these edited and uploaded files.

  1. Log into your 3dcart Online Store Manager
  2. Using the left hand navigation menu, go to Products ->Product List
  3. Locate the dropimage product we’re working with and click on its thumbnail image, name or ID to open it up
  4. While viewing the products information screen, click on the “Advanced” tab found along the top
  5. Look for the “Listing Template” drop down menu and set it to “Style 11”
    (Style 11 corresponds to listing_10 that you uploaded previously)
  6. Click “Save” at the top right to set your changes.

For best results, we recommend having the store’s 3dZoom function turned on since it will also work with the drop images. To set this function,

  1. Go to Settings ->General ->Store Settings.
  2. Once there, click on the Product Display tab found along the top
  3. Look for the “Enable Product Page Zoom” drop down menu and set it to “3DZoom”
  4. Click Save

If done correctly, your product will now update its main image as the drop image selectors are changed!

Best of luck to you in your edits and have fun with your new feature!