# Marquee

![](https://docs-assets.foxecom.app/motrix-theme/4e00b903-d3d7-4818-a2cf-94d21c8d172e.png)

Create a scrolling content bar to highlight announcements, promotions, product messages, or other short content. Add text, icons, images, buttons, or other theme blocks to create a continuous visual message across the page.

## General settings

### Content

<Table widths="30%">
  | Setting             | Description                                                                                                                  | Options                                                                                              |
  | ------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
  | **Direction**       | Choose the direction in which the marquee content moves.                                                                     | **Forward**: content move from right to left<br /><br />**Reverse**: content move from left to right |
  | **Speed**           | Control how quickly the marquee content scrolls.                                                                             | 0.1x - 3x                                                                                            |
  | **Rotate**          | Rotate the marquee content.                                                                                                  | -5deg to 5deg                                                                                        |
  | **Pause on hover**  | Pause the marquee animation when customers hover over it.                                                                    | On / Off                                                                                             |
  | **Show edge fade**  | Add a fade effect at the edges of the marquee to create a smoother transition as content enters and leaves the visible area. | On / Off                                                                                             |
  | **Enable parallax** | Add a parallax effect to the marquee content as customers scroll the page.                                                   | On / Off                                                                                             |
</Table>

<Tabs>
  <Tab title="Direction - Forward">
    <Video src="https://docs-assets.foxecom.app/motrix-theme/d68964c6-26d6-499e-b44f-e6eac837f163.mp4" autoPlay="true" loop="true" muted="true" />
  </Tab>

  <Tab title="Direction - Reverse">
    <Video src="https://docs-assets.foxecom.app/motrix-theme/a8445c2b-4606-4eef-ae1d-66a807b265d8.mp4" autoPlay="true" loop="true" muted="true" />
  </Tab>
</Tabs>

<Figure>
  <img src="https://docs-assets.foxecom.app/motrix-theme/48b865a6-2e80-4b8d-85d0-01736a49738e.png" />

  <Figcaption>
    Rotate marquee
  </Figcaption>
</Figure>

<Tabs>
  <Tab title="Show edge fade - On">
    ![](https://docs-assets.foxecom.app/motrix-theme/00aefd61-d91b-4d0b-a839-c1030332a334.png)
  </Tab>

  <Tab title="Show edge fade - Off">
    ![](https://docs-assets.foxecom.app/motrix-theme/6ec419ab-196c-45cf-a6d2-c1083298ed04.png)
  </Tab>
</Tabs>

<Hint type="success" title="Tip">
  Use a moderate **Speed** for longer messages so customers have enough time to read the content.&#x20;

  Turn on **Pause on hover** when the marquee contains important information or links.
</Hint>

### Layout

<Table widths="30%">
  | Setting        | Description                                          | Options     |
  | -------------- | ---------------------------------------------------- | ----------- |
  | **Column gap** | Set the space between content blocks in the marquee. | 0px - 100px |
</Table>

### Mobile layout

<Table widths="30%">
  | Setting        | Description                                             | Options     |
  | -------------- | ------------------------------------------------------- | ----------- |
  | **Column gap** | Set the space between content blocks on mobile devices. | 0px - 100px |
</Table>

### Appearance

<Table widths="30%">
  | Setting           | Description                                                                                        | Options               |
  | ----------------- | -------------------------------------------------------------------------------------------------- | --------------------- |
  | **Color scheme**  | Choose the [color scheme](https://docs.foxecom.com/motrix-theme/theme-settings/colors) used for the Marquee block. | Select a color scheme |
  | **Corner radius** | Set how rounded the Marquee block corners appear.                                                  | 0px - 32px            |
</Table>

### Padding

<Table widths="30%">
  | Setting     | Description                                             | Options          |
  | ----------- | ------------------------------------------------------- | ---------------- |
  | **Devices** | Choose the device where you want to adjust the padding. | Desktop / Mobile |
  | **Top**     | Set the space above the Marquee block content.          | 0px - 100px      |
  | **Bottom**  | Set the space below the Marquee block content.          | 0px - 100px      |
</Table>

## Additional marquee blocks

<img height="369" width="397" src="https://docs-assets.foxecom.app/motrix-theme/08cb15db-651a-49be-a98f-9c5acc484069.png" />

Add blocks to build the content displayed in the marquee. You can combine different blocks to create announcements, promotional messages, or visual content.

* [**Text** ](https://docs.foxecom.com/motrix-theme/theme-blocks/text)— Display a short message, announcement, or promotional copy.
* [**Button** ](https://docs.foxecom.com/motrix-theme/theme-blocks/button)— Add a button that directs customers to another page.
* [**Icon** ](https://docs.foxecom.com/motrix-theme/theme-blocks/icon)— Add a visual icon to highlight or support the marquee content.
* **Icon with text** — Combine an icon with a short text label.
* [**Image** ](https://docs.foxecom.com/motrix-theme/theme-blocks/image)— Add an image to make the marquee more visual.
* **Lookbook card** — Add a lookbook card to showcase products through visual content.
* **Separator** — Add a visual separator (**Dot** or **Line**) between marquee items.

<Hint type="success" title="Tip">
  Keep marquee content short and easy to scan. Combine a **Text** block with an **Icon** or **Separator** for simple announcements, or add a **Button** when you want customers to take action.
</Hint>