# Text

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

Foxify makes it easy for you to add and customize text across your Shopify store, allowing you to create eye-catching headlines, informative paragraphs, or Calls-to-Action that drive conversions.&#x20;

## How to add Text&#x20;

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

1. In the FoxStudio editor, on the left sidebar, click **Add elements**, or press **E**.
2. Choose **Text.**
3. Drag the text onto your canvas.
4. Click **Edit text** and type your text.
   {% endhint %}

<figure><img src="/files/5pYCrWd1zPa5wwdKV7FH" alt=""><figcaption></figcaption></figure>

### Types of Text

Different types of text can be added:

* **Headings**: Headings are great for highlighting important sections or structuring content. Foxify offers options for different heading levels (H1, H2, H3, H4).

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

* **Paragraphs:** Use paragraphs to add detailed descriptions, product information, or other text content.

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

* **Display text**: Display text is a larger, more prominent type used for banners, promotions, or to grab attention. It’s often used as part of a hero section or call-to-action area.

<figure><img src="/files/ELEx9pFsYu1SFV5m59CJ" alt="" width="283"><figcaption></figcaption></figure>

* **Text with shadow**: Text with shadow adds depth and visual interest to your text, making it stand out on the page.

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

## How to edit Text

Organizing your text through proper formatting enhances communication and visual clarity. Additionally, you can apply different formatting for each breakpoint, ensuring an optimal display on every screen.

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

1. **Select** the relevant text element in the editor.
2. Use the tools bar above the selected text element to quickly optimize it.&#x20;

All the following formatting tools can be found in the **Inspector** panel.
{% endhint %}

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

Formatting options:

### HTML tag

Set the HTML code for headings and paraphraph on your site. The tags have a top-down hierarchy from H1 (Heading 1) to H6 (Heading 6), Paragraph (P), and Span.

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

<figure><img src="/files/2f1RlOSU3ncUNbRAUeCT" alt=""><figcaption></figcaption></figure>

### Text style

Select your **pre-defined typography** in the **Global styles** to apply to an existing text element.

See more: [Global styles](/foxify-app/page-management/global-styles.md)

### Text font, spacing, color, and styles

* **Font**: Choose from hundreds of fonts. You can also [upload your own fonts to Foxify](/foxify-app/faqs-and-troubleshooting/faqs/add-custom-font.md).
* **Color**: Change the text color.
* **Weight** and **Size**: Define the font weight and font size of the text.
* **Spacing:** Change the spacing between the lines and characters in the text box.&#x20;
* **Align**: Align your text to the left, center, or right, or justify it across the text box.
* **Text case**: Click the icons to set the text's capitalization: **As typed** ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/08/14/cf835ac2-622c-4066-a95e-39e9ff1a7f38/c4f1d248-c718-427e-9db5-77369c22fb67.png), **Upper case** **AG**, **Title case** **Ag**, or **Lower case** **ag**.
* More settings:&#x20;
  * **Text style**: Normal/ *Italic*.
  * Decoration: None/ Underline/ ~~Strikethrough.~~

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

### Effects

You can apply a shadow effect to your text using one of the available presets, or leave it at "None" if no shadow is desired.

* **Text shadow**: Click on one of the shadow icons to apply it instantly.
* **Opacity:**&#x20;
  * Use the slider to adjust the transparency of your text.
  * A value of 1 means full opacity (solid text), while lower values make the text more transparent, blending it into the background.

<figure><img src="/files/4zsCf7a5DZbL6HOUhIeG" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**More Formatting Option:**

* **Hyperlinks**: Add links to your text by selecting the text and clicking the link icon from the editing toolbar.
  {% endhint %}

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

<figure><img src="/files/8B9MGM5OprD6gbTsub18" alt=""><figcaption></figcaption></figure>


---

# 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://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/text.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.
