Share Image

Removing / Updating Product Accolades

Posted on Categories Uncategorised

Every product accolade within Bunting has its own CSS class. These are listed as follows:

  • .bunting_accolade-most_popular
  • .bunting_accolade-best_seller
  • .bunting_accolade-lowest_price
  • .bunting_accolade-last_one
  • .bunting_accolade-last_chance
  • .bunting_accolade-best_offer

With these handles you can remove specific accolades easily with CSS by entering something like this:

.bunting_accolade-lowest_price,
.bunting_accolade-last_chance {
    display:none !important;
}

You can also change the text using jQuery. Each accolade class contains a <span> element, with the text held within – you need to target the contained span, not the content of the element itself. For example:

$('.bunting_accolade-lowest_price span').html('Low Prices!');

Bunting comes pre-loaded with its own isolated jQuery library, accessible via the $bjq variable. You can use this even if your website doesn’t natively support jQuery.

Multiple Language Support

If your site supports multiple languages then you can target elements based on the container language class. This is a 2-character language code that meets ISO standards, and can be found further up the document tree. It is located in the same class as the ‘.bunting_recommendations’ class. Here is an example of how to target English and French separately:

$('.bunting_recommendations.en .bunting_accolade-lowest_price span').html('Low Prices!');
$('.bunting_recommendations.fr .bunting_accolade-lowest_price span').html('Bas prix!');

Help Request

Can't find the answer to your question?

Contact Us