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

# Banner Image

The Banner Image section highlights collections or promotions in a clean, customizable grid layout. Adjust images, layout, and text styles to match your store’s design.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FKo8Dlikqp3IFTBkP4TsB%2Fimage.png?alt=media&amp;token=cb5a7c22-c8c0-401f-aef7-f9d52897e5c2" alt=""><figcaption></figcaption></figure>

To customize the Banner Image in our theme please follow the steps:

{% hint style="success" %}
Steps

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

## Section Settings

### **Section Header**

* **Show “Section header”:** Enable to show a heading and description at the top of the section.
* **Heading:** Add the main title for the section (e.g., *Trending Shops*).
* **Description:** Enter a short intro or tagline.
* **Text alignment:** Choose how the header text aligns — *Left*, *Center*, or *Right*.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2F3E4ZGRhqezVIfdWbGd7W%2Fimage.png?alt=media&amp;token=2b84f50d-e3ab-41b3-9f61-e4b7192ebba1" alt=""><figcaption></figcaption></figure>

***

### **General**

* **Layout:** Choose how the section displays (e.g., *Container full* or *Boxed*).
* **Color scheme:** Select a color scheme matching your store style.
* **Number of columns on desktop:** Set how many banners display per row.
* **Style banner item:** Choose between *Standard* or *Card* styles.
* **Image ratio:** Select the aspect ratio for banner images (e.g., *3:4*, *1:1*, *16:9*).
* **Custom ratio:** Define your own ratio (e.g., *21:9*).
* **Border radius image:** Enable to round banner image corners.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FSmNYeHLL1GKJziCOhVRb%2Fimage.png?alt=media&amp;token=bd0278c9-fade-4141-95a5-6d8812fe4e23" alt=""><figcaption></figcaption></figure>

***

#### **Design & Effects**

* **Hover effect:** Choose an animation when hovering over banners (e.g., *Zoom* or *Fade*).
* **Design:** Select *Text overlay image* or another display style.
* **Content position:** Set the text position — *Top*, *Center*, or *Bottom*.
* **Show gradient overlay:** Enable to add a gradient background behind text (only works when content position is *Bottom*).
* **Gradient opacity:** Adjust the darkness of the overlay (0–100%).
* **Height mobile:** Choose *Default* or *Custom height* for mobile view.
* **Height image mobile:** Define mobile banner height (in pixels).
* **Content align:** Choose text alignment inside banners — *Left*, *Center*, or *Right*.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2Ft565Sz5uepV0pprUvGOB%2Fimage.png?alt=media&amp;token=6f1c316e-efbc-4ea0-817b-2411def156ce" alt=""><figcaption></figcaption></figure>

***

### **Typography**

* **Sub heading:**
  * *Font size* and *Font weight* — Adjust subheading size and thickness.
* **Heading:**
  * *Font size* and *Font weight* — Customize main title appearance.
* **Description:**
  * *Font size* and *Font weight* — Adjust description text styling.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FITuLleU4nBlpSnDqCc32%2Fimage.png?alt=media&amp;token=f1ce2dd1-f5fc-444a-912b-2f365ef6330d" alt=""><figcaption></figcaption></figure>

***

### **Tablets and Mobile Layout**

* **Columns on tablet:** Choose how many banners display per row on tablets.
* **Columns on mobile:** Set the number of banners per row on mobile (1 or 2).

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2F84gBI8K2u2mS3fkTuecp%2Fimage.png?alt=media&amp;token=c7738fc2-2ed0-4a6d-880f-d2ae1e5e46e4" alt=""><figcaption></figcaption></figure>

***

### **Section Padding**

* **Padding top:** Adjust the top spacing (px).
* **Padding bottom:** Adjust the bottom spacing (px).
* **Remove default space between sections:** Enable to remove spacing between sections.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FIHMtDvXmmSxHI0ubtJrI%2Fimage.png?alt=media&amp;token=309a3adf-8f40-432e-985c-c5cb4f28a78d" alt=""><figcaption></figcaption></figure>

## Block Settings

Each **Banner Item** represents a single banner within the section. You can set individual images, texts, and links to highlight specific promotions or collections.

### **Banner Image**

* **Banner image:** Upload the main banner image. Recommended size: *915 × 500px*.
* **Banner image on mobile:** Upload a mobile-optimized image. Leave blank to use the desktop image (recommended *430 × 245px*).
* **Color scheme:** Choose a color scheme for this banner.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FoVzunVKNllfAy7HFKEGK%2Fimage.png?alt=media&amp;token=1deaa686-8c44-4ff1-9a66-9c2189af1204" alt=""><figcaption></figcaption></figure>

***

### **Text Content**

* **Subtext:** Add a short label or promotional line (e.g., *Up to 30% Off*).
* **Heading:** Enter the main title for the banner (e.g., *Dress Collection*).
* **Content:** Add optional supporting text or a short description.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2Fz8XQZO6q4yHu19mqGe7j%2Fimage.png?alt=media&amp;token=f25df8a1-b45c-4c12-adf7-662eae0afc2e" alt=""><figcaption></figcaption></figure>

***

### **Button Settings**

* **Link:** Select the page or collection the banner will link to.
* **Button label:** Set the button text (e.g., *Shop Now*).
* **Button open link in:** Choose whether the link opens in the *Current tab* or *New tab*.
* **Type button:** Select the button style — *Primary* or *Secondary*.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FdIGvlhqJI1H9wcSykZRm%2Fimage.png?alt=media&amp;token=24f2f90f-78b3-497b-94ac-6a339aa295d1" alt=""><figcaption></figcaption></figure>

***

#### **Tips**

* Use clear, high-quality images to maintain a professional look.
* Keep headings short and impactful.
* Ensure all banners in the section have consistent sizes for better alignment.