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

badge-css-be

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;

inspect-css-badge

  • 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

badge-css-custom

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".

badge-style-be

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

badge-new-square-be

The new badge looks like this in the storefront;

new-product-badge-fe

Friendly Reminder

Joobi uses "evaluate before you buy" approach, we do NOT issue refunds after a subscription is purchased.
All basic plan (3 months) includes a back-link to Joobi.org

We invite you to:

Use the 30 days trial period before buying
Test-drive Joobi products using the demo website
For Mobile apps, check our iOS and Android demo

joobi-custom-service

Web Hosting Partner

Web Hosting     DreamHost