> For the complete documentation index, see [llms.txt](https://blueskytechcos-organization.gitbook.io/umino-shopify/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://blueskytechcos-organization.gitbook.io/umino-shopify/theme-sections/banner-image.md).

# Banner image

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

Here is an amazing section that will help you design the Banners creatively and professionally. It has never been easier to create a banner.

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

{% hint style="success" %}
Steps

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

## Section settings

### **1.** Section header

Use the provided text fields to add a suitable heading/subheading/description. Leave any of them blank if you do not want to display them.&#x20;

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

## 2. General setting

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

**Layout:** You can choose between Container, Wrapped container, Full width for the banner layout.**'**

**Color schema:** You are allowed to change text color, background color with preset color.

**Column gap:** Space between two banner items

**Mobile setting:** Show horizontal scrollbar on mobile screen

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

## 3. Content

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

**Content style:** set the header to be on top or below the item image

**Design:** 2 preset designs were given for you to choose

**Content align:** You can align content to Left, Center or Right.

**Image style:** Style the border of the images to be squared or rounded.

**Image hover effect:** This option allows you to set an effect when hovering for image with many selections (Warning: Hovering effect will resize your images).

### 4. Typography

Utilize the provided setting options to change the position and font of the heading and subheading.

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

### 5. Overlay image

After choosing Content style as Overlay image, this Position options will be able to setup.

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

### 6. Section padding

Section padding allows you to specify the space between the slideshow and the preceding or following sections, or both.

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

## Banner items

### 1. General

You can customize the media type for each banner image separately and adjust its characteristics based on your preferences.

<div><figure><img src="/files/Z4FdRYUYIfpikQdUkxSX" alt=""><figcaption></figcaption></figure> <figure><img src="/files/BCs37IsgkVsLblGfEcw0" alt=""><figcaption></figcaption></figure></div>

**Add focal point:** This feature helps you select the most important part of an image for your store. It ensures that the focal points of the image always remain visible, even if a section crops the image to fit the layout.

<div><figure><img src="/files/IVnL2Q7TKiz1jj4I5yvl" alt=""><figcaption></figcaption></figure> <figure><img src="/files/rSQkdQqaiXuE58dGzvlN" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
Please follow this [link](https://help.shopify.com/en/manual/online-store/images/theme-images) for more information.
{% endhint %}

### 2. Content

You can personalize the content within the banner image block to your liking.

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