> 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/promotion-banner.md).

# Promotion banner

<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>

<figure><img src="https://lh7-us.googleusercontent.com/TbHUtnjRlvef77l7na_ZAWWiwEc5vBMMgY2WEKRZuhh80z82J5pnDRfh3LJv5ORGTB00jI4eQGLe1HL3EqgAtuTU-MEkoq7OrDKVd0c28aBDw8GigIAuoegW8X3Z3w8IJMPz3-wntkgkytMGO4J8YAI" alt=""><figcaption></figcaption></figure>

Promotion banners are a useful tool for highlighting products or special promotions, attracting more users to these offers. They can also be used to direct users to landing pages, social media campaigns, or email marketing.

## How to add a Promotion Banner

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

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

## Section settings

### General

Adjust the **Container type** (Default/Full width/ Use container box) and **Color scheme** for this section.

<figure><img src="/files/7qxKupFKKrhpsCfjJ4We" alt=""><figcaption></figcaption></figure>

### Background settings

You can add background images for desktop and mobile versions separately. Leave either blank to use the color from **Color scheme**.

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

### Content

Insert the content you want in the **Heading** and **Text** of the banner to grab customers' attention or leave it blank to display if you do not want to display them.&#x20;

You can also change the **Heading size** to Medium/Large and set the **Text alignment** to Left/Center/Right to make the content look logical on your website.

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

### Banner URL

You can add a link to redirect customers to your desired page.

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

### Button settings

The call-to-action button will get the link from the provided **Banner URL**.

Give the button a **label,** a specific **Button style:**&#x20;

* Primary button
* Secondary button
* Underline button
* White button

and the **Button size:**

* Button small
* Button medium
* Button large

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

## Block settings

You can only add a maximum of **one** block for the section.

In the promotion block, insert the content of the promotion amount or any information in **Subheading** and **Heading.**&#x20;

Moreover, you can also change the **Text alignment** (Left/Center/Right) for the block.

<figure><img src="/files/5bAFAYashGWkqNn2xTsv" alt=""><figcaption></figcaption></figure>