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

{% embed url="<https://youtu.be/EZBXOxVaFVM>" %}

Present the offered services and other brief details about your store to customers.

![](/files/naCRLcGXjqeGOYwoGWvL)

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Featured promotion**
3. **Save**
   {% endhint %}

## Section settings

### General

You can choose your **Container type** for the collection list as:

* Default;
* Full width;
* Use container box.

Select the **Color scheme** for the section.

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

### Section header

Use the provided text fields to add a suitable **Heading**/**Subheading**/**Description**.&#x20;

* Leave any of the fields blank if you do not want to display them.&#x20;

You can also change the **Heading size** to Medium/Large and adjust the **Text alignment** (Left/Center).

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

### Grid settings

The Grid settings let you customize the layout of items in a grid format.

* **Columns per row**: Set the number of columns displayed per row (e.g., 4). This determines how many items appear side by side.
* **Column gap**: Adjust the space between columns in pixels (e.g., 30 px) for desktop or larger screens.
* **Column Gap on mobile**: Set a separate column gap for mobile devices (e.g., 10 px) to ensure the layout is optimized for smaller screens.

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

### Cards settings

The Card settings allow you to adjust the display and behavior of content cards on your website.

* **Card Layout**: Choose between a **Vertical** or **Horizontal** layout to control the orientation of content cards.
* **Image Width**: Set a specific width for images within cards (e.g., "60px"). Leave this field blank to use the image’s original width.
* **Content Alignment**: Align content within the card to the **Left**, **Center**, or **Right**.
* **Hover Effect**: Select an effect that activates when users hover over the card:
  * **None**: No hover effect.
  * **Scaling Down**: The card slightly reduces in size on hover.
  * **Scaling Up**: The card slightly enlarges on hover.
  * **Zoom In**: The image zooms in on hover for a closer view.

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

### Slider and Mobile settings

The Slider settings allow you to configure the display and controls for a content slider.

* **Enable slider**: Toggle this to activate the slider feature, which enables content to slide horizontally.
* **Show pagination**: Toggle to display pagination dots, indicating the number of slides and allowing users to navigate through them.
* **Show navigation**: Toggle to add navigation arrows to the slider for manual control over slide movement.

The Mobile settings adjust how the slider and grid are displayed on mobile devices.

* **Enable horizontal scroll**: Toggle to allow horizontal scrolling on mobile, which enables users to swipe through content.
* **Use grid 2 columns**: Toggle to display items in a 2-column grid layout on mobile devices, optimizing space for a more compact view.

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

## Block settings

The **Feature** blocks allow you to highlight specific features or offers on your site.

* **Color Scheme**: Choose a color scheme to match the feature with your site’s overall design.
* **Image**: Click Select Image to upload an image or graphic to represent the feature.
* **Image from URL**: Alternatively, enter an image URL (supports .svg, .png, or .jpg formats) if you prefer to use an online image.
* **Heading**: Enter a heading that briefly describes the feature (e.g., "Free Shipping").
* **Description**: Add a description with more details (e.g., "Free Shipping for orders over £130"). You can format this text using bold, italics, lists, and links as needed.
* **Image Link**: Paste a URL to make the image clickable, directing users to a relevant page or section when they click the image.

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

Enable/disable a call-to-action button when needed. Its style and size are adjustable using the dropdown.

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


---

# 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/featured-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.