Simple, smart and Secure.

This article explains how you can customize your own Product badge.

Step 1 Disable minified files

• From jApps >> Preferences >> Advance Tab >> Performance
• Select "Use Minified Files" >> No

Note: To disable this option you will need a valid and active subscription. If you have an expired subscription, you cannot access the not minified files- you might need to use external services to do this for you.

Step 2 Clone the theme

• From the admin panel, navigate to [any Joobi eCommerce] >> Tools >> Themes
• Clone the Front-end Responsive theme
• Edit the cloned "theme" and locate badge.css under "Style (CSS) Tab

Step 3 Add your custom badge CSS

To be able to add your own your custom badge css you need a bit of CSS skills. Having said that, you can also hire a freelancer to do it for you, it should not take more than an hour to implement.

Another alternative is copy an existing badge from a template companies... Look for a badge that you like (CSS base only not image) and copy the CSS. You can browse for some nice looking ecommerce website design from themeforest.com (any ecommerce template will do).

Inspect the elements using firebug (firefox) and you should see the HTML and then copy the define CSS.

This is the ecommerce website where I copied the Badge Style;

• You can access the badge.css file through the administration, [any Joobi eCommerce] >> Tools >> Themes
• Edit your cloned theme and navigate to Style (CSS)tab
• If the file is too big (more than 1MB), you cannot edit it and you need to use file explorer (FTP)

root/joobi/user/theme/site/[the name of your cloned theme]/node/catalog/css/badge.css

Step 4 Create a Pick-list

• From the admin panel, navigate to jApps >> Design >> Pick-lists
• Locate "Badge Style" and click "Add / Edit"
• Enter the "name" and "value" for your badge. The value needs to be the CSS class that you used in Step 3 "squareStandard".

Step 5 Activate the new badge

• From the admin panel, navigate to [any Joobi eCommerce] >> Catalog >> Preferences
• From the preferences page, navigate to Badge Tab and select the new badge you created
• Click [Save] once you are done

The new badge looks like this in the storefront;