> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Blum Hero Image With Text **Theme:** Blum ยท **Section type:** All-template section The Hero image with text section places a large image next to a heading, description, and up to 2 buttons. Below it, you can show a row of highlighted collections so customers can start shopping right away. > **Note:** You can add this section to any template, except the header and footer. ![Hero image with text on desktop, with the image beside the heading and button](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/hero-1_1vlmzo.png) **What you can do** - Add the section, your image, and text - Show highlighted collections below the hero - Add a prominent badge - See what customers see - Change the layout and collection card style - Fix common problems --- ## Add the section, your image, and text 1. In the theme editor, open the template where you want the section. 2. In the left sidebar, click **Add section** > **Hero image with text**. 3. Under **Image**, select an **Image** and choose its **Image ratio**. 4. Under **Text**, enter a **Subheading**, **Heading**, and **Description**. 5. Under **Buttons**, enter a **Primary button label** and **Primary button link**. Add a secondary button the same way, or clear a label to hide that button. 6. Under **Layout**, set **Content alignment** to **Left** or **Center**. 7. Click **Save**. ## Show highlighted collections below the hero 1. Under **Highlighted collections**, make sure **Enable highlighted collections** is on. 2. Enter a **Heading**, for example "Shop by category". 3. In **Collections**, select your collections. 6 collections work best. 4. Choose a **Style**: **Standard** (title below the image) or **Card** (title on the image, with a mask overlay). 5. Set **Items per row on desktop** to **4**, **5**, or **6**. 6. Optional: turn on **Show 'View all' button to view all collections** and edit the **'View all' button label**. 7. Click **Save**. > **Tip:** The collection images, product count, and overlay come from **Theme settings** > **Collection card**. Change them there to update every collection card in the store. ## Add a prominent badge 1. Under **Prominent badge**, enter the badge **Text**. Leave it empty to hide the badge. 2. Choose the **Accent scheme**, **Position**, and **Shape**. 3. Click **Save**. ## What customers see - **Hero:** the image sits beside the text and buttons on desktop, and above or below them on phones. - **Highlighted collections:** a row of collection cards that customers can scroll sideways. Arrows appear when there are more collections than fit in the row. - **View all:** the button opens your all-collections page. - **Phones:** customers swipe through the collection cards. Turn on **Show navigation on mobile** to show the arrows as well. ![Highlighted collections row below the hero, with the next arrow](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/hero-2_15foa1d.png) ## Settings reference ### General | Setting | What it does | | ---- | ---- | | Color scheme | Sets the colors of the section. Edit schemes in Theme settings > Colors. | ### Layout | Setting | What it does | | ---- | ---- | | Content alignment | Aligns the hero text Left or Center. | | Remove padding top | Removes the space above the section. | | Remove padding bottom | Removes the space below the section. | ### Text | Setting | What it does | | ---- | ---- | | Subheading, Heading, Description | The hero text. | ### Image | Setting | What it does | | ---- | ---- | | Image | The hero image. | | Image ratio | Shapes the image as Square (1:1), Portrait (2:3), Landscape (3:2), or Adapt to image (keeps the original shape). | ### Buttons | Setting | What it does | | ---- | ---- | | Primary button label, Secondary button label | The button text. Leave a label empty to hide that button. | | Primary button link, Secondary button link | Where the button goes. Appears after you enter the button label. | ### Highlighted collections | Setting | What it does | | ---- | ---- | | Enable highlighted collections | Shows the row of collections below the hero. | | Style | Standard shows the title below the image. Card shows the title on the image, over a mask overlay. The mask overlay doesn't apply to Standard. | | Heading | The title above the collections. | | Collections | The collections to show. 6 collections recommended. | | Items per row on desktop | Shows 4, 5, or 6 collections per row on desktop. | | Show 'View all' button to view all collections | Shows a button that opens the all-collections page. | | 'View all' button label | The text of that button. | | Show navigation on mobile | Shows the arrows on phones. | ### Prominent badge | Setting | What it does | | ---- | ---- | | Text | The badge text. Leave it empty to hide the badge. | | Accent scheme | Colors the badge with the Main or Extra accent from Theme settings > Colors > Accent. Appears after you enter text. | | Position | Places the badge on the Left or Right. Appears after you enter text. | | Shape | Star, Diamond, or Asterisk. Appears after you enter text. | ## Troubleshooting **The collections show placeholder images.** No collections are selected yet. Select them in **Collections** under **Highlighted collections**. **The collection cards look different from what I set here.** Image ratio, product count, and overlay opacity of the cards come from **Theme settings** > **Collection card**. **I don't want the collections row.** Turn off **Enable highlighted collections**. ## Related articles - [Blum Image With Text](https://doc.ecomx.co/en/article/blum-image-with-text-asff90/) - [Blum Image Banner](https://doc.ecomx.co/en/article/blum-image-banner-jzf00j/) - [Blum Collection List](https://doc.ecomx.co/en/article/blum-collection-list-csa3sl/) - [Blum Featured Collections](https://doc.ecomx.co/en/article/blum-featured-collections-1ioinmx/)