Theme Blocks
In order to make your Header useful, helpful, and well-organized, you can add various content blocks. Here you can decide what information should be displayed and its position.
Last updated
In order to make your Header useful, helpful, and well-organized, you can add various content blocks. Here you can decide what information should be displayed and its position.
Last updated
Sections -> Header - Add block
No matter what header type you have chosen, its content can be changed individually in the Shella theme. You can change the content of the header using different dynamic blocks when adding new content. There are several blocks for the header: Title images, Labels, Icons (for the first level), Info line, Tape, Mega menu, Mega -> Promo box, Mega -> Brands, Mega -> Products, Mega -> Custom HTML, Mega -> Subscription, Advanced menu (4 levels). You can find them all when clicking on “Add block”:
Now let's take a deep look at each content block.
The “Title images” block enables you to add images to the titles of subsections in the Mega menu. For example, in the main menu, there is a section Men's. When one hovers the mouse over it, the Men´s Mega menu is displayed, where various subsections and promo boxes may be shown. In our example, the subsections are clothing, shoes, and accessories.
Now if we want the title of the subsections to have images, we add the block “Title images”, where images can be added to up to 5 items. If you have less than five subsections, leave the other ones blank. In order to add a title image for item #1, we type “Men's+Clothing”, then select the desired image for Image #1, additionally, we can change the size of the image on the size scale from 100 to 300 px. We have added 3 images to each subsection and this is what we have got:
If you need a special label, e.g. NEW, HOT, SALE to be shown near the title of the subsection you have to add a block “Labels”. In this block, you can add labels to 15 items. If this is not enough for you, you can add more blocks “Labels”. Now let's go deeper into this block.
The block “Labels” has 3 label types: NEW, HOT, and SALE, which can be chosen from the dropdown list. Each label has its color: new - blue, hot - orange, sale - red. Once you choose any label out of this list, it will be shown in front of each item you add to “For item #1 - #15” in this block. For each new type, a new “Labels” block is required.
If you need another label for your item, which is not offered in the types, you can write the name of the label in the text field. No matter what name of the “Type” was selected, it will be automatically changed to your label text using the original type’s color, e.g.: Active now!
In these fields, you need to write for which title the label is required, e.g.: Men's+Shoes+Flats.
Example:
In our example we have set the following labels:
NEW - for Women's+Clothing+Coats
HOT - for Women's+Shoes+Heels
SALE - for Women's+Shoes+Trainers
HURRY UP! - for Women's+Accessories+Bags (Although the Type here is “Sale” we have written our own label text “HURRY UP!” in the Text field and only the original color of the label type “Sale” remains, but the text is different.)
If you want each menu section to have an icon, you need to add the “Icons” block. The icons can be added both for the horizontal and vertical menus. The icon codes you can find here.
If you enable the option “For vertical menu” the icons will be added to the vertical menu only.
In these fields you need to write for which Menu item the icon is required, e.g.: Layouts, Shop, Blog.
In this block, you can add up to 20 icons. If this is not enough for you, you can add another block “Icons (For the first level)”.
For item #1
Women's
Icon #1
icon-theme-050
For item #2
Men's
Icon #2
icon-theme-048
For item #3
Layouts
Icon #3
icon-theme-083
For item #1
Women's
Icon #1
icon-theme-025
For item #2
Men's
Icon #2
icon-theme-024
For item #3
Sale
Icon #3
icon-theme-128
This block allows you to add additional information to the very top of the header, e.g.: call us, phone number, etc. The block “Info line” can be added only once!
If you want to show the Info line on mobile, simply enable the option “Show block on mobile”.
Here you can decide what colorize style will be displayed for an Info line both on desktop and mobile view. The theme included two colorize styles:
Please note, this functionality works with the enabled “Transparent background” in the “Header” section. Check details here.
If you enable the option, it will only apply to the Home page. The information line will have the additional background on other pages or when hovering over header lines on a Home page. The background of an information line can be changed by selecting its Colorize style (read the details above) or by adding the dynamic block “Colorize” to the “Header” section. How to configure colors, especially for the Info line, you can read here.
In order to add the page content, you need to select the page with the proper information. If no page is selected, the default page “Include Header Info Line” will be used. In the Shella theme, there are some default pages, which you can edit with your information.
You can edit the pages in your Shopify Admin-> Online Store -> Pages. Then click on the page and edit it with your information:
More information about how to add and edit pages you can find here.
In case you need social media to be displayed in the Info line, tick the “Show social media” option before choosing media from the suggested list.
You can also decide, whether social media should be displayed in your Info line if you have any from the suggested list in “Media settings”. Please note that the links to your social media accounts should be added in your Shella Editor -> Theme settings -> Social Media -> Social accounts.
Learn how to customize the font size of the Announcement bar using CSS by referring to the help page.
An announcement bar is sort of an information line at the very top of the header which can be closed by the customer. It can be added only once.
Here you can decide if you want to delay the appearance of the Tape by using the scale from 0 to 10 seconds of the delay.
In this block, you can choose the Tape colorize style. There are 3 colorize styles:
Please note, that this functionality works with the enabled “Transparent background” in the “Header” section. Check details here.
If you enable the option, it will only apply to the Home page. The tape will have additional background on other pages or when hovering over header lines on a Home page. The background of the announcement bar can be changed by selecting its Colorize style (read the details above) or by adding the dynamic block “Colorize” to the “Header” section. How to configure colors for the announcement bar, you can read here.
You can always change its content by writing a new text or HTML content, and of course, the tape can be always removed as a content block.
A mega menu block allows you to organize and customize the menu items, inside the dropdown menu section. This is a multifunctional block, which enables one to add additional content, such as promo boxes, brands, products, etc. Before you start working with the Mega menu block, make sure, that you have created all menu items needed for this menu section in your Shopify Admin -> Navigation. How to add and edit menu items in your online store you can find here.
We will show you how it may look on an example of the “Women’s” menu.
These were our steps:
In the Navigation, we have added a menu item “Main menu”:
2. In the “Main menu” we have added all needed menu items including a menu item “Women’s”.
3. In “Women’s” we have added some other menu items with the dropdown menus:
Now we can get back to the “Mega menu” block in the Shella theme and customize it.
Here are some general settings for the mega menu. In the field “For item”, you should type the name of the menu item, for which the mega menu is created. Check the following video tutorial for an example of how to customize a mega menu block.
In our example, we have used the “Women's” item.
Since we have already added the blocks “Title images” before (check the example above), we can customize the size of their columns on the size scale “Links column size” from 1 to 12:
If you enable this option, the menu items in the second level will be displayed like this:
This option enables you to decide how many lines of the menu items should be displayed in one row. There is a scale, where you can change the number of lines from 1 to 50.
This option enables you to order all the menu columns in one block:
This section allows you to customize content for the promo box in the left column. Here you can decide how many items should be displayed in one row of the promo box on the left side by choosing the “Content type”. A column size can also be selected on the “Column size” scale from 0 to 12. How to add a promo box you can read in the block Mega -> Promo box.
This section allows you to customize content for the promo box in the right column. Here you can decide how many items should be displayed in one row of the promo box on the right side by choosing the “Content type”. A column size can also be selected on the “Column size” scale from 0 to 12. How to add a promo box you can read in the block Mega -> Promo box.
This section can be used only for the “Header type” #5 and Header type” #7. If you want to limit the edge of the menu container, tick the option “Enable width limit” and use the “Width limit” scale from 300 to 1000 px.
The Promo box is an additional option for the mega menu. It enables you to add a promotion (banner), brands, products, pages, etc. inside of the dropdown menu. From the previous section, you might have known that the columns for promo boxes can be positioned both on the left and right sides in the dropdown menu. You can also choose only one side for this purpose. It is up to you. Now let's check on the example, how one can work with the promo box, and what it may look like. In the block “Mega menu” we have created a mega menu for the “Men's”. We will proceed with working with this menu item. A new content block for the Mega menu “Men's” will be added. This content block is called Mega -> Promo box.
Here you can write the title of the banner that will be displayed above the banner´s image in the promo box. This is optional, of course.
In this section, you can add a “URL for the banner” that will redirect your customers to the needed page, when clicking on the banner. Simply click on it and choose the desired page from the dropdown list, or you can paste a link that is not on this list.
In order to make your banner more attractive for the clients, you can add an “Image” for it. The recommended image size is 1440 x 550 pixels. The size of the image can be changed on the “Image size” scale from 200 to 2000 pixels. You can also add an “Image mask” and choose the level of its opacity on the “Image mask opacity” scale from 0.1 to 1.0. An image mask is a sort of color cover that can be put over the image in order to give it a particular shade of color if it has some opacity, or to cover it completely with the color if the opacity level is at maximum.
Here you customize the text content for your banner in the promo box. There are 3 text lines that can be added. Delete the line value for the text or button if you want to hide the element and use "<br>" for a line break. Of course, the style of the text content can be changed to in “Colorized style”, where you can choose one of eight possible styles for this purpose.
For each banner in the promo box, you can add two buttons, which can be customized. There are three customization options for the buttons: button text, URL for the button, and button style. In the button text, you can write the title of the button, e.g.: Shop now, or More. In the URL for the button insert the link to which the client should be redirected when clicking on the button and in the button style you can choose one of the button styles which are offered in the dropdown list.
List
In order to add a page with list content for the banner, press “Select page” and choose the one from the list. You can create a list of content in your Shopify Admin -> Online Store -> Pages.
Custom HTML
This option allows you to replace the whole text content in the promo box with the page content. How to add and edit a page you can read here. This is an example of it:
Here you can choose the “Type” of layout for the text in the promo box. Shella theme offers a lot of types for layout, simply choose the one, that suits best for your store. Additionally, you can choose the proper “Content position on the desktop” and “Content horizontal align”.
In this section, you can work on the animation, position, and opacity of the image in the banner of your promo box. You can decide whether the image should have an animation when being hovered over with the mouse cursor by choosing the proper option from “Moving image on hover to”. The positioning of the image can also be set in the “Static image position”. Just choose one of the available options from the dropdown list. In the same way, you can decide whether or when the banner image in the promo box should have an opacity. In the dropdown list “Image opacity” the options static, hover, static, and hover or none can be chosen for this purpose.
Now let’s see what we get when we add and customize our Promo box for the Mega menu “Men’s”. If we don't use an option, we leave it blank. So, these are our settings for the Promo box:
Title: (no title was written)
GENERAL
URL for banner: All Collections
Image: (the image was selected)
Image size: 400px
Image mask: red
Image mask opacity: 0.3
TEXT
Text line #1: Sale
Text line #2: -20% OFF
Colorize style: Style #1
OTHER CONTENT
List: (not selected)
Custom HTML: (not selected)
LAYOUT
Type: Type #3 (Ribbon bottom the image) Please note! For this type, no buttons will be shown!
ANIMATION
Move image on hover to: Center
Static image position: None
Image opacity: None
Please note! In the “Mega menu” block (that we have described above) you can choose on which side the banner will be positioned: right or left. The number of banner items in one row can also be chosen in the Mega menu.
For our example, we have the following settings:
LEFT COLUMN
Content type: 1 item in row
Column size: 0/12
RIGHT COLUMN
Content type: none
Column size: 0/12
We have also deleted the block “Title images” in order to concentrate your attention on the “Promo box” block only.
So after all these settings, we have got the following dropdown menu for the menu item “Men’s”:
You can add brands in the right or the left column of the dropdown menu the same as the banners of the promo box and customize them, writing their title, pasting an URL for the title, and choosing how many images should be displayed in one row. Moreover, you can add images for brands and resize them, using a scale for image size from 50 to 300 px. For each image, an URL can be selected. In one such “Mega -> Brands” block, you can add up to 10 images for brands and customize them.
IMPORTANT! The positioning of the blocks is very important! If you want to see the “Mega -> Brands” block in the dropdown menu (e.g. for “Women´s”), the blocks should have the following order:
Mega menu (For item “Women´s”)
Mega -> Brands
Title images
We will show you an example of such a block in the menu item “Women´s” where we have the following settings:
Title: Top Brands
URL for title: All collections
GENERAL
Size of images: 2 images in a row
IMAGES
Image #1: (an image was added)
Image size #1: 80px
URL #1: Women's
The second image had the same settings. This is what we´ve got:
Please note! In the “Mega menu” block (that we have described above) you can choose on which side the brands will be positioned: right or left. For our example, we have chosen the right column for the brands. In the left column is the banner.
And these are the settings:
RIGHT COLUMN
Content type: 1 item in row
Column size: 4/12
You can add products in the right or the left column of the dropdown menu same as banners of promo boxes or brands and customize them, write their title; select the proper collection, from which the products should be shown; choose how many images should be displayed in one row, using the dropdown menu “Products per row”, and selecting the number of products on the “Rows” - scale from 1 to 6.
IMPORTANT! The positioning of the blocks is very important! If you want to see the “Mega -> Products” block in the dropdown menu (e.g. for “Men´s”), the blocks should have the following order:
Mega menu (For item “Men's”)
Mega menu -> Promo box
Mega -> Products
We will show you an example of such a block in the menu item “Men's” where we have the following settings:
Title: (no title)
GENERAL
Collection: Sale
Products per row: 2
Rows: 1
And this is what we´ve got:
Please note! In the “Mega menu” block (that we have described above) you can choose on which side the products will be positioned: right or left. For our example, we have chosen the right column for the products. In the left column is the banner.
And these are the settings:
LEFT COLUMN
Content type: 1 item in row
Column size: 3/12
RIGHT COLUMN
Content type: 1 item in row
Column size: 3/12
This block allows you to add the whole page as content. How to add end edit a page you can read here. In this block, you can add a title and an URL for the title, or you can leave both of these fields blank if no title is needed. Once you write the title, the block will get its name automatically. So in order to add page content you need to select the page you want to be displayed in the dropdown menu.
IMPORTANT! The positioning of the blocks is very important! If you want to see the “Mega -> Custom HTML” block in the dropdown menu (e.g. for “Men´s”), the blocks should have the following order:
Mega menu (For item “Men´s”)
Mega menu -> Promo box
Mega -> Custom HTML
We will show you an example of such a block in the menu item “Men´s” where we have the following settings:
Title: About Us
URL for the title: About our store
GENERAL
Page content: About our store
Please note! In the “Mega menu” block (that we have described above) you can choose on which side the Custom HTML will be positioned: right or left. For our example, we have chosen the right column for the Custom HTML. In the left column is the banner.
And these are the settings:
LEFT COLUMN
Content type: 1 item in row
Column size: 3/12
RIGHT COLUMN
Content type: 1 item in row
Column size: 3/12
This block allows you to add the subscription section in the dropdown menu. You may write a title and an URL for this bock or you can leave them blank. Once you write the title, the block will get the same name automatically. In the placeholder write the text that should be displayed, e.g.: “E-mail address”, and then write the button text, e.g. “SUBSCRIBE”.
IMPORTANT! The positioning of the blocks is very important! If you want to see the “Mega -> Subscription” block in the dropdown menu (e.g. for “Men´s”), the blocks should have the following order:
Mega menu (For item “Men´s”)
Mega menu -> Promo box
Mega -> Subscription
We will show you an example of such a block in the menu item “Men´s” where we have the following settings:
Title: (no title)
URL for the title: (no URL)
GENERAL
Placeholder: E-mail address
Button text: SUBSCRIBE!
And this is what we´ve got:
Please note! In the “Mega menu” block (that we have described above), you can choose on which side the subscription will be positioned: right or left. For our example, we have chosen the right column for the subscription. In the left column is the banner.
And these are the settings:
LEFT COLUMN
Content type: 1 item in row
Column size: 3/12
RIGHT COLUMN
Content type: 1 item in row
Column size: 3/12
This block enables to have up to 4 levels in the header menu. All you need here is to decide which menu item you do want to have a 4 levels menu and select the proper menu from the list. Once you select a menu, the name of this block will be automatically renamed to the name of the menu you select. In our example, we have the following settings:
For item: Gallery
Menu: Gallery
And this is what we´ve got:
Make sure, that you have created a menu for the item in Shopify Admin first. This is how the advanced menu looks like in Shopify Admin:
For more advanced color settings, this block should be added.
Here one can configure header lines backgrounds, buttons, and menu colors. The header line number depends on the header type.
Please, check the example for header type #3:
Please note this section setting work only for Header types #1, #2, #5, #6, and #7.
Here how it may look like for header type #5:
The Search button type can be changed by choosing one of the options in the dropdown list. The theme includes 5 types: “Auto”, “Default”, “Invert”, “Secondary”, and “Clean”.
Please note, this section setting work only for Header types #5, #6, and #7.
Here is an example of header type #5:
