> 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="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/HzVapkDiFz2AzONBBork/banner.jpg" 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.

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/YWTU5v3GUnuvtz2DNtis/image.png" alt=""><figcaption></figcaption></figure>

## 2. General setting

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/xsqf6oXGw4vBCvSP5wbz/image.png" 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="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/CMbQhAlSq5kJxepVHQK6/image.png" alt=""><figcaption></figcaption></figure>

## 3. Content

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/F2fyhta4tcXCZLJS8rYN/image.png" 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="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/E9WyohMc1hd6VXdJhPrp/screencapture-admin-shopify.jpg" 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="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/9oRAOJM0Bwoh1pgsrgso/image.png" 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="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/hqsIQu4sI7QaY0AwtDeq/image.png" 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="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FP0HOqYXAy4hh3lbC2h64%2Fimage.png?alt=media&amp;token=34ddae0a-e9e6-4180-9321-bdad38a5807e" alt=""><figcaption></figcaption></figure> <figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FJIpQUh7ww3EavyfSBufo%2Fscreencapture-admin-shopify-store-dtian-umino-themes-138530488577-editor-2023-12-19-13_56_25.png?alt=media&amp;token=8de11d8a-4b15-4792-8e72-562b0901481a" 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="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FjYcM20dceNDbVusyWVpo%2FScreenshot%202023-12-19%20120220.png?alt=media&amp;token=471137ca-13eb-468e-b20a-8563a3699223" alt=""><figcaption></figcaption></figure> <figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2F72U7oFwfcp8dT2NaJxcs%2FScreenshot%202023-12-19%20140615.png?alt=media&amp;token=656cbb71-4fe3-4838-9160-6e24be350e41" 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="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2F1gDP7A8OkZNKR2qy4PFX%2Fscreencapture-admin-shopify-store-dtian-umino-themes-138530488577-editor-2023-12-19-13_56_25%20(1).png?alt=media&amp;token=87666b5f-98fc-4cc6-b5d7-69b465a79091" alt=""><figcaption></figcaption></figure>