# Custom content

The **Custom content** section provides design flexibility and a customizable layout to display any type of content such as videos, featured collections, or even image cards, etc. This section makes room for customization beyond standardized templates in [Sleek theme](/sleek-theme/minimog-documentation.md), empowering you to create visually appealing and engaging pages tailored to your business needs and branding requirements. In this article, we will show you how to add a Custom content section.

Install XFlow Back In Stock Automation FREE

## How to add a Custom content section to your Shopify store {% hint style="success" %} Steps 1. In the theme editor (**Customize**), click **Add section** 2. Select **Custom content.** 3. Make necessary changes. 4. **Save** the settings. {% endhint %} ## How to edit a Custom content section ### Section settings #### General Adjust the **Container** (Full width/ Fixed width) and **Color scheme** for this section.

Especially, if there is a block with a longer height, you can **Enable sticky columns on desktop** to make the shorter height blocks sticky while scrolling.

#### Section header Use the provided text fields to add a suitable **Heading**. * Leave it blank if you do not want to display it You can also change the **Heading size** to: * Heading xs * Heading sm * Heading md * Heading lg * Heading xl * Heading 2xl * Display md * Display lg * Display xl to make the content look balanced on your website.

#### Highlight text [How to apply Highlight text to the section heading and block headings?](/sleek-theme/pages-global-sections/general-settings.md#highlight-text) Use the provided text fields to add a suitable **Subheading** and **Description**. * Leave them blank if you do not want to display them

#### Grid settings You can modify the **Column gap** and **Row gap** in your Custom content as Extra large/ Large/ Medium/ Small/ Extra small/ None / Same as the column gap (special value of the **Row gap** option).

#### Mobile Layout If you are not into the grid layout, you can use the carousel layout by selecting the **Enable swipe on mobile**.

**Section padding** You can modify the spacing above and below the section by adjusting the slider to change the values of the **Top padding** and **Bottom padding**.

#### Section divider This divider line provides a clear boundary between the current section and the above. To activate the divider line, enable the :white\_check\_mark: **Show divider** checkbox. You can choose a suitable **Divider width** for it (Fixed width/ Full width).

### Block settings There are 10 main blocks that can be added: * [**Image card**](#id-1-image-card) * [**Collections**](#id-2-collections) * [**Video**](#id-3-video) * [**Image**](#id-4-image) [**Text**](#id-5-text) * [**Collection card**](#id-6-collection-card) * [**Image with text**](#id-8-image-with-text) * [**Promotion card**](#id-7-promotion-card) * [**Lookbook card**](#id-9-lookbook-card) * [**Text card with image**](#id-10-text-card-with-image) Each of them will have the common settings and its own settings.

In **Block settings**, you can change the **Container width** of the block and its **Vertical alignment** to Top/ Middle/ Bottom.

In **Custom attributes**, adding classes to **Custom classes** input field allows you to define custom CSS styles for specific blocks.

#### 1) Image card Adjust the **Color scheme** for the image card block.

Click **Select image** to assign the image to the card media and use the slider to change the **Image overlay opacity**. Select the card's **Image ratio** as: * Adapt to image * Square (1:1) * Portrait (3:4) * Landscape (4:3)

Add some text for the banner’s **Heading.** Leave it blank if you do not want to display it. You can also change the **Heading size** to: * Heading xs * Heading sm * Heading md * Heading lg * Heading xl * Heading 2xl * Display md * Display lg * Display xl to make your image card block look more balanced.

In **Highlight text:** {% hint style="info" %} See: [How to apply Highlight text to the section heading and block headings?](/sleek-theme/pages-global-sections/general-settings.md#highlight-text) {% endhint %} Use the provided text fields to add a suitable **Subheading** and **Description**. * Leave them blank if you do not want to display them

Add a call-to-action button that directs customers to the target page specified in the **Card link** field. Add a **Label** then choose a **Button style** (Primary button/ Secondary button/ Underline button)**.**

Furthermore, you can also modify the look as well as the position of the content by changing these properties: * **Content position**: Top left/ Top center/ Top right/ Middle left/ Middle center/ Middle right/ Bottom left/ Bottom center/ Bottom right * **Content alignment**: Left/ Center/ Right * **Content spacing**: Small/ Medium/ Large

In **Mobile settings**: Adjust the **Color scheme** for the image card block on mobile.

Especially, if you want to display a different card image on the mobile device, you can insert another image to the **Image** field. You are able to display the content below or above the collapsible tabs by enabling/disabling the **Show content below image** checkbox. Moreover, the block also allows you to change **Content alignment** on mobile.

#### 2) Collections This Collections block allows you to add up to 3 collections to display in the **Collection list** field.

In **Grid settings**: Use the slider to adjust the **Maximum products to show** (between 2 and 12) and the **Number of columns on desktop** (between 2 and 4). You can also control the suitable spacing between the product cards by selecting **Column gap** and **Row gap** options.

In **Carousel settings:** You can enable the carousel effect in your featured collection by choosing :white\_check\_mark: **Enable carousel on desktop** checkbox. Carousel shows only when the number of products is larger than the number of columns.

In **Product cards**: Select the product card's **Image ratio** as: * Use global settings * Adapt to image * Square (1:1) * Portrait (3:4) * Landscape (4:3)

In **Mobile Layout**: You can adjust the **Number of columns on mobile** to **1 column** or **2 columns.** If you are not into the grid layout, you can use the carousel layout by selecting the **Enable swipe on mobile**.

#### 3) Video **Video**: Select a video that you've uploaded to Shopify Files (**Shopify-hosted video**) or insert an **embed video from URL** (YouTube or Vimeo video URL). * The **embed video from URL** will show when no **Shopify-hosted video** is selected.

**Cover image**: If you are using an embedded video from URL, a cover image is required. **Video ratio**: Set the ratio of the video. **Video alt text**: Describe the video for customers using screen readers. [Learn more](https://help.shopify.com/manual/online-store/themes/theme-structure/theme-features#video)

**Enable video autoplay**: Video are muted automatically to allow autoplay. **Enable video looping**: Video is looped automatically.

#### 4) Image Click **Select image** to select a suitable image to display in the section.

#### 5) Text Add some text for the banner’s **Heading.** Leave it blank if you do not want to display it. You can also change the **Heading size** to make your text block look more balanced.

In **Highlight text:** [How to apply Highlight text to the section heading and block headings?](/sleek-theme/pages-global-sections/general-settings.md#highlight-text) Use the provided text fields to add a suitable **Subheading** and **Description**. * Leave them blank if you do not want to display them You can also change the **Description size** to Small/ Base size/ Large to make the content look balanced on your website.

Add a call-to-action button that directs customers to the target page specified in the **Button link** field. Add a **Label** then choose a **Button style** (Primary button/ Secondary button/ Underline button)**.** Furthermore, you can also modify the look as well as the position of the content by changing **Content alignment** (Left/ Center/ Right)

#### 6) Collection card Enable the **Use section color scheme** checkbox if you want the block to synchronize the Color scheme with the section.

Moreover, you can change the card's **Style:** * Use global settings * Standard * Card

Choose the **Collection** you want to showcase on a collection card. You can select an **Image** for the collection card. Leave this field blank if you want to use the collection image.

Select the card's **Image ratio** as: * Adapt to image * Square (1:1) * Portrait (3:4) * Landscape (4:3)

You can also adjust the **Card width** to Full width or Narrow width.

#### 7) Promotion card Adjust the **Color scheme** for the promotion card block.

Click **Select image** to assign the image to the banner of the promotion card on the desktop and use the slider to change the **Image overlay opacity**. Select the card's **Image ratio** as: * Adapt to image * Square (1:1) * Portrait (3:4) * Landscape (4:3)

In **Content settings:** You can change the **Layout** of the promotion card to Space between/ Vertical split.

Add some text for the banner’s **Heading.** Leave it blank if you do not want to display it.

In **Highlight text:** [How to apply Highlight text to the section heading and block headings?](/sleek-theme/pages-global-sections/general-settings.md#highlight-text) You can change the **Heading size** to: * Heading xs * Heading sm * Heading md * Heading lg * Heading xl * Heading 2xl * Display md * Display lg * Display xl to make your block look more balanced. Use the provided text fields to add a suitable **Subheading** and **Description**. * Leave them blank if you do not want to display them

Furthermore, you can also modify the look as well as the position of the content by changing the value of **Content alignment to** Left/ Center/ Right.

In **Mobile settings**, if you want to display a different card image on the mobile device, you can insert another image into the **Image** field.

#### 8) Image with text Click Select image to select a suitable **Image** to display in the block.

In **Image badge**: Select the suitable **Color scheme** for the image badge and insert content for the badge into the **Text** field.

In **Content settings:** Add some text for the **Heading.** Leave it blank if you do not want to display it. You can change the **Heading size** to: * Heading xs * Heading sm * Heading md * Heading lg * Heading xl * Heading 2xl * Display md * Display lg * Display xl to make your block look more balanced.

Furthermore, you can also modify the look as well as the position of the content by changing the value of **Content alignment to** Left/ Center/ Right.

#### 9) Lookbook card You can add up to 5 **Products** to display on each block.

Select an outstanding **Image** for the media of the lookbook card to draw customers' attention.

Insert suitable content for the **Heading** of the product list pop-up in the lookbook card. * Leave it blank if you do not want to display it You can also change the **Heading size** to: * Heading xs * Heading sm * Heading md * Heading lg * Heading xl * Heading 2xl * Display md * Display lg * Display xl

In **Product cards:** Select the product card's **Image ratio** as: * Use global settings * Adapt to image * Square (1:1) * Portrait (3:4) * Landscape (4:3)

{% hint style="info" %} To adjust the **Use global settings** option value, navigate to the "Customize" menu of your theme and click on the "Theme settings" button. This will take you to a menu where you can adjust various global theme settings. {% endhint %} You can also enable the **Full column height** checkbox to ensure the block consistently extends to the full height of the column.

#### 10) Text card with image {% hint style="info" %} The **Text card with image** block is available on :sparkles: **Sleek version 1.4.0 and above** :sparkles:. See [Changelog](https://help.foxecom.com/changelog/sleek#version-1.4.0). {% endhint %} Click **Select image** to choose an image displaying above the text card and use the slider to change the **Image width** (20px - 100px). Select the card's **Image ratio** as: * Adapt to image * Square (1:1) * Portrait (3:4) * Landscape (4:3)

Add some text for the text card’s **Heading.** Leave it blank if you do not want to display it. You can also change the **Heading size** to make your text block look more balanced.

In **Highlight text:** See: [How to apply Highlight text to the section heading and block headings?](/sleek-theme/pages-global-sections/general-settings.md#highlight-text) Use the provided text fields to add a suitable **Subheading** and **Description**. Leave them blank if you do not want to display them. You can also change the **Description size** to Small/ Base size/ Large/ Inherit to make the content look balanced on your website.

You can also enable the **Full column height** checkbox to ensure the block consistently extends to the full height of the column (when the block's original height is smaller than the column's height).

Below is an example of how the setting works:

--- # 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/sleek-theme/theme-sections/custom-content.md?ask= ``` 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.