# Multitab Image

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

To add this section, please follow below steps:

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Add section** and choose "**Multitab image**".

## Section settings <a href="#section-settings" id="section-settings"></a>

### General <a href="#general" id="general"></a>

<table><thead><tr><th width="313">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Section width</td><td>Select the layout width of the whole section. The options are: <br><br><mark style="color:orange;"><strong>Default (same as the body width)</strong></mark><br><mark style="color:orange;"><strong>Width (1170px)</strong></mark><br><mark style="color:orange;"><strong>Width (1770px)</strong></mark><br><mark style="color:orange;"><strong>Full width (100% of the viewport width).</strong></mark></td></tr><tr><td>Padding for 'full width' option on desktop</td><td>Determine the left and right spacing of the full width layout on the desktop.</td></tr><tr><td>Show border</td><td>Choose to show the border on the top of the section.</td></tr><tr><td>Background </td><td>Apply the color for the section background.</td></tr><tr><td>Background gradient</td><td>Apply the gradient color for the section background.</td></tr><tr><td>Background image</td><td>Upload an image as the section background.</td></tr><tr><td>Block layout</td><td><p>Select the layout style of the block item. There are 2 options:</p><p></p><p><mark style="color:orange;"><strong>Text on the right of image</strong></mark></p><p><mark style="color:orange;"><strong>Text below image</strong></mark></p></td></tr><tr><td>Title</td><td>Enter the title for the section.</td></tr><tr><td>Title color</td><td>Apply color for the title of the section.</td></tr><tr><td>Title font size</td><td>Determines the font size of the title on tablet and desktop devices.</td></tr><tr><td>Title font size on mobile</td><td>Determines the font size of the title on mobile devices.</td></tr><tr><td>Title bottom margin</td><td>Determines the spacing of the title from the bottom content.</td></tr><tr><td>Description</td><td>Enter the description text for the section.</td></tr><tr><td>Description color</td><td>Apply the text color of the section description.</td></tr><tr><td>Description font size</td><td>The font size of the description text.</td></tr><tr><td>Description bottom margin</td><td>Determine the spacing bottom of the description text.</td></tr><tr><td>Alignment</td><td>Align the title and description to the Left, Right, or Center.</td></tr><tr><td>View all</td><td>The text for the view all button.</td></tr><tr><td>'View all' alignment</td><td>Select the position of the view all button to be either to the Left, Right or Center.</td></tr><tr><td>'View all' font weight</td><td>Select the font weight of the view all button text.</td></tr><tr><td>'View all' bottom margin</td><td>Determines the spacing bottom of the view all button.</td></tr><tr><td>Show 'view all' border</td><td>Toggle the view all button border.</td></tr><tr><td>'View all' link</td><td>Specify the link for the view all button to redirect to.</td></tr><tr><td>'View all' link color</td><td>The text color of the view all button.</td></tr><tr><td>'View all' icon</td><td>Enter the SVG icon that stands next to the text in the button.<br><br><em><mark style="color:orange;">Note: Go to this link</mark></em> <a href="https://fontawesome.com/v5.15/icons?d=gallery&#x26;p=2"><em><mark style="color:blue;">find your icon</mark></em></a><em><mark style="color:orange;">. Find the icon you want, then copy the SVG code and paste it here.</mark></em></td></tr><tr><td>'View all' icon color</td><td>The color of the icon on the view all button.</td></tr><tr><td>Maximum items to show</td><td>The number of block from the navigation to display. Minimum: 4. Maximum: 24.</td></tr><tr><td>Items per row</td><td>The number of block columns per one row on the desktop.</td></tr></tbody></table>

### Tab item

<table><thead><tr><th width="311">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Style</td><td><p>Select the layout style of the block item. The options are: </p><p><br><mark style="color:orange;"><strong>Title with border below</strong></mark><br><mark style="color:orange;"><strong>Title with border around</strong></mark></p></td></tr><tr><td>Font size</td><td>The font size of the title tab on tablet and desktop devices.</td></tr><tr><td>Font size on mobile</td><td>The font size of the title tab on mobile devices.</td></tr><tr><td>Bottom margin</td><td>Determines the spacing of the title from the bottom.</td></tr><tr><td>Text color - Border color - Background color - Text hover color - Border hover color - Background hover color</td><td>Set the color, background, and border color for both the normal and hover states of tab title.</td></tr><tr><td>'Show more' text</td><td>The text of the show more button.</td></tr><tr><td>Show Less</td><td>The text of the show less button.</td></tr><tr><td>Button icon</td><td>Enter a svg icon to show the icon before the text of button.<br><br><em><mark style="color:orange;">Note: Go to this link</mark></em> <a href="https://fontawesome.com/v5.15/icons?d=gallery&#x26;p=2"><em><mark style="color:blue;">Find your Icon</mark></em></a><em><mark style="color:orange;">. Find the icon you want, then copy the SVG code and paste it here.</mark></em></td></tr><tr><td>Text/Icon color</td><td>The text color of the Show More button and the Show Less button.</td></tr><tr><td>Border color</td><td>The border color of the Show More button and the Show Less button.</td></tr><tr><td>Background color</td><td>The background color of the Show More button and the Show Less button.</td></tr><tr><td>Background gradient</td><td>The background gradient of the Show More button and the Show Less button.</td></tr></tbody></table>

### Section top padding

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Tablet</td><td>Determines the height of the top inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Mobile</td><td>Determines the height of the top inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr></tbody></table>

### Section bottom padding

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Tablet</td><td>Determines the height of the bottom inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Mobile</td><td>Determines the height of the bottom inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr></tbody></table>

## Block Settings <a href="#block-settings" id="block-settings"></a>

### \[BLOCK] Tab item <a href="#block-image" id="block-image"></a>

<table><thead><tr><th width="318">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Title</td><td>The title of the tab.</td></tr><tr><td>Menu</td><td>Select a navigation to show the block items.<br><br><em><mark style="color:orange;">Note: Select a navigation to show the block items.</mark></em> <a href="https://halosoft.gitbook.io/ella-documentation/sections/all-sections-in-theme/brand-tab#how-to-show-images-for-brand-tab-section"><em><mark style="color:blue;">Learn more about how to upload images</mark></em></a><em><mark style="color:orange;">.</mark></em></td></tr><tr><td><strong>Menu item</strong></td><td></td></tr><tr><td>Grid gap</td><td>Determines the gap between each block item.</td></tr><tr><td>Top/Bottom padding</td><td>Determines the height of the top and bottom inner space of the tab item.</td></tr><tr><td>Left/Right padding</td><td>Determines the width of the left and right inner space of the tab item.</td></tr><tr><td>Corner radius</td><td>Determines the roundness of the block item border.</td></tr><tr><td>Maximum image width</td><td>Maximum width of the image in the block item.</td></tr><tr><td>Minimum image height</td><td>Minimum height of the image in the block item.</td></tr><tr><td>Image corner radius</td><td>Determines the roundness of the image border.</td></tr><tr><td>Background color</td><td>The background color of the block item.</td></tr><tr><td>Border color</td><td>The border color of the block item.</td></tr><tr><td>Show title</td><td>Toggle to show or hide the title of the block item.</td></tr><tr><td>Title font size</td><td>The font size of the block title.</td></tr><tr><td>Title font weight</td><td>Select the font weight of the title.</td></tr><tr><td>Title color</td><td>The text color of the block title.</td></tr><tr><td>Title hover color</td><td>The text color of the block title for hover state.</td></tr><tr><td>Show tab image</td><td>Show the image of the block uploaded in your admin. <br><br><a href="#how-to-show-images-for-brand-tab-section">How to upload image?</a></td></tr></tbody></table>

### HOW TO SHOW IMAGES FOR BRAND TAB SECTION?

**To show images for Brand Tab section, please follow our instruction below:**

**Step 1:**

\- Prepare image of the collection items for each tab. Name it with the same name as **the collection** (please use **PNG** image).

**- Rules:**

&#x20; \+ Lower cap.

&#x20; \+ And use a hyphen "**-**" to replace white space if your collection name has the white space.

&#x20; \+ And use a "-" to replace “**&**” if your collection name has the “**&**” special characters.

**- For example:**

&#x20; \+ With the collection name "**Ella Brand**", the image name will be **ella-brand.png**

&#x20; **+** With the collection name "**Coats & Jackets**",  the image name will be **coats-jackets.png**

**Step 2:**

You need go to **Content** --> **Files**, upload images here.

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://halosoft.gitbook.io/ella-documentation/sections/all-sections-in-theme/multitab-image.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.