> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/basic/highlight-text.md).

# Highlight text

The **Highlight text** block puts a short phrase on a colored background so it reads as a label rather than as body copy. It is added inside a section, most often just above a heading, and carries things like "New arrival", "Limited stock", or a free shipping promise. Keep it to a few words: the block earns its attention from the color and the small icon, not from length.

<figure><img src="/files/wr0Qiu693OPGpn5ty7zf" alt=""><figcaption></figcaption></figure>

### How to add it <a href="#how-to-add-it" id="how-to-add-it"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. In the left sidebar, click the section you want to add the label to.
3. Click **Add block** and choose **Highlight text**.
4. Type the phrase, then set the background and text colors so the two contrast.
   {% endhint %}

*Result:* the phrase appears in the section on its colored background, at the size and case you selected.

### General <a href="#general" id="general"></a>

| Setting              | Description                                                                                                                                                                                                  |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Highlight text**   | The short phrase you want shoppers to notice, such as a promotion label or a delivery promise.                                                                                                               |
| **Size**             | How large the phrase appears, from XS Small, X Small, Small, Base (Default), to Large. Use Large when the phrase is the main message on screen, and the smaller steps when it sits above a heading as a tag. |
| **Icon**             | <p>Puts a small mark beside the phrase so it reads as a badge</p><ul><li>Unset (None)</li><li>Star</li><li>Dot (Default is Star).</li></ul>                                                                  |
| **Background color** | The color of the pill behind the phrase, opacity included. Lower the opacity when the label sits over a photo and a solid block would hide too much of it. The default is a deep red or maroon.              |
| **Text color**       | The color of the phrase itself, opacity included. Keep it far enough from the background color that the words stay legible on a phone. The default is white.                                                 |
| **Uppercase**        | Prints the phrase in capital letters, which makes a short label read as a tag rather than as a sentence.                                                                                                     |

### Spacing <a href="#spacing" id="spacing"></a>

These settings control the external spacing (padding) applied directly above and below this specific block.

| Setting    | Description                                                                                                                   |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
| **Top**    | Adds space above the label so it does not touch whatever sits over it. Accepts 0px to 100px.                                  |
| **Bottom** | Sets the gap between the label and the heading below it. A small gap keeps the two reading as one unit. Accepts 0px to 100px. |

### What changes on the storefront <a href="#what-changes" id="what-changes"></a>

* Shoppers see a colored label in the section, which draws the eye before the heading does.
* The color pair you choose decides how loud that label is, so a low contrast pair calms it down without removing it.
* Because the colors are set on the block, this label keeps its own look even if the section around it uses a different color scheme.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Heading](/velare/customize-your-pages/basic/heading.md): the title this label usually sits above
* [Text](/velare/customize-your-pages/basic/text.md): the supporting wording underneath
* [Colors](/velare/set-up-your-store/colors.md): the store palette to pick these two colors from


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/customize-your-pages/basic/highlight-text.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.