Custom Product Badges

Written by the Divi Engine Documentation Team

Introduction

Follow these steps to set custom product badges.

Example

Click HERE to view the example below. 

Step 1: 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 a sales price. If you want to use the out of stock badge then change those products.

Step 2: Enable Badges

Head over to BodyCommerce and enable the appropriate badge.

Step 3: 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 badge's 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 badge's 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.

More Support?

Please email us at [email protected] if you are unable to get Divi BodyCommerce working.

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