# Marquee

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

## There are 2 ways to add a Section to your store

### **1. Add a pre-made section from our demo?**

[Read the instructions here](/ella-7-documentation/sections-and-blocks/get-section-on-demo.md)

### **2. Add the** Marquee **section** manuall&#x79;**?**

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Add section** and choose **"Marque".**

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

## Section settings

| Settings         | Meaning                                                        |
| ---------------- | -------------------------------------------------------------- |
| Motion direction | Set the motion direction of the animation: forward or reverse. |
| Gap              | Adjust the spacing between elements.                           |
| Color scheme     | Choose the color scheme applied to this element or section.    |

### Center image

| Settings | Meaning                                     |
| -------- | ------------------------------------------- |
| Image    | Select an image to display in this section. |

### Animations

| Settings | Meaning                           |
| -------- | --------------------------------- |
| Type     | Choose the type of animation      |
| Speed    | Adjust the speed of the animation |

### Padding&#x20;

| Setting | Meaning                                          |
| ------- | ------------------------------------------------ |
| Top     | Adjust the spacing at the top of the section.    |
| Bottom  | Adjust the spacing at the bottom of the section. |

## Block settings

### \[BLOCK] Text

<table><thead><tr><th width="252">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Text</td><td>Enter text to showSpecial </td></tr><tr><td>Typing text</td><td>Toggle to enable or disable special text style.</td></tr><tr><td>Highlight</td><td>Toggle to enable or disable text highlight.</td></tr><tr><td>Spacing text</td><td>Toggle to enable or disable text spacing adjustment.</td></tr><tr><td>Stroke</td><td>Add or adjust the outline (stroke) of the text.</td></tr><tr><td>Width</td><td>Set the element width for <mark style="color:$primary;">Desktop</mark>: fit content, fill container, or use custom size.</td></tr><tr><td>Tablet width</td><td>Set the element width for <mark style="color:$primary;">Tablet</mark>: fit content, fill container, or use custom size.</td></tr><tr><td>Mobile width</td><td>Set the element width for <mark style="color:$primary;">Mobile</mark>: fit content, fill container, or use custom size.</td></tr><tr><td>Preset ( Typography)</td><td>Select a predefined typography style for text.</td></tr><tr><td>Font</td><td>Choose the font style for the text.</td></tr><tr><td></td><td>Choose the size for the text.</td></tr><tr><td>Line height</td><td>Choose the line height for the text.</td></tr><tr><td>Letter spacing</td><td>Adjust the spacing between individual letters.</td></tr><tr><td>Case</td><td>Set the text case</td></tr><tr><td>Wrap</td><td>Choose the text casing style</td></tr><tr><td>Color</td><td>Choose the color type to customize</td></tr><tr><td>Background</td><td>Toggle to enable or disable background for the title.</td></tr><tr><td>Enable border</td><td>Toggle to enable or disable the border.</td></tr><tr><td>Enable bottom border</td><td>Toggle to Enable bottom border</td></tr><tr><td>Effects</td><td>Choose an animation effect for the element.</td></tr><tr><td>Top</td><td>Adjust the spacing above the heading.</td></tr><tr><td>Bottom</td><td>Adjust the spacing below the heading.</td></tr><tr><td>Left</td><td>Adjust the spacing to the left of the heading.</td></tr><tr><td>Right</td><td>Adjust the spacing to the right of the heading.</td></tr></tbody></table>

### \[BLOCK] Icon

| Settings             | Meaning                                                                                                                                                                                                                                 |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Custom icon          | Choose a custom icon type for the element                                                                                                                                                                                               |
| SVG icon             | <p>Select or upload an SVG file to use as the icon.<br><em>Go to this link</em> <a href="https://fontawesome.com/v5/search"><em>find your icon</em></a><em>. Find the icon you want, then copy the SVG code and paste it here.</em></p> |
| Link                 | Set a URL or link for the element or icon.                                                                                                                                                                                              |
| Open link in new tab | Toggle to enable or disable opening the link in a new tab.                                                                                                                                                                              |

#### **Zero design skills? Create professional mockups, logos & videos for your store in seconds.** [<mark style="color:orange;">Create... in seconds</mark>](https://1.envato.market/c/3093631/3323999/4662)**​**

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

## Need More Help?

If you experience any difficulties or require extra support with your Ella theme, feel free to contact our support team through our [Ticket System](https://halosoft.ticksy.com/) — we’ll get back to you within 24 hours.

Simply scan the QR code below to join our Facebook community and stay updated with the latest news, tips, and announcements.

<div align="left"><figure><img src="/files/u3Ke6fbPZZvBlBetfneg" alt="Halothemes Community" width="233"><figcaption></figcaption></figure></div>

<a href="https://www.facebook.com/groups/halothemescommunity" class="button primary" data-icon="comment-dots">Join HaloThemes Community</a>


---

# 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://halosoft.gitbook.io/ella-7-documentation/sections-and-blocks/marquee.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.