Custom Sale, Free & Free Badges

"We have added the ability to create custom badges to show a sale, free or new products.

Our SVG graphics will look great on the site and on mobile or 4K screens it will be pin-sharp.

Below is how you create these in BodyCommerce.

Custom Sale Badge

Replace the default WooCommerce sale badges into something that your customers can relate to and that will grab their attention instantly.

  1. First, go to BodyCommerce > Sale/New/Free Badge and enable the option "Enable Improved Sale Badge?".
  2. Choose one of our predefined SVG sale badges (below is a screenshot of the available ones as per the date of this document).

  3. Change the colours of the badge using our settings (primary, secondary and quarternary colours).
  4. Next, choose the position you want the badge in relation to the featured image (right or left-hand side).
  5. Once you have done this you can now fine tune the position by moving it away from the edge and top in relation to where it is. "Distance from Edge" and "Distance from Top".
  6. You can also change the size of the badge so if you want to fit some text on - make it bigger.

Now you have the badge you want, now it is time to change the text that appears inside of it.

  1. Add Percentage? - this setting will allow you to change the badge text from "SALE!" to be the percentage saving for example "40%". NOTE: if you want to only have text but use our custom badges, enable text and add it to the "before" or "after" blocks below.
  2. Absolute or Relative Text - Select absolute if you want to move the text independent of the badge. Select relative if you want the text to move when you move the badge so it is dependent on the position of the badge.
  3. Distance from Edge/Top - these settings will allow you to move the text around inside the badge.
  4. Text Before Percentage - Type the text you want before - for example, you could have "-" to show it is the percentage off. You can add a new line by adding "<br>" after the word, the next word after this will appear on a new line. So if you want the percentage to appear below this text, add "<br>" at the end of our word/s.
  5. Text After Percentage - Type the text you want after - for example, you could have "OFF" to show it is the percentage off. You can add a new line by adding "<br>" after the word, the next word after this will appear on a new line. So if you want the percentage to appear below this text, add "<br>" at the end of our word/s.
  6. After this, there are some settings to change the appearance of the badges such as colour and font size.

Custom New Badge

Add a badge to your product when it is new.

  1. First, go to BodyCommerce > Sale/New/Free Badge and enable the option "Enable Improved New Badge?".
  2. Choose one of our predefined SVG sale badges (below is a screenshot of the available ones as per the date of this document).

  3. Change the colours of the badge using our settings (primary, secondary and quarternary colours).
  4. Next, choose the position you want the badge in relation to the featured image (right or left-hand side).
  5. Once you have done this you can now fine tune the position by moving it away from the edge and top in relation to where it is. "Distance from Edge" and "Distance from Top".
  6. You can also change the size of the badge so if you want to fit some text on - make it bigger.

Now you have the badge you want, now it is time to change the text that appears inside of it.

  1. Text On Badge - Add the text you want to be shown - for example, it could be "New".
  2. After this, there are some settings to change the appearance of the badges such as colour and font size.

Custom Free Badge

Add a badge to your product when the price is set to 0.

  1. First, go to BodyCommerce > Sale/New/Free Badge and enable the option "Enable Improved Free Badge?".
  2. Choose one of our predefined SVG sale badges (below is a screenshot of the available ones as per the date of this document).

  3. Change the colours of the badge using our settings (primary, secondary and quarternary colours).
  4. Next, choose the position you want the badge in relation to the featured image (right or left-hand side).
  5. Once you have done this you can now fine tune the position by moving it away from the edge and top in relation to where it is. "Distance from Edge" and "Distance from Top".
  6. You can also change the size of the badge so if you want to fit some text on - make it bigger.

Now you have the badge you want, now it is time to change the text that appears inside of it.

  1. Text On Badge - Add the text you want  to be shown  - for  example , it could be "FREE".
  2. After this, there are some settings to change the appearance of the badges such as colour and font size.
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