# Badges

Badge settings allow you to provide promotional, new product, free gift, and pre-order notifications for different scenarios on the product page. Using badges with different colors and styles can attract customer attention, enhance product visibility, and effectively boost sales.

### Badge Types

1. **Promotion Badge**\
   Used to display promotional information. You can choose from a standard style, or styles that show the amount or percentage of the discount.

   * **Background Color**: Customize the background color of the promotion badge.
   * **Text Color**: Customize the text color of the promotion badge.

   <figure><img src="https://3086053958-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUtxdyhQYbUmYMEm4SSNh%2Fuploads%2FzEr0mpfTUwmB6nsH3e6w%2FSale%20badge.png?alt=media&#x26;token=1776572c-d595-4011-80fa-02e0d2c9c530" alt=""><figcaption><p>sale badge</p></figcaption></figure>
2. **Free Gift Badge**\
   Used to indicate information about free gifts. When enabled, this badge alerts customers that the product comes with a free gift.

   * **Background Color**: Customize the background color of the free gift badge.
   * **Text Color**: Customize the text color of the free gift badge.

   <figure><img src="https://3086053958-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUtxdyhQYbUmYMEm4SSNh%2Fuploads%2FlJAnzz9eGfY0ZKNh1hRh%2Fgift-badge.png?alt=media&#x26;token=2d9a5b94-959f-42ed-bb3c-a2cc59818bfd" alt=""><figcaption><p>free gift badge</p></figcaption></figure>
3. **New Product Badge**\
   Used to identify newly released products.

   * **Background color:** Supports customizing the background color of the new arrival badge.
   * **Text color:** Supports customizing the text color of the new arrival badge.
   * **Criteria for determining new products:** There are two options: based on the **publish days** or based on **tag**.
   * **Setting the new product badge:** It is effective when the criteria are based on **tag**.
   * **Setting the number of days since release:** Available options are 7 days, 14 days, or 30 days, effective when the criteria are based on **publish days**.

   <figure><img src="https://3086053958-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUtxdyhQYbUmYMEm4SSNh%2Fuploads%2FRJHmiTdyTKQkYKzGttV1%2Fnew-badge.png?alt=media&#x26;token=a622f0f4-6691-4e43-bee3-ce9c00c06ba0" alt=""><figcaption><p>new badge</p></figcaption></figure>
4. **Pre-Order Badge**\
   Used to display information about pre-order products. When enabled, the badge will appear and a pre-order button will also be displayed on the product page if the product meets pre-order conditions.

   * **Background Color**: Customize the background color of the pre-order badge.
   * **Text Color**: Customize the text color of the pre-order badge.

   <figure><img src="https://3086053958-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUtxdyhQYbUmYMEm4SSNh%2Fuploads%2F6Z6WKJnjSnIYRW7GkXYC%2Fpre-order%20badge.png?alt=media&#x26;token=8127b144-18c0-4714-905d-cfd12add362c" alt=""><figcaption><p>pre-order badge and button</p></figcaption></figure>
5. #### Limited Edition Badge

   Used to highlight and display limited edition products.

   Set the limited edition product tag.

   <figure><img src="https://3086053958-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUtxdyhQYbUmYMEm4SSNh%2Fuploads%2FnhY5NRgzl7B5AHT3HaRA%2Flimited-edition-badge.png?alt=media&#x26;token=a397d9e0-e5fd-4bca-b3e7-249f5a8b3a67" alt=""><figcaption><p>limited edition badge</p></figcaption></figure>
6. **Custom Badges**

Custom badges can be added to products by assigning tags. You can set the background color and text color for the custom badge. The format should be \_badge\_name, for example, \_Best Shoes.

<figure><img src="https://3086053958-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUtxdyhQYbUmYMEm4SSNh%2Fuploads%2FbjnoAh0iy1YvVmAt3lUm%2Fimage.png?alt=media&#x26;token=705a19e4-5c1e-48ba-9811-89f1087c2b83" alt=""><figcaption></figcaption></figure>

### Notes

* **Pre-Order Badge**: The badge and pre-order button will only appear if the product meets the pre-order conditions.
* **Color Customization**: Ensure good contrast between background and text colors for badge readability.