Multitab Image
Last updated
Last updated
To add this section, please follow below steps:
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Add section and choose "Multitab image".
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
Enter the SVG icon that stands next to the text in the button. Note: Go to this link find your icon. Find the icon you want, then copy the SVG code and paste it here.
'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.
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
Enter a svg icon to show the icon before the text of button. Note: Go to this link Find your Icon. Find the icon you want, then copy the SVG code and paste it here.
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.
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).
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).
Title
The title of the tab.
Menu
Select a navigation to show the block items. Note: Select a navigation to show the block items. Learn more about how to upload images.
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
Show the image of the block uploaded in your admin. How to upload image?
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.
