Installation

Logo, favicon, header type, top line

Video Manual


Logo

  1. Navigate to themes. Store admin -> Online Store -> Themes
  2. Go to theme customization mode. Press Customize button
  3. You should see home page at right and Sections tab at left sidebar. Select Header section.
  4. Upload image at Logo image field
  5. Save settings

Recommended image size is 260 x 78 px.
Visible size is 130 x 39 px. Recommended size is twice bigger for better view on Retina displays and devices.
You can use custom logo size, we recommend to keep aspect ratio to 3.33 (260 / 78 = 3.33 )

You customize logo size, using Custom logo width option.

Favicon

  1. Navigate to themes. Store admin -> Online Store -> Themes
  2. Go to theme customization mode. Press Customize button
  3. You should see home page at right and Sections tab at left sidebar. Select General settings tab.
  4. Find and select Favicon item.
  5. Upload image at Favicon image field
  6. Save settings

Recommended image size is 32 x 32 px.
Recommended image format is PNG.

Header type

Theme includes six predefined header types. Each header type may include top line. Using combinations of header types and top line. You can get twelve different header layouts. You can review them on theme demo.

  1. Type #1
  2. Type #2
  3. Type #3
  4. Type #4
  5. Type #5
  6. Type #6
  7. Type #1 + top line
  8. Type #2 + top line
  9. Type #3 + top line
  10. Type #4 + top line
  11. Type #5 + top line
  12. Type #6 + top line

You can change header type at Header section.

.

Top line

To add top line add block Top line to Header section.

Edit block's settings to manage content.
You can change icon code. Check all available icons.
Save empty field to remove element.

You can edit predefined captions "Hours:", "Phone:", "Address:" via Edit languages Shopify feature.
You can show or hide block with social icons. You can configure links for social icons at Customize theme -> General settings -> Social media



Header section. Full list of options

# Option Description
1 Logo image Upload your logo.
2 Custom logo width Set logo width.
3 Animate logo? Enable or Disable logo animation at page load.
4 Menu Select menu for header main navigation. You should configure link list at Shopify backend first.
5 Header type Select header type
6 Enable sticky header? Enable/disable sticky header. When enabled you will see header even when scroll down to the page bottom.
7 Show login form? Show login form at account popup.
8 Top line Add top line content block to enable top line at header. To remove top line simple delete this block.


Top line content block. Full list of options.

# Option Description
1 Address
Phone
Hours
Icon code - set icon. Leave empty to hide icon. Check all available icons here
[Text field] - set text value. Leave empty to hide.
2 Show social icons? If enabled it will show social icons, which is available at Global settings -> Social media.
Navigation
Video manual

Configure simple navigation at header

  1. If you are not familiar with navigation at Shopify. Please check Menus and Links Shopify documentation
  2. Prepare navigation at Store admin -> Online store -> Navigation
  3. Go to Customize theme -> Sections -> Header
  4. Set menu for header.

  5. Save
Navigation, configure MegaMenu
How to configure mega menu, basic (2:01)

How to configure mega menu, advanced (10:10)

Configure mega menu drop down

  1. Be sure that you have completed previous step. And successfully configure Simple navigation
  2. Be sure that you successfully installed and activated MogoPlus app. Check Start here -> Install apps section of current documentation
  3. Go to Store admin -> Apps -> MogoPlus app
  4. Navigate to MegaMenu section
  5. Configure mega menu drop down options.
  6. Save
  7. Important! Apply changes to Store

Detailed description of mega menu drop down options

Buttons Description
Add MegaMenu dropdown
Save
Update
Edit
Delete
Manage mega menu drop down options in local app's database. These changes doesn't effect your store.
Apply changes to Store
Clear Store settings 		Sync app's database with your store. You can remove all mega menu options using "Clear Store settings"

You may need to clear browser cache to see changes at your store. Use Ctrl+F5 to reload page from server.


Detailed description of mega menu drop down options

# Option name Description Image
1 Name Important!

This is a key field. It should be equal first level menu item.
2 Color

Set color for first level menu item.
3 Width

Set width for mega menu drop down.
Available options:

  1. Pixels - set drop down width in pixels. Number of pixels set in next input.
  2. Menu width - set drop down width same as menu width
  3. Full screen width - full screen

Menu width example
4 Width in pixels (optional) Integer. Number of pixels.

Pixels example
5 Align Horizontal

Configure drop down's horizontal align.
Available options:

  1. Item left,
  2. Item right,
  3. Item center - align drop down relatively to menu item
  4. Menu left,
  5. Menu right,
  6. Menu center - align drop down relatively to menu panel
  7. Window left,
  8. Window right,
  9. Window center - align drop down relatively to browser window

Item left example


Item right example
6 Label Set label for first level menu item
7 Grid:
Left,
Center,
Right

Mega menu popup is divided into 12 equal columns
Popup may have left sidebar, right sidebar and content blocks and you may manage it's width.
Left and right sidebars show only custom content
Center block shows only list(s) of sublinks, submenus
Set width in "number of columns" value. Total number of columns should be 12.

Examples:

1) You need two blocks in popup. One block wide for sublinks and second block for image banner at the right
- set Left = 0
- set Center = 8
- set Right = 4

2) You need three blocks in popup. Left banner, right banner and list of links at center. You want link list to be the half width and banners quarter width.
- set Left = 3
- set Center = 6
- set Right = 3
3/12 - is quarter, 6/12 is half, etc

3) You don't need banners, you only want sublinks columns.
- set Left = 0
- set Center = 12
- set Right = 0

Mega menu uses Bootstrap grid. Check more info about grid here.

First example.


Third example.


8 Columns Set the number of sublinks columns per row at center block. 2 columns per row


3 columns per row
9 Images for sub-collections:
Image Sub#1,
Image Sub#2,
Image Sub#3,
Image Sub#4,
Image Sub#5,
Image Sub#6
Set images at sublinks columns. Up to 6 images per drop down.
10 Custom content:
Left,
Right,
Top,
Bottom,
Inner Top,
Inner Bottom

Each drop down has six placeholders for custom content.

Left and Right - you should be familiar with it from description of Grid options. You can set width for left and right placeholder.

Top and Bottom - are placed before or after other drop down content. Width is equal to dropdown width.

Inner Top and Inner Bottom - are placed before or after center block (block which contains sublinks columns) and between Left and Right blocks.

You can edit content using WYSIWYG editor. Or paste custom HTML code here.
To insert block from our demo use + -> Template



Please note.
Tinymce WYSIWYG editor - is not perfect tool for generating HTML code. I recommend to use it only for simple content with plain layout.
And switch off WYSIWYG editor for more complicated layouts. You can use code from demo as example.
If you are not familiar with WYSIWYG editor please refer to it's website here

copy 
<div class="TonyM__prm ttg-image-scale">
	<img src="#" alt="Image name" />
	<div class="TonyM__prm-text TonyM__prm-text--dsgn-white">
		<span>Headphones</span>
		<p>Superior sound quality</p>
		<a class="btn" href="#">Shop now!</a>
	</div>
</div>


Insert image.
1) Upload image to your store at Store admin -> Settings -> Files
2) Copy image URL
3) Paste image URL at WYSIWYG editor
4) Save
5) Apply changes to store
Custom content placeholders.


Insert banner template from demo


Edit content for right block


Edit raw HTML


Edit image
11 Disable content padding Hide paddings for content placeholders.
12 Disable Exclude this item from next sync with Shopify store. Use this option if you want temporary disable mega menu drop down. And don't delete it's configuration. Don't forget to Apply changes to Store.
Account

Account popup

Enable accounts, video manual

Enable accounts at Store Admin -> Settings -> Checkout


You can enable login form at account popup. Check header section options for details.
Currency

Currency switcher

Currency switcher, video manual

Steps to add currency switcher

  1. Be sure you configure currency format at Store Admin -> Settings -> General. Check Start here -> Configure store section of current documentation for more details.
  2. Enable currency switcher at Customize theme -> General settings -> Currency
  3. Configure list of available currencies
  4. Set default currency


Even though prices are displayed in different currencies, orders will still be processed in your store's currency.
Languages

Language switcher

Language switcher, video manual

Shopify software doesn't support multilanguage feature. :(
You should use third party app or run more stores. One store per each language.
Our theme include language switcher. It's basically list of links to new stores in particular language.


Steps to add currency switcher

  1. Create new stores per each language.
  2. Create link list with stores at Store admin -> Online Store -> Navigation
  3. Enable language switcher at Customize theme -> General settings -> Language
  4. Set default language


List of available translations.

# File Language
1 locales/en.default.json English
2 locales/fr.json French
3 locales/es.json Spanish
4 locales/de.json German
5 locales/pt-PT.json Portuguese (Portugal)
6 locales/pt-BR.json Portuguese (Brasil)
7 locales/ar.json Arabic.
Don't forget to enable RTL option at layout settings.