# Marquee

The **Marquee Section** allows you to display scrolling text across your store, making it ideal for **announcements, promotions, or highlighting key messages** in a dynamic way.

{% hint style="success" %}
1. **Go to** Shopify Admin > **Online Store > Themes**.
2. Click **Customize** on your active theme.
3. In the Theme Editor, click **Add Section > Marquee**.
{% endhint %}

<figure><img src="https://2586998482-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoR59WHukDFiu96fv0kDY%2Fuploads%2FXtyZvYL3qQ8YB2jL9jTP%2FScreenshot_26.jpg?alt=media&#x26;token=ee269306-31e6-4276-b86d-0a569b0e1225" alt=""><figcaption></figcaption></figure>

### **Settings & Customization**

<figure><img src="https://2586998482-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoR59WHukDFiu96fv0kDY%2Fuploads%2F4Vkk4MfWRV2IymiuQSI7%2Fmarquee-02.jpg?alt=media&#x26;token=a1fd8d05-3442-4e97-b3e9-fdeb5c3d55fd" alt=""><figcaption></figcaption></figure>

#### **Layout** <a href="#layout" id="layout"></a>

* **Expand to Full Width:** Enable this option to extend the section across the entire screen width.
* **Color scheme:** You can customize the section’s appearance by changing the **text color, background color**, and more using **preset color** options.
* **Background Opacity:** Adjust transparency (Range: 0–100 %, Default: 100%). This applies to the background image, customizable in theme settings.

#### **Content Settings**

* **Text Size** : Choose from **Small, Medium, or Large**.
* **Gap** : Define spacing between items (Default: 30px, auto-adjusts for mobile).

#### **Animation Settings**

* **Enable Animation** : Activate animation for a dynamic scrolling effect.
* **Reverse Animation** : Change the direction of the animation.
* **Pause on Hover** : Stop the animation when users hover over the text.
* **Animation Speed** : Adjust the scrolling speed (eg., 50).

#### **Splitter Image Settings**

* **Upload Image** : Add a separator image between repeating texts.
* **Width** : Adjust the image size (eg., 50).

#### Section padding <a href="#section-padding" id="section-padding"></a>

* **Top Padding :** Adjust spacing above the section.
* **Bottom Padding :** Adjust spacing below the section.

#### **Text Marquee Settings**

* **Text:** Enter the text to be displayed in the marquee.

#### **Customization**

* **Custom CSS:** Allows adding custom styles for further footer customization.

