> 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-with-text.md).
# Banner with text
The Banner with Text Section lets you combine images and text to showcase promotions or collections, with options to display text over the image or beside it.
To customize the Banner with text in our theme please follow the steps:
{% hint style="success" %}
Steps
1. In the theme editor (**Customize**), click **Add section**
2. Locate **Banner with text**
3. **Save**
{% endhint %}
## **Section Settings**
### **General**
* **Layout** – Choose the section layout (e.g., *Default*).
* **Color scheme** – Select a color palette that fits your site design.
* **Background container** – Enable if you want the background inside a boxed container.
* **Design banner** – Choose between two layout styles:
* **Text overlay image** – Displays text directly on top of the banner image.
* **Column banner** – Splits the layout into two columns (image + text).
* **Banner image** – Upload the banner image.
* **Text alignment** – Align the text to *Left*, *Center*, or *Right*.
* **Row gap content** – Adjust vertical spacing between text elements.
***
### **Config Type “Text Overlay Image”**
* **Layout content** – Choose how the text content is arranged.
* **Position content** – Define where the text appears over the image (*Left*, *Center*, or *Right*).
* **Content below image on mobile** – Toggle to move text below the image on smaller screens.
***
### **Config Type “Column Banner”**
* **Image position** – Choose whether the image appears on the *Left* or *Right* side.
* **Content position** – Control vertical alignment of text (*Top*, *Center*, or *Bottom*).
* **Width image** – Set the image width (e.g., *50%*).
* **Section height (desktop/tablet/mobile)** – Define height values for different devices.
* **Height mobile auto** – Enable to let the mobile height adjust automatically.
***
### **Section Padding**
* **Padding top / bottom** – Adjust vertical spacing above and below the section.
* **Remove default space between sections** – Enable to remove spacing between adjacent sections.
* **Margin top** – Add extra space above the section.
## Block Settings
### **Heading Block**
The **Heading Block** allows you to add a title to the banner section. You can customize the heading text and font size for desktop, tablet, and mobile devices.
* **Heading** – Enter the main title text.
* **Font size heading** – Set the font size for desktop view.
* **Font size heading tablet** – Adjust the heading size for tablets.
* **Font size heading mobile** – Define a smaller heading size for mobile screens.
Use this block to create clear, impactful section titles that match your banner design.
***
### **Subheading Block**
The **Subheading Block** is used to add a short supporting line above or below the main heading.
* **Subheading** – Enter the subheading text.
* **Heading tags** – Choose the HTML tag level (H2–H6) for SEO and style purposes.
Use it to highlight key messages or introduce the section’s main heading.
***
### **Short Description Block**
The **Short Description Block** lets you add a brief text section to highlight key information or features.
* **Title** – Add a short heading for context.
* **Description** – Write a concise supporting message or explanation.
Perfect for emphasizing a section’s purpose or summarizing key details in a clear, minimal way.
***
### **Text Block**
The **Text Block** allows you to add customizable content using rich text formatting.
* **Text** – Enter any message or description. You can use **bold**, *italic*, links, or lists to style your content.
Ideal for sharing additional details, highlighting offers, or giving context alongside images and banners.
***
### **Link Text Block**
The **Link Text Block** is used to add a clickable text link for navigation or calls to action.
* **Link label** – Enter the display text for your link.
* **Link text** – Add the URL or select a page to link to.
* **Show line** – Toggle to display an underline for emphasis.
* **Font size label** – Adjust the text size of your link.
Perfect for directing users to collections, blogs, or product pages in a clean and minimal way.
***
### **Button Block**
The **Button Block** lets you add a call-to-action button to guide users toward key pages or actions.
* **Button Text** – Enter the label that appears on the button.
* **Link** – Add or select the URL the button should navigate to.
* **Button type** – Choose between **Primary** (highlighted) or **Secondary** (subtle) style.
Ideal for directing users to collections, products, or promotional pages.
***
### **Countdown Block**
The **Countdown Block** adds a dynamic timer to create urgency for sales, launches, or special offers.
* **End time** – Set the target date (format: `yyyy-mm-dd`).
* **Color** – Choose a text color or keep it transparent.
* **Font size / Font size number** – Adjust text and number sizes.
* **Font weight** – Control text thickness.
* **Text transform** – Choose capitalization style (e.g., uppercase).
* **Spacing** – Customize top and bottom margins.
Perfect for highlighting limited-time promotions or upcoming events.
***
### **Product List Block**
The **Product List Block** displays selected products in a compact layout to highlight key items or promotions.
* **Product list** – Choose specific products to feature.
* **Max width** – Set the maximum display width for the list (in pixels).
Ideal for showcasing bestsellers, new arrivals, or curated product groups within a section.
