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?

Read the instructions here

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

Setting	Type	Default	Options	Description
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

Setting	Type	Default	Options	Visibility	Description
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)

Setting	Type	Default	Range/Options	Visibility	Description
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

Setting	Type	Default	Range	Visibility	Description
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

Setting	Type	Default	Options	Visibility	Description
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

Setting	Type	Default	Range	Visibility	Description
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

Setting	Type	Default	Description
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

Setting	Type	Default	Options	Visibility	Description
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

Setting	Type	Default	Description
color_scheme	color_scheme	"scheme-1"	Section color scheme

Section Padding Settings

Setting	Type	Default	Description
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.

Multitab Image Row - Settings Guide

Multitab Image Row Block

Setting	Type	Description
title_header	text	Tab header title/label
menu	link_list	Navigation menu containing image links

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.

Join HaloThemes Community