Ella Documentation
Open a Store for FREEExclusive OffersServicesResources
  • Greeting + Useful Resources
  • Exclusive Offers 🔥
  • Changelog
  • Full Theme Features in Ella 6
  • Installation
    • Install Theme 🎯
    • Update Theme 🔔
      • Update from Ella 1.0, 2.0, 3.0, 4.0, 5.0 to Ella 6.0
      • Update from Ella 6.0 to a higher version
      • Theme Update Service
    • Install App
  • Basic Configuration
    • Customer Registration
    • Shipping Rates
    • Navigation
    • Sticky Toolbar Mobile
    • Online Store 2.0
      • Color Gradient
      • Dynamic Source
  • Theme Settings
    • Multiple Layouts
    • Typography
    • General
      • Favicon
      • Wishlist
      • X-shaped cursor
      • Terms and conditions
      • Swatch
      • Variant picker
      • Customization option
      • Customer login
      • Hot stock function
      • Add to cart action
      • Lazy load image
      • Slider dots
      • Slider arrows
      • Pagination
      • Trusted image
      • Dynamic browser tab title
      • Saved price
      • Scroll down to the next section
      • View documentation
    • Product card
      • Change product card layout
      • Set up for product card
      • Positive vibes bundle
      • Product badges
      • Product Swatch
      • Product Action
      • Quick Shop
      • Marquee
    • Theme Language
      • How to set up a different language?
      • How to set up Multiple Languages?
    • Multiple Currencies
    • Multi-Level Categories
    • Quick Search
    • Quick Cart/ Quick Edit Cart
    • Quick View
    • Countdown
    • Free Shipping Calculator Message
    • Someone Purchased Notification Popup
    • GDPR Popup
    • Newsletter Popup
    • Recently Viewed Popup
    • Before You Leave
    • Notify Me When Out Of Stock
    • Ask An Expert
    • Social Media
    • Product Colors
    • General colors
    • Animations
    • Adding custom CSS to your theme
    • Custom JS
    • Checkout
  • Header
    • Header For Desktop
      • Home 01 - Classic
      • Home 02 - Trendy Style
      • Home 03 - In vogue
      • Home 04 - High Fashion
      • Home 05 - Surfing
      • Home 06 - SuperMarket
      • Home 07 - Electronics
      • Home 08 - Large Catalogs
      • Home 09 - Pet Supplies
      • Home 10 - Jewelry
      • Home 11 - Health & Beauty
      • Home 12 - Men Fashion
      • Home 13 - Winter Sport
      • Home 14 - Automotive 1
      • Home 15 - Automotive 2
      • Home 16 - Game
      • Home 17 - Gym
      • Home 18 - Shoes
      • Home 19 - Swimwear 1
      • Home 20 - Furniture
      • Home 21 - Yoga
      • Home 22 - Eyes Wears
      • Home 23 - Plant+ Garden
      • Home 24 - Bicycle
      • Home 25 - Swimwear 2
      • Home 26- Bagratica
      • Home 27 - Men Fashion 02
      • Home 28 - Single Product
      • Home 29 - Chic Couture
      • Home 30 - POD Store
      • Home 31 - Hair Wigs
      • Home 32 - Suitcase
      • Home 33 - Coffee Shop
      • Home 34 - Lunch Set
      • Home 35 - Dietary Supplement
    • Header For Mobile / Tablet
    • Set up Advanced Mega Menu/ Drop Down Menu
      • Label For Menu
    • Mobile Menu
  • FOOTER
    • Footer Layout
      • Home 01 - Classic
      • Home 02 - Trendy Style
      • Home 03 - In vogue
      • Home 04 - High Fashion
      • Home 05 - Surfing
      • Home 06 - SuperMarket
      • Home 07 - Electronics
      • Home 08 - Large Catalogs
      • Home 09 - Pet Supplies
      • Home 10 - Jewelry
      • Home 11 - Health & Beauty
      • Home 12 - Men Fashion
      • Home 13 - Winter Sport
      • Home 14 - Automotive 1
      • Home 15 - Automotive 2
      • Home 16 - Games
      • Home 17 - Gym
      • Home 18 - Shoes
      • Home 19 - Swimwear 1
      • Home 20 - Furniture
      • Home 21 - Yoga
      • Home 22 - Eyes Wears
      • Home 23 - Plant+ Garden
      • Home 24 - Bicycle
      • Home 25 - Swimwear 2
      • Home 26 - Bagratica
      • Home 27 - Men Fashion 02
      • Home 28 - Single Product
      • Home 29 - Chic Couture
      • Home 30 - POD Store
      • Home 31 - Hair Wigs
      • Home 32 - Suitcase
      • Home 33 - Coffee Shop
      • Home 34 - Lunch Set
      • Home 35 - Dietary Supplement
  • SECTIONS
    • Section On Every Page
    • All Sections in Theme
      • Announcement Bar
      • Multitab Image
      • Brand Slider
      • Brands Showcase
      • Banner Motion
      • Before/After Image Slider
      • Blog Posts
      • Blog Posts List
      • Blog Posts Slider
      • Custom Text
      • Custom Image Banner
      • Custom Liquid
      • Custom Press Banner
      • Customer testimonial
      • Customer Review
      • Custom Service Block
      • Custom Product Widget
      • Counter Positions Image Banner
      • Collapsible Content
      • Collection List
      • Featured Categories
      • Featured Product
      • FAQs
      • Google Map
      • Image Banner
      • Instagram
      • Instagram Visual Grid
      • Instagram Special
      • Highlights Lookbook
      • Newsletter
      • Newsletter with banners
      • Newsletter With Countdown
      • Marquee
      • Multilayer image
      • Page
      • Policies Block
      • Product Block
      • Product Block Duo
      • Product Tabs
      • Product Vertical
      • Product Highlight
      • Puzzled Image Banner
      • Rich Text
      • Slideshow
      • Search Block
      • Spotlight Block
      • Special Banner
      • Spotlight Products
      • Slidable Spotlight
      • Sticky Scrolling Banner
      • TikTok Video
      • Video
      • Visual Lookbook
    • Product Combo
  • Collections List Page
    • Demo & Settings Data
    • Collections List Section
  • Collections Page
    • Demo & Settings Data
    • Sub Collection
    • Collection section
      • Collection header
      • Main collection
        • Filter
  • Product Page
    • Demo & Settings Data
    • Product Information
      • Product Media
      • Product Tabs
      • Product Variant
      • Size Chart
      • Description
      • Delivery Time
      • Dynamic Checkout Button
      • Color Comparison
      • Sticky Add To Cart
      • Sold In Last Period
      • Customers Viewing
      • Custom Information
      • How To Set Up Product Description For Each Variant?
      • How To Set Up Product Property By Metafields?
      • How To Set Up Complementary Products?
      • Positive Vibes Bundle
      • Combined Products Listing
      • List Tags
    • Variant Image Grouped
    • Product Bundle
    • Product Combo
    • Quick Order List
    • Product Description Tab
    • Product Recommendations
    • Recently Viewed Products
    • How To Set up Pre-Order Product?
    • How To Set Up Local Pickup?
  • Blog
    • Blog
    • Default Layout
    • Layout 01
    • Layout 02
    • Layout 03
    • Layout 04
  • Article
    • Article
    • Default Layout
    • Layout 01
  • Page
    • How To Create A Page?
    • Find A Store/ Store Locator Page
    • Landing Page
      • Landing Page 01
      • Landing Page 02
      • Landing Page 03
    • Wishlist Page
    • Brands Page
    • Collection Detail Page/ Sub Collection Page
    • FAQs Page
      • Layout 01
    • Lookbook Page
      • Layout 01
    • Contact Us Page
      • Layout 01
      • Layout 02
    • About Us Page
      • Layout 01
      • Layout 02
    • Portfolio Page
      • Layout 01
      • Layout 02
    • Password Page
      • Layout 01
      • Layout 02
    • Other Pages
      • 404 Page
      • Search Page
  • Our Services
    • Theme Installation Service
    • Theme Update Service
    • Theme Development Service
    • Website UI Design
  • Knowledge Base
  • Theme Support
Powered by GitBook
On this page
  • Section settings
  • General
  • Tab item
  • Section top padding
  • Section bottom padding
  • Block Settings
  • [BLOCK] Tab item
  • HOW TO SHOW IMAGES FOR BRAND TAB SECTION?
  1. SECTIONS
  2. All Sections in Theme

Multitab Image

PreviousAnnouncement BarNextBrand Slider

Last updated 6 months ago

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

General

Settings
Meaning

Section width

Select the layout width of the whole section. The options are: Default (same as the body width) Width (1170px) Width (1770px) Full width (100% of the viewport width).

Padding for 'full width' option on desktop

Determine the left and right spacing of the full width layout on the desktop.

Show border

Choose to show the border on the top of the section.

Background

Apply the color for the section background.

Background gradient

Apply the gradient color for the section background.

Background image

Upload an image as the section background.

Block layout

Select the layout style of the block item. There are 2 options:

Text on the right of image

Text below image

Title

Enter the title for the section.

Title color

Apply color for the title of the section.

Title font size

Determines the font size of the title on tablet and desktop devices.

Title font size on mobile

Determines the font size of the title on mobile devices.

Title bottom margin

Determines the spacing of the title from the bottom content.

Description

Enter the description text for the section.

Description color

Apply the text color of the section description.

Description font size

The font size of the description text.

Description bottom margin

Determine the spacing bottom of the description text.

Alignment

Align the title and description to the Left, Right, or Center.

View all

The text for the view all button.

'View all' alignment

Select the position of the view all button to be either to the Left, Right or Center.

'View all' font weight

Select the font weight of the view all button text.

'View all' bottom margin

Determines the spacing bottom of the view all button.

Show 'view all' border

Toggle the view all button border.

'View all' link

Specify the link for the view all button to redirect to.

'View all' link color

The text color of the view all button.

'View all' icon

'View all' icon color

The color of the icon on the view all button.

Maximum items to show

The number of block from the navigation to display. Minimum: 4. Maximum: 24.

Items per row

The number of block columns per one row on the desktop.

Tab item

Settings
Meaning

Style

Select the layout style of the block item. The options are:

Title with border below Title with border around

Font size

The font size of the title tab on tablet and desktop devices.

Font size on mobile

The font size of the title tab on mobile devices.

Bottom margin

Determines the spacing of the title from the bottom.

Text color - Border color - Background color - Text hover color - Border hover color - Background hover color

Set the color, background, and border color for both the normal and hover states of tab title.

'Show more' text

The text of the show more button.

Show Less

The text of the show less button.

Button icon

Text/Icon color

The text color of the Show More button and the Show Less button.

Border color

The border color of the Show More button and the Show Less button.

Background color

The background color of the Show More button and the Show Less button.

Background gradient

The background gradient of the Show More button and the Show Less button.

Section top padding

Settings
Meaning

Desktop

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).

Tablet

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).

Mobile

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).

Section bottom padding

Settings
Meaning

Desktop

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).

Tablet

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).

Mobile

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).

Block Settings

[BLOCK] Tab item

Settings
Meaning

Title

The title of the tab.

Menu

Menu item

Grid gap

Determines the gap between each block item.

Top/Bottom padding

Determines the height of the top and bottom inner space of the tab item.

Left/Right padding

Determines the width of the left and right inner space of the tab item.

Corner radius

Determines the roundness of the block item border.

Maximum image width

Maximum width of the image in the block item.

Minimum image height

Minimum height of the image in the block item.

Image corner radius

Determines the roundness of the image border.

Background color

The background color of the block item.

Border color

The border color of the block item.

Show title

Toggle to show or hide the title of the block item.

Title font size

The font size of the block title.

Title font weight

Select the font weight of the title.

Title color

The text color of the block title.

Title hover color

The text color of the block title for hover state.

Show tab image

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:

+ Lower cap.

+ And use a hyphen "-" to replace white space if your collection name has the white space.

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

- For example:

+ With the collection name "Ella Brand", the image name will be ella-brand.png

+ 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.

Enter the SVG icon that stands next to the text in the button. Note: Go to this link . Find the icon you want, then copy the SVG code and paste it here.

Enter a svg icon to show the icon before the text of button. Note: Go to this link . Find the icon you want, then copy the SVG code and paste it here.

Select a navigation to show the block items. Note: Select a navigation to show the block items. .

Show the image of the block uploaded in your admin.

find your icon
Find your Icon
Learn more about how to upload images
How to upload image?