> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/minimog-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxecom.gitbook.io/minimog-theme/theme-sections/scrolling-promotion.md).

# 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 %}
