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

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