Custom Product Badges

Divi BodyCommerce allows you to add custom badges to your products. BodyCommerce allows you to add sale, new, free and out of stock badges. Follow these steps to learn how to go about creating a custom product

View Example.

Click HERE to view the example below. 

Edit Products.

Your first step is to edit your products. For example, if you want to use the sales badge then you will need to enter in a sales price. If you want to use the out of stock badge then change those products.

Enable Badges.

Head over to BodyCommerce and enable the appropriate badge.

Customize The Badge.

After enabling the badge of your choice a drop-down section will appear with the settings described below. Work through them and click save to view your new badge on the front end. Note that this section may require some tweaking.

Sale Badge.

Select Badge Design: Select a badge style from our list.

Upload Custom Badge: If you want to use your own badge then upload it here.

Primary Colour: Set the colour of your badge.

Secondary Colour: Set the secondary colour (if using two colours).

Quaternary Colour:  Set the third colour (if using three colours).

Position: Set the position of the badge. Note that you may need to play with this setting to get it right, clearing your browser and reloading the front end.

Distance from Edge: Set the badges distance from the top. Note that you may need to play with this setting to get it right, clearing your browser and reloading the front end.

Distance from Top: Set the badges distance from the top. Note that you may need to play with this setting to get it right, clearing your browser and reloading the front end.

Size: Set the size of the badge.

Sale Badge Text.

Add Percentage? Do you want to show the percentage or text in the badge?

Absolute or Relative Text: If you select absolute to make the text move with the badge and relative for not. Note that you may need to play with this setting to get it right, clearing your browser and reloading the front end.

Distance from Edge: Set the text distance from the edge. Note that you may need to play with this setting to get it right, clearing your browser and reloading the front end.

Distance from Top: Set the text distance from the top. Note that you may need to play with this setting to get it right, clearing your browser and reloading the front end.

Text Before Percentage or Text If Not Using Percentage: Set the text to display before the percentage number or the text to display if you are not using percentage.

Text After Percentage: Set the text to display after the percentage sign.

Text Colour: Set the text colour.

Font Size: Set the text font size.

Text Alignment: Set the text alignment.

Line Height: Set the line height for the text.

New Sale Badge.

If you decide to use the new sale badge then do not forget to set the display time. This time sets the number of days to show the badge.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us