How to Add a Ribbon with a Value in Odoo 18 POS

The Point of Sale (POS) application plays a key role in the Odoo ERP ecosystem, enabling businesses to efficiently handle and track daily sales activities. In this article, we’ll walk through a customization that enhances the POS interface by adding a ribbon to product cards, displaying important details directly on the product card.

Our goal is to overlay custom text, such as "Hey Odoo" onto product images inside the POS. To implement this, we will extend the existing ProductCard class and add logic to dynamically display the ribbon and text on the product image.

In Odoo 18, the Point of Sale module does not include a built-in ribbon or badge feature for product cards, as shown in the reference image. Because this functionality isn’t available by default, we need to create a custom implementation.

To get started, create a new custom module and follow the steps outlined below. The initial step involves inheriting the ProductCard component so we can insert custom text inside the product box. The updated template will extend the default point_of_sale.ProductCard structure to support this enhancement.

<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">
   <t t-inherit="point_of_sale.ProductCard"
      t-inherit-mode="extension"
      owl="1">
       <xpath expr="//div[contains(@class, 'product-img')]" position="inside">
           <div class="pos-ribbon">
               Hey Odoo
           </div>
       </xpath>
   </t>
</templates>

Next, we create a template named ProductCard. While defining it, we enable the Owl framework by setting owl=”1”.  After creating the template, we must register it in the module manifest by adding the file to the POS assets section.

'assets':{
   'point_of_sale._assets_pos':[
       'module_name/static/src/xml/product_card.xml],
},

For styling the ribbon, you may use the css properties.

.pos-ribbon {
   position: absolute;
   top: 6px;
   left: 6px;
   background: #ff4444;
   color: white;
   font-size: 12px;
   padding: 3px 8px;
   border-radius: 4px;
   z-index: 20;
   font-weight: bold;
}

You have to add the css file to the manifest.

'assets':{
   'point_of_sale._assets_pos':[
       'module_name/static/src/css/product_card.css'],
},

Now, the pos session looks like this:

After implementing the steps above and adding the required code to your custom module, you’ll be able to introduce a ribbon feature into the Odoo 18 POS interface. This enhancement provides a convenient way to display extra product information directly on the product card, improving clarity and usability for POS users.

To read more about Overview of Food Delivery Connector in Odoo 18 Point of Sale, refer to our blog Overview of Food Delivery Connector in Odoo 18 Point of Sale.