# Development Tools

![Development Tools](/files/wTf8zdzGyjHc8rM7embq)

* **Product Badge Wrapper Selector**: The CSS selector code of the element containing the badge. Multiple selectors can be selected, each group separated by a comma (,). For example: <mark style="color:red;">`.product-item, .products .product-loop`</mark>
* **Excluded Selector**: The CSS selector code of the element you don't want the badge to be displayed in. Multiple selectors can be selected, each group separated by a comma (,). For example: <mark style="color:red;">`.product-item-excluded, .products .product-loop-excluded`</mark>
* **Resize Badge when width of badge larger than**: Display badge according to the aspect ratio of the image frame. When the badge is larger than the scale, the badge will automatically shrink to the set scale. Default value: <mark style="color:blue;">**20%.**</mark>
* **Equal Badge Height**: In some cases, multiple badges display with different heights. This option helps the badge to display more evenly.
* **Badge's Height Dimension**: Maximum height of badges. Note: This feature is only used when 'Equal Badge Height' is selected.
* **Turn OFF ajax mode**: By default, the system initiates automatic detection of newly added products (search, load more, collection filter, etc.) to display the badge. If your theme does not use AJAX functions, you can enable this feature. It will make the performance better.
* **Custom CSS**: Add custom CSS code to change some styles.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://guide-shine-trust.shinecommerce.co/badges-instruction/development-tools.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.