# Multitab Image

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FJ6UEweXYC1irQGCez8QX%2Fimage.png?alt=media&#x26;token=3f342b94-7310-4402-9d1c-1b84a3b70bc5" 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="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FYvZ7aX8z558gMhIwSQG6%2Fbrand-tab-upload.jpg?alt=media&#x26;token=e9ee0ed7-8aa3-4ef4-b8f5-7bfea0845f3c" alt=""><figcaption></figcaption></figure>