Multitab Image
Multitab Image is a section that allows you to display image galleries in tab format, with customizable grid layout and detailed styling options for the tab headers.
This section automatically loads images based on the navigation menu and displays them in a responsive grid.
There are 2 ways to add a Section to your store
1. Add a pre-made section from our demo?
2. Add the Multitab Image section manually?
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
In the Templates -> Add section -> choose Multitab Image.
Multitab Image - Settings Guide
This guide explains all available settings for the Multitab Image in order from top to bottom as they appear in the Theme Editor.
Block Types Supported
multitab-image-row- Tab row blocks (max 6 blocks)
Settings Guide
Multitab Image - Settings Guide
Layout Settings
section_width
select
"page-width"
page-width, full-width
Section container width
columns_desktop
range
4
1-6 (step: 1)
Number of columns on desktop
columns_mobile
select
"2"
1, 2
Number of columns on mobile
rows_gap
range
8
0-100px (step: 1)
Vertical gap between tab rows
alignment
text_alignment
"center"
left, center, right
Content alignment
Tab Header Settings
button_alignment
text_alignment
"center"
left, center, right
-
Tab buttons alignment
button_gap
range
8
0-100px (step: 1)
-
Gap between tab buttons
style_class
select
"button"
button, button-secondary, link
-
Tab button style type
button_style
select
"default"
default, outline, custom
style_class != 'link'
Button style variant
Custom Button Styling (Button/Button-Secondary)
button_border_width
range
1
0-4px (step: 1)
button_style == 'custom' && style_class != 'link'
Border width
button_border_radius
range
100
0-100px (step: 1)
button_style == 'custom' && style_class != 'link'
Border radius
button_type_font
select
"var(--font-body--family)"
body, subheading, heading
button_style == 'custom' && style_class != 'link'
Font family
button_type_size
select
"1.2rem"
10px-28px
button_style == 'custom' && style_class != 'link'
Font size
button_font_weight
select
"default"
thin, light, regular, medium, semibold, bold, black
button_style == 'custom' && style_class != 'link'
Font weight
button_text_case
select
"default"
default, uppercase
button_style == 'custom' && style_class != 'link'
Text case
Button Shadow Settings
buttons_shadow_horizontal_offset
range
0
-12 to 12px (step: 1)
button_style == 'custom' && style_class != 'link'
Horizontal shadow offset
buttons_shadow_vertical_offset
range
0
-12 to 12px (step: 1)
button_style == 'custom' && style_class != 'link'
Vertical shadow offset
buttons_shadow_blur
range
0
0-20px (step: 2)
button_style == 'custom' && style_class != 'link'
Shadow blur radius
Link Style Settings
button_type_size_link
select
"1.2rem"
10px-28px
style_class == 'link'
Link font size
button_font_weight_link
select
"default"
thin, light, regular, medium, semibold, bold, black
style_class == 'link'
Link font weight
case
select
"none"
none, uppercase, capitalize
style_class == 'link'
Link text case
wrap
select
"pretty"
pretty, balance, nowrap
style_class == 'link'
Link text wrapping
font_style
select
"normal"
normal, italic, oblique
style_class == 'link'
Link font style
link_underline
checkbox
false
-
style_class == 'link'
Show underline
link_hover_underline
checkbox
true
-
style_class == 'link'
Show underline on hover
link_reveal
checkbox
false
-
style_class == 'link'
Reveal effect on hover
custom_color_underline
checkbox
false
-
style_class == 'link'
Use custom underline color
link_underline_color
color
"#000000"
-
custom_color_underline && style_class == 'link'
Custom underline color
Content Settings
content_horizontal_gap
range
8
0-100px (step: 1)
-
Horizontal gap between grid items
content_vertical_gap
range
8
0-100px (step: 1)
-
Vertical gap between grid items
show_tab_item_content
checkbox
true
-
-
Show item titles below images
button_type_size_link_content
select
"1.2rem"
10px-28px
show_tab_item_content
Item title font size
button_font_weight_link_content
select
"default"
thin-black
show_tab_item_content
Item title font weight
Image Padding Settings
padding-block-start-img
range
0
Image top padding (0-100px)
padding-block-end-img
range
0
Image bottom padding (0-100px)
padding-inline-start-img
range
0
Image left padding (0-100px)
padding-inline-end-img
range
0
Image right padding (0-100px)
Border Settings
border
select
"none"
none, solid
-
Border style
border_width
range
1
0-10px (step: 0.5)
border != 'none'
Border width
border_opacity
range
100
0-100% (step: 1)
border != 'none'
Border opacity
border_radius
range
0
0-100px (step: 1)
-
Border radius
Appearance Settings
color_scheme
color_scheme
"scheme-1"
Section color scheme
Section Padding Settings
padding-block-start
range
0
Section top padding (0-100px)
padding-block-end
range
0
Section bottom padding (0-100px)
Multitab Image Row
This block can only be added within this section. It allows users to select a title and a menu to display the items inside.
Zero design skills? Create professional mockups, logos & videos for your store in seconds. Create... in seconds
Need More Help?
If you experience any difficulties or require extra support with your Ella theme, feel free to contact our support team through our Ticket System — we’ll get back to you within 24 hours.
Simply scan the QR code below to join our Facebook community and stay updated with the latest news, tips, and announcements.
Last updated