# Custom content

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

For customers to have a better understanding of the store, you can utilize this **Custom content** section to achieve the requirements.

{% hint style="success" %}
Steps

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

## Section settings

### 1. Section header

Use the provided fields to add a suitable heading/subheading/description. Leave any of them blank if you do not want to display them. You can also adjust the text alignment here as Left/Center.

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

Select the container type and the color style for this section.

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

### 2. Column gap settings

Change space and the gap between each column in desktop and mobile view.

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

## Block settings

There are several blocks that can be added based on the requirements.

Some blocks are similar as they have appeared in theme sections such as countdown timer, product form (featured product), image cards, etc. Each of them will have its own settings.

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

### Image and Text blocks

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

{% tabs %}
{% tab title="Text block" %}
Use the provided text fields to add a suitable heading/subheading/description. Leave any of the fields blank if you do not want to display them. Control container width, text color/size, and alignment.

<div data-full-width="true"><figure><img src="/files/Derm6qSPYOZNZaDzHms2" alt=""><figcaption></figcaption></figure></div>

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

{% tab title="Image block" %}
In this block, you easily add images and change the width and the alignment of the container.

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

### Lookbook items and Product bundles blocks

![](/files/Rtyct2sK88iUBtLW66A3)

{% tabs %}
{% tab title="Product bundles" %}
Use the provided text fields to add a suitable heading/subheading. Leave any of the fields blank if you do not want to display them. Control container width and add the products that you want to include in the bundles.

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

{% tab title="Lookbook items" %}
For tagging products on the item image, you must add the chosen products. They can be easily adjusted by using the offset percentage.

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

### Product and Product form blocks

![](/files/xC6kBCspxJpfF6uznjLg)

{% tabs %}
{% tab title="Product" %}
Add a product that merchants want to display for the block. Adjust the container width and alignment.

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

{% tab title="Product form" %}
Add a product that merchants want to display for the block. Adjust the container width and alignment.

Enable/disable elements such as product price, vendor, cart button, etc.&#x20;

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

### Article and Newsletter form blocks

![](/files/AG8zZBMLO4MGMaBzdE89)

{% tabs %}
{% tab title="Article" %}
Add an article that you want to display for the block. Adjust container width, alignment.

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

{% tab title="Newsletter form" %}
Use the provided text fields to add a suitable heading/description as well as the email placeholder and button label. Leave any of them blank if you do not want to display them. Control form style and container width.

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

### Video and Social profiles blocks

![](/files/r8dCwVWzox0qRmjHBKfL)

{% tabs %}
{% tab title="Video block" %}
Add a Youtube video link and adjust its ratio. Video image cover can be left blank if yous want to use the video thumbnail.

Use the provided text field to add a suitable heading and change its color and size. Can leave it blank if merchants do not want to display it.

Modify the video button style, size, and video width. Additionally, the video can be played in loop and autoplay when customers visit the site.

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

{% tab title="Social profiles" %}
Use the provided text fields to add a suitable heading/description. Leave any of the fields blank if you do not want to display them. Control the container width.

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

### Image card and Countdown timer blocks

![](/files/9PZKcBptfmlvHua5Tfxg)

{% tabs %}
{% tab title="Image card" %}
Use the provided text fields to add a suitable heading/subheading/description. Leave any of the fields blanks if you do not want to display them.

Adjust the container width, content position, etc.

<div><figure><img src="/files/8wrQ6NypYhhoaWO6Lq15" alt=""><figcaption></figcaption></figure> <figure><img src="/files/NbvYYg7u0I6j6NMlTAS3" alt=""><figcaption></figcaption></figure></div>

Add a call-to-action button to direct customers to the product detail page. Add a **Label** then choose a **Button style** and adjust the **Button size.**

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

{% tab title="Countdown timer" %}
Adjust the container width, alignment, and end time of the timer.

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

Add a call-to-action button to direct customers to the product detail page. Add a **Label** then choose a **Button style** and adjust the **Button size.**

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

### Custom HTML block

You can check the example below on how to display the HTML correctly.

![](/files/HOdn0toB3llWUmLnlE9e)


---

# 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/megamog-theme/theme-sections/custom-content.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.
