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".
| 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 | 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. |
| 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 | 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. |
| 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). |
| 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). |
| Settings | Meaning |
|---|---|
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.
