How to install EM Product Labels?

1. USAGE

1.1. ADD A NEW LABEL

– Go to the label manager interface, click on menu EMThemes > Product Labels > Manage Product Labels

– Click on button Add new label:

  • Label Name: Name of label
  • Image: upload the icon image for this label.
  • Background: upload background image for this label. If you don’t use image for label, you can use this background with text as belows
  • Text: Content appear on the label, you can leave it blank if you use image icon instead of text. You can also insert a variable to display on this label, i.e.: product price, product special price or save percent…
  • CSS Class: This is a custom css class for your custom label css, if you have no custom style for this label, just leave it blank. You can use some built-in css class to display label icon with different color:
    • organe
    • yellow
    • blue
    • violet
    • red
    • black
    • new
    • special
    • bestseller
  • Enable: determine the label should be appeared in the frontend or not.
  • Conditions:this is a set of conditions, if conditions are matched, the label will appear in the frontend.

1.2. ADD YOUR OWN CUSTOM CSS FOR LABEL

  • On backend, menu Product Labels > CSS Editor.
  • Add your custom css in the Content box. In this example, we create a new label with class mycolor with label image is an icon in productlabel_icons.png..productlabels_icons .newcolor { background-position:0 -500px }
  • Then, edit a label rule, field CSS Class, enter value newcolor as belows:The built-in classes are created in skin/frontend/base/default/css/productlabels.css as belows:
    • .productlabels_icons .orange { background-position:0 0 }
    • .productlabels_icons .yellow { background-position:0 -60px }
    • .productlabels_icons .blue { background-position:0 -120px }
    • .productlabels_icons .violet { background-position:0 -180px }
    • .productlabels_icons .new { background-position:-200px 0 }
    • .productlabels_icons .special { background-position:-200px -60px }
    • .productlabels_icons .bestseller { background-position:-200px -120px }

2. CUSTOMIZE LABEL GRAPHICS

– You can edit the file skin/frontend/base/default/images/productlabel_icons.png

– We created some default icons. If you want to add more icons, just edit this file and add your custom icons, then add your own custom css to display the icons.

3. SHOW LABELS ON FRONTEND

All labels whose conditions matched and is enabled will be showed up.

3.1. SHOW LABELS ON PRODUCT LISTING PAGE

In order to show label on this page, you have to edit your template file app/design/frontend///template/catalog/product/list.phtml. Insert the code below in the place you want the label appear:

If you don’t find list.phtml, you should copy the file from app/design/frontend/base/default/template/catalog/product/list.phtml to app/design/frontend///catalog/product/listing.phtml accordingly.

display($_product);?>We would like to recommend to insert the product thumbnail code below:




display($_product);?>

3.2. SHOW LABELS ON PRODUCT DETAILS PAGE

In order to show label on this page, you have to edit your template file app/design/frontend///template/catalog/product/view.phtml. Insert the code below in the place you want the label appear:

If you don’t find list.phtml, you should copy the file from app/design/frontend/base/default/template/catalog/product/view.phtml to app/design/frontend///catalog/product/view.phtml accordingly.

display($_product);?>We would like recommend to insert below the product thumbnail code:


getChildHtml('media');?>
display($_product);?>