> 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.md).

# Basic

The **Basic** blocks carry the actual content of a section: the wording shoppers read, the pictures and video they look at, the icons that label things, and the buttons that send them somewhere. None of them is a section on its own. You add them inside a section you have already placed on a page, and the order you stack them in is the order shoppers read them.

Start here when you are building a section from scratch. The other block groups mostly arrange, decorate, collect, or link, while these are the pieces that hold the message.

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

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

1. Go to **Online Store > Themes > Customize**.
2. In the left sidebar, click the section you want to build.
3. Click **Add block**.
4. Choose a block from the **Basic** list, then fill in its settings.
   {% endhint %}

*Result:* the block appears inside the section in the preview, and you can drag it above or below the other blocks in that section.

### Blocks in this group <a href="#blocks-in-this-group" id="blocks-in-this-group"></a>

| Block                                                                  | What it puts on the page                                            | Reach for it when                                                                 |
| ---------------------------------------------------------------------- | ------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
| [Button](/velare/customize-your-pages/basic/button.md)                 | A clickable call to action in one of three styles                   | The section should send shoppers to a collection, product, or page                |
| [Heading](/velare/customize-your-pages/basic/heading.md)               | The title line that opens a section                                 | Shoppers need one sentence telling them what the section is about                 |
| [Highlight text](/velare/customize-your-pages/basic/highlight-text.md) | A short phrase on a colored pill, with an optional star or dot      | You want a promise or a promotion label to stand out from the rest of the wording |
| [Icon](/velare/customize-your-pages/basic/icon.md)                     | A theme icon or an uploaded image at a fixed pixel width            | You are labelling a benefit, a payment method, or a brand, not showing a photo    |
| [Image](/velare/customize-your-pages/basic/image.md)                   | A picture with its own desktop and mobile files, ratio, and corners | The visual is the point of the block, and it may need to be clickable             |
| [Text](/velare/customize-your-pages/basic/text.md)                     | A rich text paragraph with bold, italics, lists, and links          | The heading needs supporting wording underneath it                                |
| [Video](/velare/customize-your-pages/basic/video.md)                   | An embedded YouTube or Vimeo clip, or a video file you upload       | Motion explains the product better than a still picture                           |

### Suggested order <a href="#suggested-order" id="suggested-order"></a>

1. Add a [Heading](/velare/customize-your-pages/basic/heading.md) first, so the section has a subject before anything else goes in.
2. Add a [Text](/velare/customize-your-pages/basic/text.md) block under it for the supporting sentence, and a [Button](/velare/customize-your-pages/basic/button.md) at the end for the action.
3. Add [Image](/velare/customize-your-pages/basic/image.md), [Video](/velare/customize-your-pages/basic/video.md), or [Icon](/velare/customize-your-pages/basic/icon.md) once the wording is settled, so you can size the visual against text that is already final.
4. If the blocks need to sit side by side rather than stacked, wrap them in a [Group](/velare/customize-your-pages/layout/group.md).

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

* [Layout](/velare/customize-your-pages/layout.md): the blocks that arrange these ones into rows, sliders, and collapsible panels
* [Decorative](/velare/customize-your-pages/decorative.md), [Forms](/velare/customize-your-pages/forms-1.md), [Links](/velare/customize-your-pages/links.md), [Custom](/velare/customize-your-pages/custom.md): the other block groups
* [Colors](/velare/set-up-your-store/colors.md) and [Typography](/velare/set-up-your-store/typography.md): the schemes and text presets these blocks draw 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.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.