PR8 Swatch / Main Image swap

[lesliekirk]

Where are the best instruction on how to implement the attribute image swatch swap of the main image? As in clicking the attribute swatch makes the main image change out to an image related to the attribute swatch.

Leslie

[Rick Wilson]

Re: PR8 Swatch / Main Image swap

Ummm, I think you've crossed the streams here. The Attribute Image displayed as a Swatch is always displayed as s Swatch (in a thumbnail style).

If you associate a new main image with the Variant that you're selecting by clicking that swatch, the Image Machine will automatically swap those images.

So if you have a shirt that comes in Red and Blue. You'll have some generic main image, and then a Red and Blue Swatch Image associated with the appropriate attribute. When you click on that Swatch image on the shopping page, the Image Machine (if configured to do so) will swap out the Variant's Main image with the Main Product's Main Image.

I hope that makes sense?

[lesliekirk]

Re: PR8 Swatch / Main Image swap

That's what I want to do - but point me to where the steps are outlined so I can follow them step by step please.

[Rick Wilson]

Re: PR8 Swatch / Main Image swap

Pamela's book covers it fairly well, have you followed her steps?

[patricksd]

Re: PR8 Swatch / Main Image swap

The Book actually does a pretty good job explaining it except that to have the images swap the attributes need to be inventory variants also.

1. Log into the Miva Admin
2. In the left hand menu find and click on 'Products'
3. Find and click the 'edit' button for the product you want have the feature.
   
4. Click the 'Attributes' tab.
5. Click the ‘Add Attribute’ and set the attribute up… Example: Code: COLOR Prompt: Pick Color Type: Swatch – Drop-down List Check mark R for required and I for Inventory Click Update to save
6. Add your options loading images that are 50x50 or smaller… Example Code: RED Prompt: Red Check mark D for Default if desired else the first option will be default.
7. Repeat step 5-6 until all of the options have been added.
8. Click the Inventory Tab and auto generate the variants… Example: I leave everything default.
9. Click the Edit Inventory button and set the inventory levels… Example: I set everything to 1000 just make sure there are plenty and if inventory isn't a factor.
10. Next we’ll need to add images to the variants so back to product click the 'Uncategorized' button and click edit on the first Inventory Variant product.
11. Switch to the Additional Images tab and upload the Image that is to be swapped out with the main image.
12. Click the arrow pointing to the right with out the line to go to the next inventory variant and upload the next image… repeat until complete

Things to keep in mind:
1. The 'swatch' image can not be larger than 50x50 by default but editing the CSS file can change that.
2. The main product can not have additional images assigned to it, but the variant products can have multiple images assigned in additional images.
3. If you are not seeing the swatches on the product, check the PROD pages Attribute Machine tab and make sure that Swatch Element: is set to ‘swatches’, without the quotes.

[lesliekirk]

Re: PR8 Swatch / Main Image swap

Okie dokie - just have to edit the MMUI to get it all to work.

[lesliekirk]

Re: PR8 Swatch / Main Image swap

And this can also be done with an Attribute Template?

[patricksd]

Re: PR8 Swatch / Main Image swap

Yes, it also works with attribute templates, you just need to generate the inventory variants and than add the images to variants also.

[lesliekirk]

Re: PR8 Swatch / Main Image swap

Yeah - it's that having to generate the inventory variants that is going to be a real show stopper. I'm building a universal set of color swatches that will be applied to a 100 or so products. That means I have to go through a 100 or so products and repeat this step. I was really not wanting to do this. Guess I will have to look for an alternate solution...

[lesliekirk]

Re: PR8 Swatch / Main Image swap

Ummm, I think you've crossed the streams here. The Attribute Image displayed as a Swatch is always displayed as s Swatch (in a thumbnail style).

Crossed streams - in the grand scheme things that probably what I want to do, but without having to jump through all the inventory hoops. I was thinking it was going to be easy to create the attribute swatches and have them change out with the drop down menu or vice versa, then be able to add a couple of teeny, tiny tags that would also swap out the main image to an full size image that correspondes to the swatch. I didn't want to also have a bunch of clickable thumbnails to switch out the main image. I didn't want to have to use the Inventory Variants because that totally defeats what I'm trying to do.

It would really be nice to do this with a bit more storemorph.

[Rick Wilson]

Re: PR8 Swatch / Main Image swap

I have an Inventory Variant Importer that you can try, that bypasses having to do those one by one.

[lesliekirk]

Re: PR8 Swatch / Main Image swap

That might solve one issue...but I really really really wanted to be able to make changes through one single Attribute Template. To me it sort of defeats the purpose of an Attribute Template. It all ties back into needing to be able to have a set of reusable attributes (and master inventory) that I brought up in another post. Things that sound so simple are becoming impossible to achieve.

[Rick Wilson]

Re: PR8 Swatch / Main Image swap

We should chat on the phone, I've been watching your struggles with this on the Forum, and I don't really have my head around them yet and for me working with this setup in PR8, I don't find it particularly cumbersome. Let me know your schedule (shoot me an email).

[lesliekirk]

Re: PR8 Swatch / Main Image swap

Will do - I think the issues are more around converting a MMUI store templates to PR8. I'm willing to bet this is a heck of lot easier with a fresh install of PR8 CSSUI.

[lesliekirk]

Re: PR8 Swatch / Main Image swap

FYI - I do have this working. Now if there were just a way to create a master inventory level or a way to be able to assign the Inventory Variants created by the product to other products.