How Can I Make My Color Swatch Be a Size Swatch As Well?

How can I make my Color Swatch be a Size Swatch as well?

This is a question we are often asked by our customers. This or “Can my color swatch show different sizes?” Of course our Color Swatch can be a size swatch as well, and as you have already seen, we have a new tutorial for this on our website .

From now on we are going to give you answers to some questions you may have in the future, in a series of blog posts. Comment on them, ask new questions, or simply ask for further clarification and we are going to answer you asap.

 

Question 1) How to enable Product List Swatches after I have bought it?

Answer 1) If your Color Swatch package includes Product List Swatches, you’ll have the option to show color swatches on your category product list pages in both grid and view mode.

To enable product list swatches, please go to System >> Configuration, then click the SMD Color Swatch option from the left menu.

Once the page loads, open the Product List Settings box:

Set Enable Swatch on product list/grid page to Yes, and enter the number of swatches that you’d like to appear.

Once that’s done, save your configuration. Now all you need to do is to select which of the products you’d like to have this option for on product listings page.

Go to edit the product for which you wish to have product list swatches on the product list page, and on the Color Swatch tab you’ll see the option: Show attribute on Product list page. Set it to Yes.

 

Question 2) How to turn on the pop up box , and make it appear when my users hover over the swatches on the public side of the website?

Answer 2) To turn on the pop up box , and make it appear when your users hover over the swatches on the public side of the website, go to

System >> Configuration , then select SMD Color Swatch from the left menu, and open the “Pop Up Box” magento box.

Once pop up box is activated, you’ll need to set what you want to appear in the pop up box. You have two options to administer this setting:

1. Set the value of “Text to show in Popup Info Box” to : “Use Info Text from Config.”

 

– This option allows you to set the content of the info box right from the “Info Text” text area box that’s just under the current setting.

Enter any demo text in the Info text area, and see how it’ll appear on the public side of the website.

You also have three custom options available for usage in the content of the pop up box. They are:

– # { attribute }

– # { option }

– # { image }

Try them out, to see how they work.

2. Set the value of “Text to show in Popup Info Box” to : “Show swatch description”

– This option allows you to set the content of the pop up box from the Catalog >> SMDesign Color Swatch page.

The values you enter in the label field under each swatch will be the text values that will appear on the public side of the website in the pop up box.

You have the # { image } special attribute available with this setting.

To get the best out of the pop up box option that’s available in our plugin, you’ll have to do a bit of styling and code editing.

Here’s an example of what you can achieve with just a bit of css code and some templates change:

First of, to turn off the red border ( if it’s there at all ) please open the following file:

appdesignfrontenddefaultdefault emplatecolorswatchproductviewselection.phtml

and on line 126 of that file, you’ll see a code similar to this:

$(PopUpTextElement).setStyle({ border: '1px solid red', display: 'block'});

change it to:

$(PopUpTextElement).setStyle({ border: '0px solid red', display: 'block'});

on line 131 of that file, you’ll see a code similar to this:

$(PopUpTextElement).setStyle({ minWidth: (3*parseInt($(element).getWidth()))+'px' });

Change it to:

//$(PopUpTextElement).setStyle({ minWidth: (3*parseInt($(element).getWidth()))+'px' });

( yes, comment that line out )

Now, add some simple styling to your .css file:

All pop up boxes are div’s with a class of popup-div and have a span element in them.

.popup-div{

display:block;

float:left;

border: 2px solid #DDDDDD;

width:56px;

height:56px;

background-color:white;

text-align:center;

}

.popup-div span{

width:56px;

}

 

This is all for now, new posts are coming soon!

 

 

Leave a Reply

Your email address will not be published.