# Scrolling promotion

<div data-full-width="true"><figure><img src="/files/1OZ2q7N6tFYitFzBKwTz" alt=""><figcaption><p><a href="https://foxecom.com/pages/affiliate?utm_source=minimog%2Bhelp%2Bcenter&#x26;utm_medium=banner&#x26;utm_campaign=foxaffiliatelaunch2024">Explore FoxEcom Affiliate Program now </a><span data-gb-custom-inline data-tag="emoji" data-code="2728">✨</span></p></figcaption></figure></div>

A scrolling promotion section lets you display an eye-catching auto-scroll row of texts or images without any extra custom code. You will find it is really helpful in showcasing your promotion, brand lists, featured products, or any information.&#x20;

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

In this article, we will show you how to add and customize a scrolling promotion section.

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

1. In the theme editor **(Customize)**, click **Add section.**
2. Select **Scrolling promotion.**
3. Make necessary changes.
4. **Save** the settings.
   {% endhint %}

<figure><img src="/files/SX65AqudlKxDPLIUfi25" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_minimog&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>

## Section settings

### General settings

With section settings, you can control the direction of the auto-scroll (Left/Right), its speed, and the gap between items. To create a mobile-friendly storefront, this section lets you adjust the item gap overall (on both desktop and mobile view) or respectively.&#x20;

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

The auto-scrolling speed can be set between 2s and 60s. The smaller the value, the faster the speed.

### Color settings

The color settings are for you to choose the section's background color and text color (For **announcement** blocks with text added.

Select the colors you like using the color palette or add a [color code](https://htmlcolorcodes.com/).

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

## Block settings

In a scrolling promotion section, there are 3 kinds of blocks:

* **Image** block: to add image and image link.
* **Announcement** block: to add text/icon and link.
* **Testimonial** block: to add text, product link, image, and icon.

### Image block settings

Select your image and adjust its height (between 0px and 200px).&#x20;

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

### Announcement block settings

This block lets you display text and/ or add an SVG icon to the scroll.&#x20;

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

To add an SVG icon, add this custom code and insert the image link (from your Shopify files).

```
<div>
<img src="image_link">
</div>
```

For example:

{% tabs %}
{% tab title="Annoucement block sample" %}

<figure><img src="/files/h2razhN7m1KeXJACiKPd" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Block settings" %}

<figure><img src="/files/Gctjf9ATKJZfsjegmFGI" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Link an image/text

Select a page from your Shopify or add an external link to your image/announcement block to direct visitors to your desired destination.

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

If you are linking your button to an external site, you need to include the full URL of that page, including the URL's HTTPS protocol.&#x20;

{% hint style="success" %}
:bulb:**Pro** t**ip:** Simply copy the link right from the address bar of your browser. :mouse:
{% endhint %}

### Testimonial block settings

This block lets you feature quotes from customers.

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

Use the provided text fields to add a suitable **Text**/**Author**'s name.&#x20;

* Leave any of them blank if you do not want to display them.

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

To show the product link on the Testimonial block&#x20;

\> click **Select product** to add the chosen products.&#x20;

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

Click **Select image** to choose the image for the author or product.

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

Click **Icon** to select the number of stars or quote icons for the block (None/Quote/1 star/2 stars/3 stars/ 4 stars/5 stars).&#x20;

* Select **None** if you do not want to display them.

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

For example:

{% tabs %}
{% tab title="Testimonial block sample" %}

<figure><img src="/files/1dhr7X6WO2l9yDSv2Nyv" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Block settings" %}

<figure><img src="/files/WUTYLSG0kJx4uMl6GS0q" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}


---

# 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/minimog-theme/theme-sections/scrolling-promotion.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.
